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 中需要知道的所有关于交换两个变量值
解析函数返回的数组
是的，可以解构函数返回的数组。
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