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

ES6——变量的解构赋值

• 引言
• 正文
• 1、数组的解构赋值
• 解构失败
• 不彻底解构
• 默认值
• 2、对象的解构赋值
• 3、字符串的解构赋值
• 结束语

引言

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

正文

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

1、数组的解构赋值

先来看一下咱们平时对不少个变量赋值是如何操做的：

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

2、对象的解构赋值

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

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: '男'}

这样就能够作到本身给变量起名字了， 而且这样作有一个好处， 就是能够避免与前面的代码中的变量名重合了。

固然，对象的解构赋值也是能够给一个默认值的， 用法跟数组的解构赋值同样，这里就很少作解释了， 感兴趣的能够尝试一下。

3、字符串的解构赋值

这个也很是简单，直接看例子吧：

let [a, b, c, d] = 'word'
a // "w"
b // "o"
c // "r"
d // "d"

其实字符串的解构，就至关于遍历这个字符串，而后放到一个数组中， 赋值给等号左边的变量

结束语

好了， 关于变量解构赋值的知识就将这么多，其实还有一些相关知识，例如数值和布尔值的解构赋值、函数参数的解构赋值等， 但我以为都不经常使用，因此就没给你们细讲，若是感兴趣能够去查阅ES6的书。