2.变量的解构赋值

回到目录

前言

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

提示

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
(简单来说就是格式不匹配就会报错)

数组的解构赋值

只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

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; // []

let [foo, [[bar], baz]] = [1, [4, 3]];
// Uncaught TypeError: [1,[4,3]] is not iterable  at <anonymous>:1:27
// 这里报错的原因是 [bar]  最后只能匹配到 4 ，这两个结构不匹配

let [foo = true] = [];
foo; // true

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

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

例子

let obj3 = {
  p: ["Hello", { y: "World" }],
  q: { a: 15 }
};

let {
  p,
  p: [x, { y, z = 16 }],
  q: Q
} = obj3;
x; // "Hello"
y; // "World"
p; // ["Hello", {y: "World"}]
z; // 16
q; // Uncaught ReferenceError: q is not defined
Q; // {a: 15}

总结

类别	结论
数组的解构	按照遍历器 iterator 来依次赋值
对象的解构	按照 key 来配对赋值

例子

let [a, b, c] = { 1: 15, 2: "a", 3: [1, 2, 3] };
// VM191:1 Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)} is not iterable

var { 0: a, 1: b } = [12, 15];
a; // 12
b; // 15

其他数据类型的解构

其他数据类型在执行解构之前，会先转换成相应的对象，比如 123456 -> Number(123456), false ->Boolean(false) NaN -> NaN
回到目录