12. 解构赋值

可以将 数组，对象，字符串 “拆包” 至一系列变量中，被称为解构（Destructuring）ES6

数组

按照位置进行解构

// 1.一般解构
let [a, b, c] = [1, 2, 3]
a // 1
b // 2
c // 3
 
 
// 2.嵌套解构
let [a, [[b], c]] = [1, [[2], 3]]
a // 1
b // 2
c // 3
 
 
// 3.部分解构
let [a, , b] = [1, 2, 3]
a // 1
b // 3
 
 
// 4.Rest参数
let [head, ...tail] = [1, 2, 3, 4]
head // 1
tail // [2, 3, 4]
 
 
// 5.解构Set（for...of 的语法糖）
let [a, b, c] = new Set([1, 2, 3])
a // 1
b // 2
c // 3

对象

按照属性名进行解构

// 1.一般解构
let { a, b } = { a: 1, b: 2 }
a // 1
b // 2
 
 
// 2.重命名（取对象中的哪个属性的值: 赋值给新变量）
let { a: newName } = { a: 1, b: 2 }
newName // 1
 
 
// 3.Rest参数
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
 
 
// 4.嵌套解构
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
 
let { p, p: [x, { y }] } = obj; // 第二个 p 是模式
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

字符串

let [a, b, c, d, e] = 'hello'
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
 
let { length : len } = 'hello'
len // 5

默认值

当右边的值 严格等于（===） undefined 时，默认值才会生效

let [a = true] = [];
a // true
 
let [a = true] = [null]
a // null
 
// 默认值可以引用解构赋值的其他变量，但该变量必须已经声明
let [x = 1, y = x] = [] // x=1; y=1
 
let { a = 1 } = {};
a // 1
 
let { x: y = 1 } = {};
y // 1

如果默认值是表达式，则是惰性求值的（只有右边是 undefined 才会进行求值）

---

Note

主要用途

• 同时从某个数组或对象中取多个值
• 交换变量的值：[a, b] = [b, a]
• for...of 循环中的循环变量：for (let [key, value] of map)
• 函数定义时的参数
• catch 绑定变量

Warning

• 解构赋值是浅拷贝
• 剩余参数的解构赋值只能作为最后一个
• 如果解构不成功，变量的值就等于 undefined
• 对已声明的变量进行解构，则需要注意加括号：({x} = {x: 1})，不然 JS 引擎会将 {x} 理解为一个代码块产生语法错误