JS ES6中的解构 聊聊JS ES6中的解构

概述

es6新增了一种从数组或者对象中获取指定元素的方式，这种方式就是我们今天要说的解构。

先来说说数组的解构

在有解构之前呢，我们获取数组中的指定元素通常是根据索引去做的：

const arr = [1, 2, 3]; 
const a = arr[1];

有了解构之后呢，我们便可以使用如下方式快速的去获取数组中的某个元素：

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a);
console.log(b);
console.log(c);

这样打印出a, b, c的值分别是：

1

2

3

如果我们只想获取前两个元素呢，那么我们可以这样写：

const arr = [1, 2, 3];
const [a, b] = arr;

console.log(a);
console.log(b); 

我们也可以结合扩展运算符获取数组中指定的多个元素，比如：

const arr = [1, 2, 3];
const [a, ...brr] = arr;

console.log(a);
console.log(brr); 

这样brr就是除了1以外的其他元素组成的数组，打印出a, brr的值分别是：

1

[2, 3]

那如果我们只想获取数组中的某一个元素呢？比如我只想获取数组中的2，又该如何去写呢？

const arr = [1, 2, 3];
const [, a] = arr;
console.log(a);

以上我们通过一个逗号占位确保我们解构和数组本身的位置是一致的来获取到特定位置的某个元素。
可以看到，解构的出现方便了我们去获取数组指定位置的一个或多个元素。这也是他在代码中的一个重要的应用。

说完数组的解构，我们再来聊聊

对象的解构

与数组解构不同的是，对象的解构是根据属性名去匹配的，因为对象不像数组下标那样有顺序，因此它不能用下标去提取。
就比如我们定义一个对象obj，我们想获取他的name属性值就可以这样写：

const obj = {
    name: 'wudixiaodoujie',
    age : 18
};
const { name } = obj;
console.log(name);
wudixiaodoujie

const age = 0;
const { age: perAge } = obj;
console.log(perAge);
18

对象的解构应用还是比较广的，比如我们需要频繁的调用对象的某个属性或方法就可以通过解构将其赋值给一个变量，通过一个变量去调用可以在一定程度上减少代码量。