ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
下面为大家介绍一些常用的解构赋值操作。
# 1. 变量交换
ES6 之前我们变量交换的方式可能如下：
var a = 1; | |
var b = 2; | |
var temp; | |
temp = a; | |
a = b; | |
b = temp; |
在上述例子中 temp 其实是一个临时变量用来存储 a 的值，最后我们把 temp 的值赋值给 b 。
使用解构运算则非常简单：
let a = 1; | |
let b = 2; | |
[a, b] = [b, a]; | |
console.log(a); // 2 | |
console.log(b); // 1 |
上例子中， [a, b] = [b, a] 是一个解构赋值。等号左侧是一个由 b、a 创建的数组 [2, 1] ，数组对对应的值被解构给了等号右边 [a, b] 。
# 2. 访问数组
当我们有需求访问数组中任意元素时，但是如果数组为空，需要返回一个默认值时，ES6 之前可能会如下方式操作：
var list = []; | |
let a = 1; | |
if (list.length > 0) { | |
a = list[0] | |
} | |
console.log(a); // 1 |
使用数组解构可以大大简化我们的操作
const list = []; | |
const [a = 1] = list; | |
console.log(a); // 1 |
上述例子中，我们在使用解构时给 a 一个默认值，如果数组 list 第一个值不为空则将其中第一个值赋值给 a ，如果为空值 a 为我们设置的默认值。
我们也可以用如下方法访问其他数组元素：
const list = []; | |
const [, b = 2] = list; | |
console.log(b); // 2 |
# 3. 扩展运算符
扩展运算符是三个点 ... 。
- 数组的扩展
const list = [1, 2, 3, 4]; | |
const [a, ...b] = list; | |
console.log(a); // 1 | |
console.log(b); // [2, 3, 4] |
上述例子中， [a, ...b] = list 创建了一个新的数组 b，数组 b 中包含了除了第一个元素外的所以元素。
- 对象的扩展
const obj = { | |
a: 1, | |
b: 2 | |
} | |
const {a, ...d} = obj; | |
console.log(a); // 1 | |
console.log(d); // {b: 2} |
上面就是要介绍的一些 javascript 中解构的小技巧了，如果你对这方面内容感兴趣的话，可以多查阅官方文档了解哦。
