ES6学习笔记之解构赋值

解构赋值

结构赋值的目的还是为了赋值，等号左右是某一种结构，比如数组，通过元素之间的一一对应达到赋值的效果。在某种情形下也可用于两个变量之间的交换等特殊操作。
解构赋值分类：

• 数组
• 对象
• 字符串
• 布尔
• 函数参数
• 数值

1.数组 :

{
    let a,b;
    [a,b]=[1,2];
    //快速对变量进行赋值
}

使用展开运算符

{
    let a,b,rest;
    [a,b,...rest] =[1,2,3,4,5];
    console.log(a,b,rest);  //a=1,b=2,rest=[3,4,5]
}

参数不对应情况（一边多一边少）

    {
        /*
        *  变量匹配
        */
        let a,b,c,rest;
        [a,b,c]=[1,2];
        console.log(a,b,c); //1 2 undefined
        [a,b,c=3]=[1,2];
        console.log(a,b,c); //1 2 3
                             //没有匹配上，就为undefined
    }

2.对象

  let a,b;
 (
  {a,b} = {a:1,b:2}
)

{
    /**
     * 对象解构赋值
     */
    let o = {
        p: 42,
        q: true
    }

    let { p, q } = o;
    //   console.log(p,q);
}

非一一对应，只给左侧对应属性赋值

	let {a:10,b=3} = {a:2};
	console.log(a,b); // 2 3
	

但是左侧属性少，将会报错

let {a:2} = {a:1,b:1}; 
console.log(a,b)	// Uncaught SyntaxError

常见使用场景

1.变量交换

{
    /**
     * 变量交换
     */
    let a = 1;
    let b = 2;
    [a,b] =[b,a];  
    console.log(a,b); // 2 1
}

2.接收函数的多个返回值，并同时赋给指定的变量

{
    /**
     * 函数解构赋值
     */
    function f() {
        return [1,2];
    }
    let a,b;
    [a,b] = f();
    console.log(a,b);  // 1 2
}

3.选择性接收函数的返回值

{
    /**
     * 选择性接收函数的返回值
     */
    function f() {
        return [1,2,3,4,5];
    }
    let a,b,c;
    [a,,,b] = f();
    console.log(a,b); //1 4
}

返回值不确定，接收第一个返回值，剩余存到数组中。
使用展开运算符，将函数返回的一部分值存到数组。

{
    /**
     * 选择性接收函数的返回值
     */
    function f() {
        return [1,2,3,4,5];
    }
    let a,b,c;
    [a,,...b] = f();
    console.log(a,b); //1 [3,4,5]
}

以上两种可以组合使用

4.对象与数组组合 (嵌套解构）

• 指定接收那个就写哪个

{
    let metaData = {
        title: 'abc',
        test: [{
            title: 'text',
            desc: 'description'
        }]
    }
    let {
        title: esTitle,
        test: [{
            title: cnTitle
        }] } = metaData;
      console.log(esTitle,cnTitle); //abc text 
      
}

    let key = "keys";
    let { [key]: foo } = { z: "bug" };
    
    console.log(foo); // "bug"

总结：

• 变量交换是一种常用的情景。
• 使用[] 进行解构赋值，对应变量和数值需一一对应，如不对应则变量会为undefined
• 对象解构赋值时，如果等号左侧的对象属性比右侧少，则会报错，反之将只给对应属性赋值。
• 使用展开运算符可将多个接收来的元素转为一个数组
• 使用 , 可以省略不想接收的中间元素。
• 数组对象之间可以组合使用解构赋值。