变量的解构赋值一共分为以下几种:数组的解构赋值 、对象的解构赋值 、字符串的解构赋值
数组的解构赋值
先来看一下我们平时对很多个变量赋值是如何操作的
let a = 1let b = 2let c = 3let d = 4
那么我们看一下如何批量命名这些变量
let [a, b, c, d] = [1, 2, 3, 4]a // 1b // 2c // 3d // 4
这就是一个简单的数组的变量解构赋值,即等号左边的变量与等号右边的相同位置的值一一对应进行赋值。
但是有些情况下,会造成解构失败,例如:
(1)当等号左边的变量与右边没有对应上时,没对应上的变量则会被赋值 undefined
let [a, b, c] = [1, 2]a // 1b // 2c // undefined
(2)等号右边是一个不可遍历的结构
let [a, b] = 1
这很明显就会直接报错, 解构失败, 因为等号两边都无法进行匹配
其实,数组解构赋值还可以给予变量默认值,若等号右边没有值赋值给等号左边的变量时,则那个变量会将默认值作为自身的值,例如
let [a, b, c = 9] = [1, 2]a // 1b // 2c // 9
若没有给予变量c一个默认值,则会出现解构失败的现象
还有一种情况,会出现不完全解构的情况,我们直接来看代码
let [a, b] = [1, 2, 3]a // 1b // 2
简单点说就是假设等号右边有三个值,但等号左边只有两个变量需要赋值, 小于右边的值的个数,这种叫做不完全解构, 但是不会报错。
就像例子中的 1 赋值给了变量 a ,2 赋值给了 b ,但是 3 就没有赋值给任何的变量
对象的解构赋值
对象的解构赋值可以很方便的取出对象里面的值, 先来看一下我们平时取出对象中的值,并赋值给一个变量是如何操作的吧
let obj = {name: 'jack', age: 18, gender: '男'}let name = obj.namelet age = obj.agelet gender = obj.gender
有没有觉得很麻烦?因为要命名一个个变量,并对齐进行赋值,我们来看一下对象的解构赋值是如何帮我们简化操作的
let {name, gender, age} = {name: 'jack', age: 18, gender: '男'}
就只需要一行代码就可以将对象中的三个值都取出来并赋值给三个变量。但是,我们在使用对象的解构赋值的时候必须要注意,等号左边的顺序是随意的, 系统会根据你的变量名, 优先去对象中寻找与你对象名相同的键, 将它的值赋值给这个变量。
这么一说, 我们的变量名就必须要跟对象中的键名一样了吗?并不是,其实我们可以自己再起一个名字,例如:
let {n: name, g: gender, a: age} = {name: 'jack', age: 18, gender: '男'}
这样就可以做到自己给变量起名字了, 并且这样做有一个好处, 就是可以避免与前面的代码中的变量名重合了。
当然,对象的解构赋值也是可以给一个默认值的, 用法跟数组的解构赋值一样,这里就不多做解释了, 感兴趣的可以尝试一下。
字符串的解构赋值
其实字符串的解构,就相当于遍历这个字符串,然后放到一个数组中, 赋值给等号左边的变量
let [a, b, c, d] = 'word'a // "w"b // "o"c // "r"d // "d"
结束语
好了, 关于变量解构赋值的知识就将这么多,其实还有一些相关知识,例如数值和布尔值的解构赋值、函数参数的解构赋值等, 但我觉得都不常用,所以就没给大家细讲,如果感兴趣可以去查阅ES6的书。