ES6数组的解构赋值

ES6数组的解构赋值

目录

ES6数组的解构赋值

对象的解构赋值

字符串的解构赋值

函数参数的解构赋值

用途

---

基本用法

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

es5一次声明多个变量

var a = 1,
    b = 2,
    c = 3,
    ...;

es6一次声明多个变量

let [a,b,c] = [1,2,3];
//a = 1
//b = 2
//c = 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 [foo] = [];
let [bar, foo] = [1];
//foo 都是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