现代 JS 讲座：解构赋值

Source: Dev.to

本文最初发布在 bmf-tech.com。
本文转载自 Innovator Japan Engineers’ Blog。

什么是解构赋值

解构赋值是一种表达式，用于从数组或对象中提取数据并将其分配给单独的变量。下面是一些实用示例。

数组解构

let a, b, c;
[a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

let color = [1, 2, 3];
const [red, green, yellow] = color;
console.log(red, green, yellow); // 1 2 3

默认值

const [red = 4, green = 5, yellow = 6] = [1, 2]; // yellow 为 undefined
console.log(red, green, yellow); // 1 2 6

对象解构

({ a, b } = { a: 'foo', b: 'bar' }); // 将 'foo' 赋给 a，'bar' 赋给 b
console.log(a, b); // foo bar

在没有声明的情况下使用对象字面量解构时，需要在外层加上圆括号，因为单独的 {a, b} 会被解析为块语句。详情请参阅 MDN 文章：Destructuring Assignment - JavaScript | MDN。

常见用法（例如 React）

let state = { value: 'foo' };
const { value } = state; // 将 state.value 提取到变量 `value` 中
console.log(value); // foo

直接对象字面量示例

const { value } = { value: 'foo' };
console.log(value); // foo

默认值

const { foo = 3, bar = 4 } = { foo: 1 }; // `bar` 为 undefined
console.log(foo, bar); // 1 4

重命名变量

const { value: value2 } = { value: 'foo' }; // 将 `value` 提取并赋给 `value2`
console.log(value2); // foo

结论

我们通过简洁的代码示例介绍了 JavaScript 的解构赋值。只要实际使用一次，这种语法就非常直观，并且在现代 JavaScript 开发中被广泛使用。

参考链接

• MDN - 解构赋值