ES6 变量的解构赋值

数组的解构赋值

1.从数组中提取值，按照对应位置，对变量赋值。
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
2.解构不成功，变量的值就等于undefined。
let [foo] = [];//foo为undefined
let [bar, foo] = [1];//foo为undefined
3.不完全解构：等号左边的模式，只匹配一部分的等号右边的数组
let [x, y] = [1, 2, 3];
x // 1
y // 2
4.Set结构
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"
5.默认值 ：解构赋值允许指定默认值
let [a,b = 2,c=3] = [1,undefined,null];
a //1
b //2
c //null

对象的解构赋值

1.let { foo, bar, baz} = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
baz //undefined
2.let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
3.对象的解构也可以指定默认值。
var {x = 3} = {};
x // 3
var {x: y = 3} = {x: 5};
y // 5

注意点：

1.一个已经声明的变量用于解构赋值
let x;
{x} = {x: 1}; //syntax error
let x;
({x} = {x: 1}); //1
2.由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

字符串的解构赋值

const [a, b] = 'hello';
a //h
b //e

数值和布尔值的解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

函数参数的解构赋值

function add([x, y]){
return x + y;
}
add([1, 2]); // 3

不能使用圆括号的情况

1.变量声明
2.函数参数

解构用途（重要）

1.交换变量的值
let x =1;
let y = 2;
[x,y] = [y,x]
2.函数返回多个值(常用)
function add(){
return [1,2,3]
}
let [a,b,c] = add();
3.提取JSON数据(常用)
let json = {
id:1,data:[1,2]
};
let {id,data:number} = json;
id//1 number//[1,2]
4.函数参数的默认值
5.遍历Map结构(常用)
const 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
获取键名
for (let [key] of map) {
// ...
}
获取键值
for (let [,value] of map) {
// ...
}
6.加载模块(常用)
const {a,b} = require('...');

练习题

1.let obj = {a:1,b:2,c:{d:{e:3}}};
let {a=3,b,c:{d}} = obj;
console.log(a);
console.log(b);
console.log(d);
2.function count({color="white",number = {x:1,y:1},total = 2} = {}){
console.log(color,number,total)
}
count();
count({color:"black",number:{a:1},total:{total:3}});