JavaScript的解构问题

数组解构

var colors = ["red","green","blue"];
      // ES5获取数组的值，通过索引
    var redc=colors[0];
    var greenc=colors[1];
    var bluec=colors[1];


  // ES6 解构方式
    var [color1,color2,color3]=colors;

 // 只解构自己想要的值
    var [,,color3]=colors;
    console.log(color3)

// 嵌套数组的解构
    var color = ['red1', ['white', 'black'],'green', 'blue'];
    //color数组中第二个元素是一个数组 所以需要在解构的语法中加[]
    var [color1,[color2,color3]]=color;
    console.log(color1)
    console.log(color2)
    console.log(color3)
 // 在数组中可以通过…语法将数组中的其余元素赋值给一个特定的变量
    var colors = ["red","green","blue"];
    var [color1,...color2]=colors;
    console.log(color2)//输出结果是['green','blue']

对象解构

 var person={
        name:'王超越',
        age:23,
        sex:'男'
    }
    var name1=person.name;
    var age1 =person.age;
    var sex1 = person.sex;
    console.log(name1)

    // 对象解构
    var {name,age,sex}=person;
    console.log(name)//输出结果是 “王超越”
    /* 
    使用解构值表达式时， 
    如果指定的局部变量名称在对象中不存在，
    那么这个局部变量会被赋值为undefined 
    */
    var {name,age,sex,address}=person;
    console.log(address)//输出结果是“undefined”

   /* 当指定的属性不存在时，可以随意定义一个默认值，在属性名称后添加一个等号（=） */
   var {name,age,sex,address='陕西省西安市'}=person;
    console.log(address)//输出结果是“陕西省西安市”

    /* 如果不想使用对象的属性名，ES6也提供了本地变量名 */
    var {name:lname,age:lage,sex:lsex}=person;
    console.log(lname)

几个实用的JS解构用法

交换变量

现在有两个变量a，b，希望能把两个变量的值进行交换，看下常规方法：

 let a=6
        let b=8
        let rr
        rr=a;
        a=b;
        b=rr;//此时a=8,b=6

现在我们使用解构的方法来做交换变量：

 let a = 6;
        let b = 8;
        [a, b] = [b, a];
        a; 
        b; //a=8；b=6

访问数组中的元素

访问数组第2个元素，左侧的“，”表示忽略第一个元素

const colors = [];
        const [, secondColor = 'black'] = colors;
        secondColor; //'black'