"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}
