es6解构赋值

es6解构赋值

ES6 提供了一个称为破坏赋值的新特性，它允许我们从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

数组结构

创建一个数组保存分数

let scores = [70, 80, 90];

要获得个人分数，我们需要这样做

let x = scores[0], 
let y = scores[1], 
let z = scores[2];

在 ES6 之前，没有直接的方法可以将返回数组的元素分配给多个变量，例如 x、y 和 z。

幸运的是，从 ES6 开始，我们可以使用如下的解构赋值：

let [x, y, z] = scores;

console.log(x); // 70
console.log(y); // 80
console.log(z); // 90

如果只想取两个值，可以丢弃剩余的元素或使用 rest 语法 (…) 将数组的所有剩余元素放入一个新数组中。

// 丢弃一个元素
let [x, y] = scores;
// 把剩余元素放入一个新数组中
let [x, y, ...args] = scores;

对象解构赋值

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

对象的解构也可以指定默认值

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、let 或 const）开始。然后，每个单独的属性必须绑定到一个变量或进一步解构。

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;

所有变量共享相同的声明，因此，如果你希望某些变量可重新分配，而其他变量是只读的，则可能需要解构两次。一次使用 let，一次使用 const。

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a 是一个常量
let { b: { c: d } } = obj; // d 被重新赋值