深入浅出ES6中的解构

前言:解构是ES6的新特性，用于从JavaScript对象和数组中提取数据，语法上比ES5所提供的更加简洁、紧凑、清晰。今天我们来看看解构：

---

一.解构

1.什么是解构?

---

专业的翻译:解构就是对某种事物的结构进行剖析

解构:对于我们的现有的对象或者数组进行拆分,从而进行提取我们想要的数据。

2.为什么要是用解构?

---

在谈论这个问题之前我们先来看一个例子:

假如说我们需要在数组中去拿某几个值,我们普通的做法是

 var arr = [1, 2, 3, 4, 5]; //假如说我们需要3,5
       console.log(arr[2]); //3
       console.log(arr[4]); //5

很明显根据索引来进行取值的,但是在ES6中我们可以:

   var arr = [1, 2, 3];
        let [a, b, c] = arr;
       // a=1  b=2  c=3

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

---

二.基本用法

1.变量赋值

---

在以前我们为变量赋值为每一项都进行声明然后进行赋值操作:

 var a = 1;
 var b = 2;
 var c = 3;

在ES6中我们可以:

var [a, b, c] = [1, 2, 3]
//a=1  b=2  c=3

2.数组解构

---

1.把数组中所有的数值赋给一个个单独的变量

//设置数组
var arr = [1, 2, 3];
// 把数组解构赋值给变量。数组模式位于赋值运算符 `=` 的左侧，被结构的数组在其右侧。
let [a, b, c] = arr;
      // a=1  b=2  c=3

2.提取除了第一个数值意外的后两位数值

//设置数组
var arr = [1, 2, 3];
// 把数组解构赋值给变量。数组模式位于赋值运算符 `=` 的左侧，被结构的数组在其右侧。
let [, b, c] = arr;
      //   b=2  c=3

3. 提取除了中间的值以外的其他值

//设置数组
var arr = [1, 2, 3];
// 把数组解构赋值给变量。数组模式位于赋值运算符 `=` 的左侧，被结构的数组在其右侧。
let [a, , c] = arr;
      //a=1    c=3

4. 提取除了最后一位的其他数值

//设置数组
var arr = [1, 2, 3];
// 把数组解构赋值给变量。数组模式位于赋值运算符 `=` 的左侧，被结构的数组在其右侧。
let [a, b, ] = arr;
      //a=1   b=2  

5.嵌套数组

---

当然这种匹配模式也支持数组嵌套,只要保证赋值运算符 = 左侧的数组模式与右侧的数组结构相匹配即可,=左边的变量都会被赋上=右边相对应位置的数值。

---

1.从嵌套数组中提取数值:

---

//设置数组
  var arr = [
            [1, 2, 3],
            [4, 5, 6]
        ];
        let [
            [a1,a2,a3],
            [b1,b2,b3]
        ] = arr;
        // a1=1  a2=2  a3=3  b1=4  b2=5  b3=6

2.从深层嵌套数组中提取某一个值

---

//设置数组
 var arr = [
            "hello world", [1, 2, 3, ['first']],
            [4, 5, 6]
        ];
 //第一个 , 跳过了"hello world"
 //第二个 , 跳过了1,同理下面的逗号分别跳过了2,3,4,6
        let [, [, , , [a]],
            [, b, ]
        ] = arr;
//所以输出的值为:
//a=first   b=5

3.使用rest运算符提取剩余的参数

---

• 运用'剩余参数'来进行拿取剩余值,也就是所谓的'rest'运算符,那什么是’rest’运算符呢?我们大致了解一下:
• 剩余运算符（the rest operator），它的样子看起来和展开操作符一样，但是它是用于解构数组和对象。在某种程度上，剩余元素和展开元素相反，展开元素会“展开”数组变成多个元素，剩余元素会收集多个元素和“压缩”成一个单一的元素。也就是...这种书写。
  
  其就类似于吸星大法一样来j将剩余的参数进行收集在一起;
  
  一般的rest运算符结合解构来进行使用:

//设置数组
var arr = [1, 2, 3, 4, 5, 6];
let [a, b, ...c] = arr;
//那么...c就接收了剩余的参数
//a=1  b=2  ...c=4,5,6

3.对象解构

---

感觉对象解构是比较神奇的,因为当我们需要从一个复杂的、深层嵌套的对象中取值时，其作用更加明显。

但是对象解构与数组解构是相同的匹配规则的,也就是(在=左边创建一个对象模式,使得变量位置与 = 右侧对象的值位置相匹配)。

在对象解构中，你需要指明那些需要被提取值的属性名称，以及将要被赋值的变量名。跟数组解构一样，我们需要先在=左边创建一个和对象模式相同的映射。

1.简单的对象解构

提取对象的属性值赋给变量

//设置对象
var fun = {
            name: '张三',
            age: 20
        }
        //进行解构
        let {
            name:a,
            age:b
        } = fun;
        //输出结果如下
// a='张三'  b=20

2.嵌套对象的解构

其实嵌套对象的解构和嵌套数组的解构是一样的道理,那么我们来个简单的实例来看看:

//设置对象
var fun = {
      name: '张三',
      age: 20,
      fun2: {
          sex: '男'
      }
  }
  //进行解构
  let {
      name: a,
      age: b,
      fun2: {
          sex: c
      }
  } = fun;
  //输出
// a='张三'  b=20  c='男'

三.语法优化

---

在上文对于对象解构的时候我们看到了那些我们的命名a,b,c显得毫无意义,而且看起来也不是很美观,那么我们可以采用更简洁的语法来进行对于我们对象的解构:

---

1.简洁语法

---

var fun = {
   name: '张三',
   age: 20,
   fun2: {
       sex: '男'
   }
}
let {
   name,
   age,
   fun2: {
       sex
   }
} = fun;
  //输出
// name='张三'  age=20  sex='男'

那么提取深层属性就比上面的简介多了,假如说我们需要{fun2:{sex}},那么我们可以:

let {fun2:{sex}}=fun;
//输出
//sex:男

这样看起来瞬间界面美观了许多,当然要是感觉这样写法不能理解的小伙伴就采用变量赋值来进行书写吧。

四.注意

---

那么前面讲了那么多我们来看看在解构时候需要注意什么吧。

1.在解构时候不推荐使用var来进行，因为var声明的是全局变量,防止造成歧义;

2. 解构时候变量名不能重复,不能对已经声明的变量名进行解构,否则会Error,也就是说只有在进行解构时候才可以进行声明变量;

3. 当然如果非得要对已经声明的变量进行解构,那么我们可以采用圆括号()把整个解构赋值括起来,那么也可以达到我们想要的效果;

4. 在对数组进行解构的时候会发现我们使用的是小括号[],因为数组是根据索引来进行取值的,所以我们就相当于在用索引来对其进行值的提取;

5.在对对象进行解构的时候我们采用的是花括号{},因为在对象中我们使用的是键值对(key:value)来进行取值的,所以我们给出了相对应的键(key),那么我们就会拿到相对应的值(value);

---

总结:本文介绍了解构的使用方法以及规则,在以后的使用中我们会发现解构会大大减少我们的代码量,也会提高我们的编程效率。

---