ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
一、数组的解构赋值
在ES6之前想要为变量赋值,只能直接指定其值,如下:
let a = 1;
let b = 2
ES6允许写成下面这样:,如下:
let [a,b] = [1,2]
// a = 1, b = 2
值得注意的是,等式两边的值要对等,这样左边的变量才会被赋上右边对应的值,如果不对等左边的值将会出现undefined,如下写法:
let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3
注意:只有左右两边的 格式一定要对等,数量可以不对等。
let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined
let [a,,c] = [1,2,3]
a = 1, c = 3
let [a, ...b] = [1,2,3]
a = 1, b = [2,3]
let [a] = []
let [b,a] = [1]
a = undefined
二、对象的解构赋值
1、let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是baz,而不是模式foo。
2、对象的解构也可以指定默认值
var{x=3}={};
x//3
var {x,y=5}={x:1}
x//1
y//5
三、字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
四、数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
五、函数参数的解构赋值
函数的参数也可以使用解构赋值。
补充:可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。