ES 6 系列 - 3. 变量的解构赋值

[hzzzzzzzq]

变量的解构赋值

解构赋值：ES6 允许按照一定模式，从数组、字符串和对象中提取值，对变量进行赋值

我们来看一下以前赋值的方式

let a = 1;
let b = 2;

那么现在我们来初步了解一下解构赋值

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

上面两段代码的赋值结果是相同的。

---

数组的解构赋值

基本使用

我们来看看数组的解构赋值，在上面中，我们使用了数组的解构赋值，来举例子。

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

这样操作之后，就可以从数组中提取到相应的值，按照对应位置，对变量赋值。

本质上，也就是模式的匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

我们来多举例

// 例子1
let [a, [b], [c]] = [1, [2], [3]]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

从 例子1 中可以看出，这是一种嵌套数组取值方式，可以看出，数组的解构赋值，可以进行嵌套取值。

// 例子2
let [ , a] = [1, 2]
console.log(a) // 2

从 例子2 来看，就证明了数组赋值解构说的这句话，按照对应的值，对变量进行赋值，而不是每次都从第一个开始取。

// 例子3
let [a, ...arr] = [1, 2, 3, 4]
console.log(a) // 1
console.log(arr) // [2, 3, 4];

从 例子3 来看，我们也可以用 扩展运算符 这里需要一个扩展运算符的项目，来同时将后面的值放到一个数组中。

// 例子4
let [a, b, ...arr] = [1];
console.log(a) // 1
console.log(b) // undefined
console.log(arr) // []

从 例子4 来看，我们能发现，如果在右侧找不到值时，就是解构不成功，这时候如果是单变量，则会等于 undefined，如果是使用了 扩展运算符 的变量，则是空数组。

默认值

接下来，我们来看一下解构赋值中指定默认值

// 例子5
let [a = 10] = []
console.log(a) // 10

在上面的 例子5 中，可以看到，a 对应的右侧是解构失败的，值应该为 undefined，但是输出是 10，这就是因为解构赋值中允许指定默认值

但是默认值是有生效条件的：只有当一个数组成员严格等于 undefined 时，默认值才会生效。

ES6 中的严格相等运算符( === )，可以判断一个位置是否有值。

// 例子6
let [a = 1, b = 2, c = 3] = [10, null, undefined];
console.log(a) // 10
console.log(b) // null
console.log(c) // 3

在 例子6 中，就可以看出只有当右侧的值严格相等于 undefined 时，默认值才会生效。

---

对象的解构赋值

解构赋值并不只是在数组中，在对象中也可以。

基本使用

// 例子7
let { a, b } = { a: 'aaa', b: 'bbb' }
console.log(a) // 'aaa'
console.log(b) // 'bbb'

从 例子7 中，我们可以看出对象的解构赋值与数组的解构赋值的一个重要的不同点。数组元素是按照对应的下标次序来排列的，但是在对象中，变量必须与属性同名，才可以取到正确的值

// 例子8
let { b, c } = { a: 'aaa', b: 'bbb'}
console.log(b) // 'bbb'
console.log(c) // undefined

从 例子8 中，我们可以看到，对象的解构赋值，变量必须与属性同名，且并不是按照次序来对应的。同数组，解构失败时，变量的值等于 undefined。

// 例子9
let { a: { b } } = { a: { b: 20 } }
console.log(b) // 20

// 例子10
let { a } = { a: { b: 20 } }

从 例子9 中，我们可以看到，对象的解构赋值，也是同数组一样，可以进行嵌套取值。

注意：在这里 例子9 中左侧的 a 是模式，不是变量，因此不会被赋值，如果想要 a 也被赋值，可以使用 例子10 的写法

默认值

我们在数组解构赋值中，可以使用默认值，那么在对象中，是不是也有呢？

// 例子11
let { a = 1 } = {}
console.log(a) // 1

// 例子12
let { a, b = 2 } = { a: 1 }
console.log(a) // 1
console.log(b) // 2

// 例子13
let { a: b = 1} = {}
console.log(b) // 1

从 例子11、例子12、例子13，可以看出，其实对象的默认值与数组的默认值是类似的。

---

字符串的解构赋值

字符串也是可以进行解构赋值的，其实就是相当于将字符串转化成一个类似数组的对象。

// 例子14
let [a, b, c, d, e] = 'hello'
console.log(a) // 'h'
console.log(b) // 'e'
console.log(c) // 'l'
console.log(d) // 'l'
console.log(e) // 'o'

从 例子14 来看，就可以明白了，数组的解构赋值相当于被转化成一个类数组的对象进行解构赋值。

---

函数参数的解构赋值

函数的参数也是可以使用解构赋值

// 例子15
function add([a, b]) {
    return a + b;
}
console.log(add([1, 2])) // 3

从 例子15 可以看出，函数的参数是可以进行解构赋值的，既然数组可以，那么对象也可以，字符串也是。

---