谈谈神秘的ES6——（四）解构赋值【数组篇】

今天，我们来讲一个新的概念，叫做解构赋值。那么在ES6中，什么是解构赋值呢？我们先来给它下个定义。

在ES6中，允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。满足解构赋值的前提是：1.等号两边结构一样；2.声明和赋值不能分开；3.右边是具体的“东西”。

在ES5的时候，我们想要对a,b,c三个变量赋值，一般来说都是var三个变量，写三行赋值。有了解构，它可以变成这个样子：

let [a,b,c] = [1,2,3]
console.log(a);//1
console.log(b);//2
console.log(c);//3

当然，以下的写法也是允许的：

let [[arr],str] = [["arr"],"str"];

let [ , , third] = ["foo", "bar", "baz"];
console.log(third) // "baz"

let [x, , y] = [1, 2, 3];
console.log(x) // 1
console.log(y) // 3

let [head, ...tail] = [1, 2, 3, 4];
console.log(head) // 1
console.log(tail) // [2, 3, 4]

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

数组的解构赋值

上边用的例子，其实就是数组的解构赋值，它的特点是等号左右两边都是数组。

解构赋值的结果分类，可分为解构成功、解构不成功和不完全解构。上边用的例子就是解构成功，那么什么是解构不成功呢，我们来看一下：

let [x, y, ...z] = ['a'];
console.log(x) // "a"
console.log(y) // undefined
console.log(z) // []

let [foo] = [];
console.log(foo) // undefined

let [bar, foo] = [1];
console.log(foo) // undefined

如果解构不成功，变量的值就等于undefined

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [x, y] = [1, 2, 3];
console.log(x) // 1
console.log(y) // 2

let [a, [b], d] = [1, [2, 3], 4];
console.log(a) // 1
console.log(b) // 2
console.log(d) // 4

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

默认值

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

let [foo = true] = [];
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];
x // 1

let [x = 1] = [null];
x // null

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

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

let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

上面最后一个表达式之所以会报错，是因为x用y做默认值时，y还没有声明。

如果想跟着振丹继续学习，可以微信关注【振丹敲代码】（微信号：JandenCoding）

新博文微信同步推送，还附有讲解视频哦~

也可直接扫描下方二维码关注。