es6 Destructuring（解构）

简介

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

一、解构赋值

1. 基本示例

//ES5
var a=1,
    b=2,
    c=3;

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

/*es6 对象
*对象解构赋值时需注意
*被赋值的部分也是个复杂对象时，取值需使用冒号后边那个值
*/
let {name,age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
console.log(name);  //cursor
console.log(age);   //19
console.log(id);    //vc6dfuoc91vpdfoi87s

let {type:tipType,min:minNumber}={type:'message',min:20};
console.log(tipType);   //message
console.log(minNumber); //20
console.log(type)   //VM626:1 Uncaught ReferenceError: type is not defined

2. 嵌套解构

保证解析对象与赋值对象结构一致即可。

示例如下

let [age, [{name: fname}]] = [20, [{
    name: 'qc'
}]];


console.log(age); //20
console.log(fname); //qc

3. 不完全解构

等号左边的模式，只匹配一部分等号右边的数组或对象。

let [name,[age,[fname],[lname]],email]=['steven',[20,['qc'],[]]];
console.log(name);  //steven
console.log(age);   //20
console.log(fname); //qc
console.log(lname); //undefined
console.log(email); //undefined

坑点注意：

1. 当使用let给一些属性进行解构赋值，即便某个值对应位置为空（得到结果为undefined），也不能通过let再次赋值。
2. 当进行解构赋值时尽量保证结构一致，当等号右边的部分无法构造出等号左边的的解构，会提示迭代器错误，深入了解请看如下代码：

//因为lname外层是一个数组，而右边的表达式无法解析出对应解构便会报错
let [name,[age,[fname],[lname]],email]=['steven',[20,['qc']]];

//报错信息
VM57:1 Uncaught TypeError: ["steven",[20,["qc"]]] is not iterable
    at <anonymous>:1:40

4.解构赋值的默认值

在给对象或者与元素赋值时，可给被赋值的对象设置一个默认值，当被复制对象无法通过解构赋值取到值时会被赋予默认值。

默认值的生效条件是对象的属性值严格等于undefined。

let [temp="string"] = ["tempString"];
console.log(temp); //tempString

let [head, ...other] = [0,1,2,3,4,5,6,7,8,9,10];
console.log(head);  //0
console.log(other); //[1,2,3,4,5,6,7,8,9,10];

let {message: msg="Just do it!"} = {};
console.log(msg);   //Just do it!

let {color='yellow'} = {color: null}
console.log(color); //null

let {sin,cos,tan,log}=Math;
console.log(Math.sin===sin);    //true
console.log(Math.cos===cos);    //true
console.log(Math.tan===tan);    //true
console.log(Math.log===log);    //true

5.字符串解构

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

字符串在使用解构赋值时有个隐藏属性length

const {length:len}="interesting";
console.log(len);   //11

const {length}="Hello world!";
console.log(length);

6.函数参数解构

function({x,y}={x:0,y:0}){
    return [x,y];
}

console.log(fun({x:100,y:200})); //[100,200];
console.log(fun({x:100})); //[100,undefined]
console.log(fun({})); //[undefined,undefined]
console.log(fun()); //[undefined,undefined]

二、其他用法

1.交换变量

let a=100,b=200;
[a,b]=[b,a];

2.接收不定参数

• 可用解构赋值的方法接收函数返回的多个参数
• 不定参数可用...号接收

const fn=()=>({name:'k',age:'t',size:'m'});

let {name,age,size}=fn();
console.log(name);
console.log(age);
console.log(size);

let {id:userid,name:username,age:mage}=fn();
console.log(userid);
console.log(username);
console.log(mage);

let {name,...other}=fn();
console.log(other);  //{age: "t", size: "m"}

3.Map对象的遍历解构

var map=new Map();
map.set("id","007");
map.set("name","cursor");

for(let [key,value] of map){
    console.log(key+ ' is '+value);
}
    // id is 007
    // name is cursor

for(let [key] of map){
    console.log(key);
}
    // id
    // name

for(let [,value] of map){
    console.log(value);
}
    // 007
    // cursor

END