变量的解构赋值整理

1、数组的解构赋值

基本用法

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

let x = 1;
let y = 2;
let z = 3;

let x = 1,
    y = 2,
    z = 3;

let [x,y,z] = [1,2,3];   //ES6数组解构

实例：

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

rest 运算符

rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

rest运算符配合解构使用：

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

默认值

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

let [a = 1] = ['a'];   //=====>   var a = 'a' || 1;
let [a = 1] = [];    // ===> var a = 1
// 除了undefined
let [b = 1] =[undefined];   //1   如果解构的值为undefined   取默认值
let [b = 1] =[null];   //null

let [a, b = 2] = ['a'];    //a = 'a'   b = 2;
let [a=1,b=2] = ['a',undefined];//a = 'a' b =2

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];    //1
let [x = f()] = [];    //x = 'aaa'

let [a = 1,b = a] = [];　　//a = 1 b =1
let [a = 1,b = a] = [5,8];  //a = 5 b =8 由于惰性求值，他的默认值取8
let [a = b,b = 5] =[,8];   　//错误 由于b在let声明前使用所以报错

2、对象的解构赋值

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

let {name:a,age:b} = {age:20,name:'abc'};  //b = 20 a = 'abc' name是匹配模式，a是变量
let {name,age} = {age:20,name:'abc'};  //name = 'abc' age = '20'
let {abc:name,age:age} = {age:20,name:'abc'};   //错误  name为变量， abc是对象中匹配的值
let aa = {age:20,name:'abc'};
let {abc:name,age:age} = aa;

默认值

let {x:y=10} ={y:5};  //如果输出y的值y=10 x为匹配模式，后面没有对应的x，所以默认值取y=10
let {x} ={y:5};   //输出x的值 x = undefined

3、字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

4、数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

5、函数参数的解构赋值

默认值

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

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

注意，下面的写法会得到不一样的结果。


function move({x, y} = { x: 0, y: 0 }) {  // 等号右边相当于一个默认参数 而不是x,y默认值
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。