ES6 系列二： 变量的解构赋值

"Code tailor"，为前端开发者提供技术相关资讯以及系列基础文章，微信关注“小和山的菜鸟们”公众号，及时获取最新文章。

前言

在开始学习之前，我们想要告诉您的是，本文章是对阮一峰《ECMAScript6 入门》一书中 "变量的解构赋值" 章节的总结，如果您已掌握下面知识事项，则可跳过此环节直接进入题目练习

• 什么是解构赋值？
• 数组、对象、字符串的解构赋值
• 数值、布尔值、函数参数的解构赋值

如果您对某些部分有些遗忘，👇🏻 已经为您准备好了！

学习链接

变量的解构赋值的学习

汇总总结

解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性（值）从对象（数组）中取出,赋值给其他变量。

数组的解构赋值

• 基本用法

// ES5，为变量赋值，只能直接指定值
let a = 1
let b = 2
let c = 3

//ES6，允许这样
let [a, b, c] = [1, 2, 3] //表示可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

• 若解构不成功，变量的值就等于 undefined

let [foo] = []
let [bar, foo] = [1]

• 不完全解构（等号左边的模式，只匹配一部分的等号右边的数组）

let [x, y] = [1, 2, 3]
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4]
a // 1
b // 2
d // 4

• 如果等号的右边不是数组（或严格地说，不是可遍历的结构），那么将会报错。

// 报错
let [foo] = 1
let [foo] = false
let [foo] = NaN
let [foo] = undefined
let [foo] = null
let [foo] = {}

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

对象的解构赋值

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

• 基本用法

let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' }
baz // undefined

等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于 undefined。

• 如果解构失败，变量的值等于 undefined。

let { foo } = { bar: 'baz' }
foo // undefined

• 与数组一样，解构也可以用于嵌套解构的对象

let obj = {
  p: ['Hello', { y: 'World' }],
}

let {
  p: [x, { y }],
} = obj
x // "Hello"
y // "World"

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello'
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个 length 属性，因此还可以对这个属性解构赋值。

let { length: len } = 'hello'
len // 5

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let { toString: s } = 123
s === Number.prototype.toString // true

let { toString: s } = true
s === Boolean.prototype.toString // true

函数参数的解构赋值

• 函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y

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, 0]
move({}) // [0, 0]
move() // [0, 0]

题目自测

一：以下代码输出结果为（）

let obj = { a: 1, b: 2, c: { d: { e: 5 } } }
let {
  a,
  b,
  c: { d },
} = obj
console.log(d) // ?

Answer: {e: 5}

对象通过解构赋值展开，这里用到了对象解构赋值的多层嵌套 所以 c 对应的解构是 obj 对象中的 {d: {e: 5}} ，而 c 对象中包含的 d 对应的解构就应该是 obj 中 c 里面的 d，所以是{e: 5}.

---

二：以下程序解构赋值后各个变量的值为 ( )

const [a, b, c, d, e] = [1, 2, 'a', 'c']

Answer：

console.log(a) //1
console.log(b) //2
console.log(c) //'a'
console.log(d) //'c'
console.log(e) //undefined

• 解析 根据数组的解构原则，左右一一对应，当左边个数大于右侧时，赋值 undefined

---

三：以下代码的输出结果为（）

function drawES2015Chart({ size = 'big', cords = { x: 0, y: 0 }, radius = 25 } = {}) {
  console.log(size, cords, radius)
}

drawES2015Chart()
drawES2015Chart({ size: 'small', cords: { a: 1 }, radius: { b: 1 } })

Answer：

'big',{x:0, y:0},25

‘small', {a: 1}, {b:1}

drawES2015Chart() : drawES2015Chart() 中没有传入参数，所以使用的是函数中的默认值 size的默认值是 'big' ，cords的默认值是{x:0, y:0}，radius 的默认值是 25 drawES2015Chart({size: 'small', cords: {a: 1}, radius: {b: 1}}): drawES2015Chart({size: 'small', cords: {a: 1}, radius: {b: 1}}) 中传入了值，所以不使用默认值，size 的值被 'small' 替代，cords 的值变成 {a: 1} ，radius 的值变成 {b: 1}