2021 年 11 月 1 日 • 阅读 5 分钟

JavaScript ES6 解构举例教程

JavaScript 解构是一种赋值语法表达，简洁且可读地“解构”数组的值或者对象的属性，解析为不同的变量。

JavaScript 解构表达式(例子)

;[a, b] = [50, 100]

console.log(a)
// expected output: 50

console.log(b)
// expected output: 100
;[a, b, ...rest] = [10, 20, 30, 40, 50]

console.log(rest)
// expected output: [30, 40, 50]

我们有很多种不同的方式使用 JavaScript 解构。

TLDR;

数组解构

数组解构是极为简单整洁的，在复制表达式的左侧使用数组字面量。数组字面量中的每个变量名称映射为解构数组的相同索引项。

基础变量赋值

const foo = ['one', 'two', 'three']

const [red, yellow, green] = foo
console.log(red) // "one"
console.log(yellow) // "two"
console.log(green) // "three"

声明分别赋值

你可以通过变量声明分别解构赋值。举例：首先，声明变量，然后分别赋值。

// 声明变量
let a, b
// 然后分别赋值
;[a, b] = [1, 2]
console.log(a) // 1
console.log(b) // 2

解构默认值

如果解构取出的值是 undefined，可以设置默认值：

let a, b
// 设置默认值
;[a = 5, b = 7] = [1]
console.log(a) // 1
console.log(b) // 7

在上面的例子中，我们给 a 和 b 设置了默认值。这种情况下，如果 a 或 b 的值是 undefined，它将赋值默认值 5 给 a 7 给 b

交换变量值

解构可以在一个解构表达式中交换两个变量值，是不是很酷？

let a = 1
let b = 3

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

如果你想不使用解构交换变量值，将必须提供一个缓存变量或者同解构一起使用 XOR swap algorithm。

我使用 JavaScript 解构

也可以阅读：JavaScript 中需要知道的所有关于交换两个变量值

解析函数返回的数组

是的，可以解构函数返回的数组。

function c() {
  return [10, 20]
}

let a, b
;[a, b] = c()
console.log(a) // 10
console.log(b) // 20

在上面的例子中，c() 的返回值 [10, 20] 可以在单独的一行代码中使用解构解析。

忽略返回值/跳过某项

你也可以跳过一些没有用的返回值。举例：

function c() {
  return [1, 2, 3]
}

const [a, , b] = c()
console.log(a) // 1
console.log(b) // 3

在罕见的情况下，你想忽略所有的值。

;[, ,] = c()

当然，我知晓这是不会发生的，但是作为一个教程我不得不告知你每一件事。

赋值数组剩余值给一个变量

当你使用数组解构，你可以赋值数组剩余部分给一个单独的变量。

const [a, ...b] = [1, 2, 3]
console.log(a) // 1
console.log(b) // [2, 3]

小心结尾的逗号语法错误，它将爆发如果在剩余元素的左侧使用结尾逗号：

const [a, ...b] = [1, 2, 3]
// SyntaxError: rest element may not have a trailing comma

嵌套数组解构

像对象一样，你也可以使用数组嵌套解构。这里有一个例子：

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)']

// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color

console.log(hex, red, green, blue) // #FF00FF 255 0 255

对象解构

基础对象解构

const x = { y: 22, z: true }
const { y, z } = x

console.log(y) // 22
console.log(z) // true

无声明解构

你可以使用解构分别从它的声明赋值变量。这意味着在上面的例子中不需要创建变量 x。

let y, z
;({ y, z } = { y: 1, z: 2 })

注意：圆括号 (...) 包裹赋值声明是必须的当使用对象字面量解构赋值无声明变量。

{a, b} = {a: 1, b: 2} 不是有效的独立语法，左侧的 {a, b} 被考虑为代码块而不是一个对象字面量。

因此，({a, b} = {a: 1, b: 2}) 是有效的, 等价于 var {a, b} = {a: 1, b: 2}。

(...) 表达式需要前置分号或者它可能用于在前一行执行函数。

引用自 MDN

赋值给新变量名

当使用对象解构时你也可以改变变量的名称，如下例子：

const o = { p: 22, q: true }
const { p: foo, q: bar } = o

console.log(foo) // 22
console.log(bar) // true

例子中，var {p: foo} = o 获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量。

解构默认值

如果解构取出的对象值是 undefined 你也可以设置默认值。

const { a = 10, b = 5 } = { a: 3 }

console.log(a) // 3
console.log(b) // 5

赋值给新变量名的同时提供默认值

const { a: aa = 10, b: bb = 5 } = { a: 3 }

console.log(aa) // 3
console.log(bb) // 5

嵌套对象和数组解构

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung',
    },
  ],
  url: '/en-US/docs/Tools/Scratchpad',
};

let {
  title: englishTitle, // 重命名
  translations: [
    {
      title: localeTitle, // 重命名
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

可计算对象属性名与解构

当使用解构改变对象属性的名称时，可以使用对象计算属性名。

const key = 'z'
const { [key]: foo } = { z: 'bar' }

console.log(foo) // "bar"

在上面的例子中，我们计算变量键值并改变它的名称为 foo。

同时使用数组和对象解构

在解构中数组和对象可以联合使用：

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
]

const [, , { name }] = props

console.log(name) // "FizzBuzz"

所有的解构赋值语法是相同的，是在赋值符号左侧声明从源变量取出的值。举例来说：

const x = [1, 2, 3, 4, 5]
const [y, z] = x
console.log(y) // 1
console.log(z) // 2

本文由吳文俊翻译，原文地址 javascript destructuring es6 the complete guide

标签： javascript es6