[ES6] 解构赋值

2019-08-13  本文已影响0人  EmilioWeng

解构(Destructuring)

ES6 允许从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

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

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

let [first, [[second], third]] = [1, [[2], 3]];
first // 1
second // 2
third // 3

let [ , , third] = ["first", "second", "third"];
third // "third"

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

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

如果变量匹配不上导致解构不成功,变量的值就等于undefined。一般解构不成功是因为等号右边的值无法匹配上等号左边的变量。
要是等号左边的变量只能匹配到部分等号右边的值,称为不完全解构

let [foo] = []; //undefined
let [first, foo] = [1]; //foo is undefined

针对数组的解构,如果等号右边的值是不可遍历的,则解构时会报错。

// 以下均会报错
let [foo] = 1;
let [foo] = false;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

解构不仅可以用在数组上,也可以用在对象中。对象的解构与数组不一样的地方在于,数组解构时严格按照顺序进行匹配,而对象则需要按照同名的属性进行匹配。

let { first, second } = { first: '111', second: '222' };
first // "111"
second // "222"

需要注意的是,因为数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, 2 : third} = arr;
first // 1
third // 3
上一篇下一篇

猜你喜欢

热点阅读