ES 6 系列二：变量的解构赋值

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 进行学习，及时获取最新文章。

"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