ES6中的变量的解构赋值， 解放我们的双手，实现变量的批量赋值

Posted 2022-05-19 「零一」

ES6——变量的解构赋值

• 引言
• 正文
• • 一、数组的解构赋值
  • • 解构失败
    • 不完全解构
    • 默认值
  • 二、对象的解构赋值
  • 三、字符串的解构赋值
• 结束语

引言

变量的解构赋值， 听起来很复杂， 简单点说可以理解成批量操作变量赋值，先有个印象， 下面慢慢来看

• 公众号：前端印象
• 不定时有送书活动，记得关注~
• 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

正文

变量的解构赋值一共分为以下几种：数组的解构赋值 、对象的解构赋值 、字符串的解构赋值 、

一、数组的解构赋值

先来看一下我们平时对很多个变量赋值是如何操作的：

let a = 1
let b = 2
let c = 3
let d = 4

那么我们看一下如何批量命名这些变量：

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

这就是一个简单的数组的变量解构赋值，即等号左边的变量与等号右边的相同位置的值一一对应进行赋值。

解构失败

有几种情况会解构失败：

• 等号左边的变量与等号右边没有对应上，则会被解析成undefined

let [a, b, c] = [1, 2]
a  // 1
b  // 2
c  // undefined

上述代码中的 c ， 与之匹配的是undefined，所以最后为undefined

• 等号右边是一个不可遍历的结构

let [a, b] = 1

这很明显就会直接报错， 解构失败， 因为等号两边都无法进行匹配

不完全解构

这个简单，直接看代码：

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

简单点说就是等号右边有很多值，但等号左边只有两个变量需要赋值， 这种叫做不完全解构， 不会报错。

默认值

在解构时，是允许给予一个默认值的， 如果该变量没有解构成功， 则会将默认值赋值给它， 例如：

let [a, b=2] = [1]
a  // 1
b  // 2

如果b没有赋值一个默认值 2 ， 则 b 应为 undefined ， 现在给了b 一个默认值 2 ， 则在b 解构失败时，将默认值2赋值了给它。

补充一下： 在给予变量默认值时， 只有当没有对应的值与之匹配时或者与之匹配的是 undefined 时， 才会将默认值赋值给自己， 但是如果与之匹配的是 null ， 则默认值不起作用， 最后会将 null 赋值给它， 看例子：

let [a=1, b=2, c=3] = [undefined, null]
a  // 1
b  // null
c  // 3

二、对象的解构赋值

对象的解构赋值可以很方便的取出对象里面的值， 先来看一下我们平时取出对象中的值，并赋值给一个变量是如何操作的吧：

let obj = name: 'jack', age: 18, gender: '男'
let name = obj.name
let age = obj.age
let 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的书。