ES6解构赋值

ES6解构赋值

解构赋值的定义

​ 简单来说，解构赋值就是按照一定的格式，从数组和对象中取值，赋给变量。

​ 与之前只能直接指定变量值的方式相比，解构赋值的出现，让同时为多个变量复制提供了方法。

解构赋值的格式

let [a,b,c] = [1,2,3];
console.log(a)							// 1;
console.log(b)							// 2;
console.log(c)							// 3;

上面的代码即是从数组中取值，为对应的变量赋值。

该方法属于“模式匹配”，只要等号两边模式相同，就可取出对应的值赋值给变量。而且请注意，数组是可以进行嵌套的。例如：

let [a,[[b],c]] = [1,[[2],3]];
a // 1
b // 2
c // 3

不完全解构和解构不成功

即是说，等号左边的模式只匹配部分等号右边的数组，但在这种情况下，解构依旧会成功。

let [a,b,c] = [1,2]
a // 1
b // 2

此时，只有a和b得到了解构赋值，变量c并没有对应的值，即是解构不完全。

当解构不成功时，变量值为undefined,如：

let [a,b,c] = [1,2]			//注意，此处为演示，在ES6中变量名不能重复声明
a // 1
b // 2
c // undefined

所以，没有对应的值能够赋给变量时，则其值会显示为undefined，则c解构不成功
相当于只声明了变量c,并未给它赋值。

默认值的设定

在解构过程中，可以给变量提前赋予默认值，例如：

let [a,b,c=3] = [1,2]
a  // 1
b  // 2
c  // 3

由上可见，c解构不成功，但因为提前给c赋予了默认值，所以它的值也不是undefined, 而是3。

默认值也可以在解构时进行覆盖

let [a,b,c=3] = [1,2,6]
a  // 1
b  // 2
c  // 6

这个时候默认值3会被新的值6覆盖，c的值为6；注意：当新的值为undefined的时候，是不会覆盖默认值的。

对象的解构

对象的解构赋值跟数组的解构赋值很类似：

let {a,b,c}={"a":1,"b":2,"c":3};

    console.log(a);  // a的值为1    
    console.log(b);  // b的值为2
    console.log(c);  // c的值为3

但与数组遍历不同的是，这里对象中的值的顺序，并不会影响赋值的正确性。它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。

 let {a} ={"b":2};

    console.log(a); // a的值为undefined

当你想要在变量名和属性名不一致的时候进行赋值，则需要对变量名再做一次关联

  let {b:a,}={"b":2};

    console.log(a); // a的值为2

而字符串也可以进行解构赋值的操作：

let [a,b,c,d,e,f]="今晚夜色真美";

    console.log(a); // 今
    console.log(b); // 晚
    console.log(c); // 夜
    console.log(d); // 色
    console.log(e); // 真
    console.log(f); // 美

即是对应字符串的位置进行赋值。

用途

1. 交换变量的值

	let x=1;
    let y=2;
    [x,y]=[y,x];

	x // 2
	y // 1

1. 提取函数返回的多个值

	function boy(){
        return{"name":"阿左","age":24}
    }
    let {name,age}=boy();
    console.log(name);// 阿左
    console.log(age);// 24

1. 定义函数参数

	function message({a,b,c}){
		console.log("姓名："+a);     
		console.log("身高："+b);
		console.log("体重："+c);
    }
    message({a:"阿左",b:"1.80m",c:"70kg"});