本文共 1691 字，大约阅读时间需要 5 分钟。

ES6 解构赋值详解

ES6 全称为 ECMAScript 6。

ES6 是 JavaScript 的一项重大进化，作为 JavaScript 的国际化标准，其规格定义了 JavaScript 的未来发展方向，而 JavaScript 是 ES6 的实现者。

什么是解构赋值？

解构赋值（Destructuring）是 ES6 引入的一项新特性。

解构赋值的分类与写法

解构赋值主要分为以下几种形式：

1. 对数组的解构赋值

• 标准写法

  var [a, b, c] = [1, 2, 3]; // a=1, b=2, c=3

• 嵌套数组写法

  var [a, [b, c]] = [1, [2, 3]]; // a=1, b=2, c=3

• 含定义数组写法

  var [a, ...b] = [1, 2, 3, 4]; // a=1, b=[2, 3, 4]

• 不完全解构写法

  var [x, y] = [1, 2, 3]; // x=1, y=2

• 解构失败写法示例

  var [x] = []; // x=undefinedvar [a, b] = [1]; // a=1, b=undefined

2. 对对象的解构赋值

对象的解构赋值允许我们提取对象中的特定属性。

• 标准写法

  let { id: a, val: b } = { id: "ko33", val: 2 }; // a="ko33", b=2

• 简化写法

  let { id, val } = { id: "ko33", val: 2 }; // id="ko33", val=2

• 注意事项
  • 对象的属性名与变量名无需一致，可以通过冒号指定。
  • 变量声明必须在解构之前完成，否则会抛出语法错误。

3. 对字符串的解构赋值

字符串可以被视为字符数组，支持解构赋值。

• 标准写法

  const [a, b, c, d] = "eggs"; // a="e", b="g", c="g", d="s"

• 提取字符串长度

  let { length: len } = "eggs"; // len=4

4. 对数值和布尔值的解构赋值

• 数值和布尔值的解构赋值

  let { toString: s } = 123; // s="123"let { toString: s } = true; // s="true"

5. 对函数参数的解构赋值

函数参数的解构赋值支持默认值，非常适合处理多个返回值的情况。

• 默认值的使用

  var [x = 1, y = x] = [1, 2]; // x=1, y=2

• 函数参数的解构示例

  function add([x, y]) { return x + y; }  add([1, 2]); // 返回 3

• 更复杂的函数参数解构

  function move({ x = 0, y = 0 } = {}) { return [x, y]; }  move({ x: 3, y: 8 }); // 返回 [3, 8]  move({ x: 3 }); // 返回 [3, undefined]

解构赋值的应用场景

[a, b] = [b, a]; // 交换 a 和 b 的值

2. 函数返回多个值

function test() { return [1, 2, 3]; }  let [a, b, c] = test(); // a=1, b=2, c=3

3. 提取 JSON 数据

var jsonData = { id: 23, status: "alright", data: [596, 69] };  let { id: userId, status, data: userData } = jsonData; // userId=23, status= "alright", userData=[596, 69]

参考文献

• 《ES6 标准入门》（第 2 版）—— 阮一峰