ECMAScript6（ES6）之解构赋值(数组，对象，字符串)

ECMAScript6（ES6）之解构赋值(数组，对象，字符串)
es6允许按照一定模式，从数组和对象中提取，对变量进行赋值，这被称为解构
1、数组的解构赋值
 只要等号两边的模式相同，左边的变量就会被赋予对应的值

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

let [,,third]=["food","bar","baz"];
console.log(third);//bar

let [head,...tail]=[1,2,3,4,5,6];
console.log(head);//1
console.log(tail);//[2,3,4,5,6]

如果解构不成功，变量的值就等于undefined
let [x,y,...z]=['a'];
console.log(x,y,z);//a undefined []

let [foo]=[]
console.log(foo)//undefined

let [bar,foo1]=[1];
console.log(bar,foo1);//1 undefined

 对于Set结构，也可以使用数组的解构赋值

let [x,y,z]=new Set(["a","b","c"]);
console.log(x,y,z);//a b c

 解构默认赋值允许指定默认值

let [foo=true]=[]
console.log(foo);//true

 es6内部使用严格相等运算符(===)判断一个位置是否有值。如果一个数组成员不严格等于undefined，默认值不会生效

let [x=1]=[undefined];
console.log(x);//1

let [y=1]=[null];
console.log(y);//undefined

let [z=1]=[];
console.log(z);//1

 可以解构其他变量，但是该变量必须已经声明

let [x=1,y=x]=[];
console.log(x,y);//1 1

let [z=h,h=1]=[];
console.log(z,h);//ReferenceError

 注意：解构赋值不仅适用于let命令，也适用于var和const命令
2、对象的解构赋值
 对象的解构与数组有一个重要的不同。数组的元素时按次序排列的，变量的取值由它的位置决定的；而对象的属性没有次 序，变量必须与属性同名，才能取到正确的值

let {foo,bar}={foo:"aaa",bar:"bbb"};
console.log(foo,bar)//aaa bbb

let {baz}={foo:"aaa",bar:"bbb"};
console.log(baz)//undefined

 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let {foo:baz}={foo:"aaa",bar:"bbb"};
console.log(baz);//aaa
console.log(foo);//ReferenceError: foo is not defined

 以下代码中，解构赋值的变量都会重新声明，因此使用let，const命令会报错。由于var命令允许重新声明，使用var命令不 会报错

let foo;
let {foo}={foo:1};
console.log(foo)//Identifier 'foo' has already been declared

var baz;
var {baz}={baz:1};
console.log(baz);//1

 对象的解构也可以指定默认值，但是默认值生效的条件是，对象的属性值严格等于undefined;

let {x=3}={}
console.log(x)//3

let {z,y=5}={z:1};
console.log(z,y)//1,5

let {mes:msg="hahhhaa"}={};
console.log(msg)//hahhhaa

let {mx=4}={mx:undefined}
console.log(mx);//4

let {ms=4}={ms:null};
console.log(ms)//null

3、字符串的解构赋值
 字符串被转换成了一个类似数组的对象

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

 类似数组的对象都有length属性，因此还可以对这个属性解构赋值

let {length:len}='hello';
console.log(len)//5

参考：ES6标准入门（第二版)