ES6变量的解构赋值

数组的解构赋值

1.用法

首先es6是可以按照一定模式，从数组和对象中提取变量并进行赋值，这一

步骤称为解构。‘’

相比较于学习es6之前，我们都是直接指定赋值的。如下：

let a = 1;
let b = 2;
let c = 3;

在学习es6之后，我们可以用es6的方法去给变量赋值。

let [a, b, c] = [1, 2, 3];

从数组中提取值，按照对应的位置，对变量赋值。

只要等号两边的模式相同，左边的变量就会被赋予对应的值。

以下是我使用嵌套数组进行解构的案例：

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

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

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

如果没有解构成功，变量值就会等于undefined。

当然有成功结构，就有不完全解构。一般为等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

如果等号的右边不是数组

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

以上的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口，要么本身就不具备 Iterator 接口。

默认值

解构赋值是有指定默认值的

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并不全等于undefined，所以默认值是不会生效的。

对象解构赋值

es6的解构赋值还可以作用于对象。

let { foo, bar } = { foo: 'oys', bar: 'fpp' };
foo // "oys"
bar // "fpp"

对象的解构与数组是有不同的。数组的元素是按次序排列的，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。如下：

let { baz } = { foo: 'wksb', bar: 'wkbssb' };
baz // undefined

解构失败，变量的值等于undefined。

对象的解构赋值的默认值

对象解构赋值的默认值规则大致和数组差不多，我写几个案例大家大致感受一下：

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: oys = 'wo shi wk de dd' } = {};
oys // "wo shi wk de dd"

默认值的生成条件也是严格遵循相等运算符的，不是全等于不生效。

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

当然解构赋值不仅仅是数组和对象，还有字符串、函数等等都是可以用解构赋值的，这个留到下次的博客讲。