ES6的解构赋值

ES6解构：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称之为解构

1.数组的解构赋值

//可以从数组中提取值，按照对应位置对变量赋值
let [a,b,c]=[1,2,3]
console.log(a);//1
console.log(b);//2
console.log(c);//3

//本质上这种写法属于‘模式匹配‘，只要等号两边的模式相同，左边的变量就会被赋予对应的值

//嵌套数组进行解构
	let [foo, [[bar], baz]] = [1, [[2], 3]];
	foo // 1
	bar // 2
	baz // 3
	
	let [ , , third] = ["foo", "bar", "baz"];
	third // "baz"
	
	let [x, , y] = [1, 2, 3];
	x // 1
	y // 3
	
	let [head, ...tail] = [1, 2, 3, 4];
	head // 1
	tail // [2, 3, 4]
	
	let [x, y, ...z] = ['a'];
	x // "a"
	y // undefined
	z // []

如果解构不成功，变量的值就等于undefined

解构一般有三种情况，完全解构，不完全解构，解构不成功,在上述例子中存在完全解构和解构不成功的例子，下面来看一下不完全解构的例子

let [x, y] = [1, 2, 3];
	x // 1
	y // 2
	
let [a, [b], d] = [1, [2, 3], 4];
	a // 1
	b // 2
	d // 4

//不完全解构：即等号左边的模式，只匹配一部分的等号右边的数组，这种情况下解构依然成功

//如果等号的右边不是数组，或者说不是可遍历的结构，那么将会报错

let [a] = 1;
let [b] = false;
let [c] = NaN;
let [d] = undefined;
let [e] = null;
let [f] = {};

//上面的语句都会报错：Uncaught TypeError: 1 is not iterable

2.默认值

解构赋值允许指定默认值

let [x,y='b'] = ['a'];
console.log(y); //b

let [x,y = 'b'] = ['a',undefined];
console.log(y); //b ,数组成员为undefined时，默认值仍会生效(因为在ES6内部使用严格相等运算符‘===‘，判断一个位置是否有值，所以当一个数组成员严格等于undefined,默认值才会生效)

let [x,y = 'b'] = ['a',null];
console.log(y); //null,如果一个数组成员是null,默认值就不会生效，因为null不严格等于undefined

3.对象的解构赋值
对象的解构与数组有一个重要的不同，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

 //1. 变量名与属性名一致的情况下
 let {foo,bar} = {foo : "aaa",bar : "bbb"}
 console.log(foo); //aaa
 console.log(bar); //bbb
 //变量名与属性名不一致的情况下，必须这样写
 let {a : name, b : age} = {a : 'zhangsan', b : 33};
 console.log(name); //zhangsan
 console.log(age);  //33

实际上 对象的解构赋值是以这样的形式简写的

 let {foo : foo ,bar : bar} = {foo : "aaa",bar : "bbb"}

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者，而不是前者，第一个foo/bar 是匹配的模式，对应的foo/bar属性值才是变量，真正被赋值的是属性值（也就是第二个foo/bar), 如果不能理解再看下面这个例子

const node = {
    grand : {
        father : {
            line : 1,
            column : 5
        }
    }
 }

 let {grand,grand : { father},grand : {father : {column}}} = node;
 console.log(father); // {line : 1, column : 5}
 console.log(column); // 5
 // grand、fahter、column 分别对这三个属性解构赋值，grand、father是模式，只有column 是变量

4.字符串的解构赋值

const [a,b,c,d,e] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(e); //o

let { length : len} = 'yahooa';
console.log(len); //5,类似数组的对象都有一个length属性，还可以对这个属性解构赋值

5.数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象，但是等号右边为undefined 和 null时无法转为对象，所以对他们进行解构赋值时，都会报错

let {prop : x } = undefined;
console.log(x); //报错：Uncaught TypeError: Cannot destructure property `prop` of 'undefined' or 'null'

6.函数参数的解构赋值
函数的参数也可以使用解构参数

function move({x = 0,y = 0} = { }){
    return [x,y];
 }
console.log(move({x : 3,y : 4})); //[3,4]
console.log(move({x : 3})); //[3,0]
console.log(move({})); //[0,0]
console.log(move()); //[0,0]
//move()的参数是一个对象，通过对这个对象进行解构，得到变量x、y的值，如果解构失败，x和y 等于默认值

function move2({x,y} = {x : 1, y : 2 }){
    return [x,y];
}
console.log(move2({x : 6,y : 8})); //[6,8]
console.log(move2({})); //[undefined,undefined]
console.log(move2()); //[1,2]
//move2() 是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以与前一种写法的结果不太一样，undefined 就会触发函数的默认值