解构赋值概念：在ES6中，直接从数组和对象中取值，按照对应位置，赋值给变量的操作。
#2.1 数组
基础用法：
// ES6 之前
let a = 1;
let b = 2;
// ES6 之后
let [a, b] = [1, 2];
本质上，只要等号两边模式一致，左边变量即可获取右边对应位置的值，更多用法：
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a, b, c); // 1, 2, 3
let [ , , c] = [1, 2, 3];
console.log(c); // 3
let [a, , c] = [1, 2, 3];
console.log(a,c); // 1, 3
let [a, ...b] = [1, 2, 3];
console.log(a,b); // 1, [2,3]
let [a, b, ..c.] = [1];
console.log(a, b, c); // 1, undefined, []
注意点：
- 如果解构不成功，变量的值就等于
undefined。
let [a] = []; // a => undefined
let [a, b] = [1]; // a => 1 , b => undefined
- 当左边模式多于右边，也可以解构成功。
let [a, b] = [1, 2, 3];
console.log(a, b); // 1, 2
- 两边模式不同，报错。
let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};
指定解构的默认值：
基础用法：
let [a = 1] = []; // a => 1
let [a, b = 2] = [a]; // a => 1 , b => 2
特殊情况：
let [a = 1] = [undefined]; // a => 1
let [a = 1] = [null]; // a => null
右边模式对应的值，必须严格等于undefined，默认值才能生效，而null不严格等于undefined。
#2.2 对象的解构赋值
与数组解构不同的是，对象解构不需要严格按照顺序取值，而只要按照变量名去取对应属性名的值，若取不到对应属性名的值，则为undefined 。
基础用法：
let {a, b} = {a:1, b:2}; // a => 1 , b => 2
let {a, b} = {a:2, b:1}; // a => 2 , b => 1
let {a} = {a:3, b:2, c:1};// a => 3
let {a} = {b:2, c:1}; // a => undefined
注意点：
- 若变量名和属性名不一致，则需要修改名称。
let {a:b} = {a:1, c:2};
// error: a is not defined
// b => 1
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
上面代码中，a 是匹配的模式，b才是变量。真正被赋值的是变量b，而不是模式a。
- 对象解构也支持嵌套解构。
let obj = {
a:[ 1, { b: 2}]
};
let {a, a: [c, {b}]} = obj;
// a=>[1, {b: 2}], b => 2, c => 1
指定解构的默认值：
let {a=1} = {}; // a => 1
let {a, b=1} = {a:2}; // a => 2, b => 1
let {a:b=3} = {}; // b => 3
let {a:b=3} = {a:4}; // b = >4
// a是模式，b是变量 牢记
let {a=1} = {a:undefined}; // a => 1
let {a=1} = {a:null}; // a => null
// 因为null与undefined不严格相等，所以赋值有效
// 导致默认值1不会生效。
#2.3 字符串的解构赋值
字符串的解构赋值中，字符串被转换成了一个类似数组的对象。 基础用法：
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length:len} = 'hello';// len => 5
#2.4 数值和布尔值的解构赋值
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
// 数值和布尔值的包装对象都有toString属性
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
#2.5 函数参数的解构赋值
基础用法：
function fun ([a, b]){
return a + b;
}
fun ([1, 2]); // 3
指定默认值的解构:
function fun ({a=0, b=0} = {}){
return [a, b];
}
fun ({a:1, b:2}); // [1, 2]
fun ({a:1}); // [1, 0]
fun ({}); // [0, 0]
fun (); // [0, 0]
function fun ({a, b} = {a:0, b:0}){
return [a, b];
}
fun ({a:1, b:2}); // [1, 2]
fun ({a:1}); // [1, undefined]
fun ({}); // [undefined, undefined]
fun (); // [0, 0]
#2.6 应用
- 交换变量的值:
let a = 1,b = 2;
[a, b] = [b, a]; // a =>2 , b => 1
- 函数返回多个值:
// 返回一个数组
function f (){
return [1, 2, 3];
}
let [a, b, c] = f(); // a=>1, b=>2, c=>3
// 返回一个对象
function f (){
return {a:1, b:2};
}
let {a, b} = f(); // a=>1, b=>2
- 快速对应参数: 快速的将一组参数与变量名对应。
function f([a, b, c]) {...}
f([1, 2, 3]);
function f({a, b, c}) {...}
f({b:2, c:3, a:1});
- 提取JSON数据：
let json = {
name : 'leo',
age: 18
}
let {name, age} = json;
console.log(name,age); // leo, 18
- 遍历Map结构:
const m = new Map();
m.set('a', 1);
m.set('b', 2);
for (let [k, v] of m){
console.log(k + ' : ' + v);
}
// 获取键名
for (let [k] of m){...}
// 获取键值
for (let [,k] of m){...}
- 输入模块的指定方法: 用于按需加载模块中需要用到的方法。
const {log, sin, cos} = require('math');
网友评论