基本用法
从数组和对象中提取值，对变量进行赋值，被称为解构。
//es5之前的写法
let a =1;
let b=2;
let c=3;
//es6解构写法
let [a,b,c]=[1,2,3];
如果解构不成功，变量的值等于 "undefined"
let [foo]=[];
let [bar,foo]=[1];
//foo都为 "undefined"
默认值
解构赋值允许指定默认值
let [foo=true]=[];
console.log(foo);//true
let [x,y='b']=['a']; //x='a',y='b'
let [x,y='b']=['a',undefined]; // x='a',y='b'
es6内部严格使用相等运算符 ( === ),判断一个位置是否有值。所以一个数组成员不严格等于 "undefined" 解构赋值会生效，而默认值不生效。
let [x = 1] = [undefined] ;
console.log(x);//1
let [x = 1] =[null];
console.log(x);//null
对象的解构赋值
let {foo,bar}={foo:"aaa",bar:"bbb"};
console.log(foo,bar)//"aaa","bbb"
对象的解构与数组解构最大的不同 :
- 数组的元素是按次序排列的，变量的取值由它的位置决定。
- 对象那个的属性没有次序，所以变量必须与属性同名。
如果变量名与属性名不一致，必须携程下面这样。
var {foo:baz}={foo:"aaa",bar:'bbb'};
console.log(baz)//'aaa'
console.log(foo)//error:foo is not defined
上面代码中， foo 是匹配的模式，baz 才是变量。真正被赋值的是 baz，而不是模式 foo。
实际上说明，对象的解构赋值是 下面的简写:
let {foo:foo,bar:bar}={foo:'aaa',bar:'bbb'}
嵌套赋值
与数组一样，解构也可以用于嵌套结构的对象。
let obj={
p:['Hello',[y:"World"]];
}
let {p:[x,{y}]}=obj;
console.log(x,y);//'Hello','World'
let obj={};
let arr=[];
({foo:obj.prop,bar:arr[0]}={foo:123,bar:true});
console.log(obj,arr)// {prop:123},[true]
字符串的结构赋值
字符串也支持解构赋值,这是因为此时，字符串被转换成一个类似数组的对象
const [a,b,c,d,e]='hello';
console.log(a,b,c,d,e)//'h','e','l','l','o'
let{length:len}='hello'
console.log(len)//5
数值和布尔值的解构赋值
let {toString:s}=123;
s === Number.prototype.toString//true
let {toString:s}=true;
s===Number.prototype.toString//true
- 解构赋值的规则是：只要等号右边的值不是对象或者数组，就先将其转为对象，由于 undefined和 null 无法转为对象，所以对它们进行接哦股赋值，都会报错。
函数参数的解构赋值
function add([x,y]){
return x+y;
}
console.log(add([1,2]);)//3
另一个例子：
[[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]
用途
-
交换变量的值
let x=1; let y=2; [x,y]=[y,x]; -
从函数返回多个值
函数只能返回一个值，如果要返回多个值，解构方便
fucntion example(){ return [1,2,3]; } let [a,b,c]=example(); -
函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1}); -
提取JSON数据
解构赋值对提取JSON对象中的数据，尤其有用。
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309] -
函数参数的默认值
指定参数的默认值，就避免了在函数体内部再写
var foo = config.foo || 'default foo';这样的语句。 -
遍历Map结构
任何部署了Iterator接口的对象，都可以用
for...of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。var map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world -
输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
