JAVASCRIPT distructuring(解构) 详解

JS 解构

       JS结构是ES6的功能 是一种拆解方式，将数组或者对象拆解称为单独的变量。解构就是要分解复杂的数据结构转换为较小的数据结构例如变量等。

1）Array Distructuring(数组解构)

首先对于数组来说，我们使用解构来检索数组之中的元素，并简单的将他们存储到变量之中。

以一个示例（不使用解构）来说：

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

此段代码将arr数组之中三个数分别单独取出并分别赋值给a,b,c。

在JS之中我们不必如此繁琐，我们可以使用JS的解构来将此过程简化为：

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

此时，变量a=2，变量 b=3，变量c=4。在使用解构之后原始数组不会受到影响，此时arr仍为[2,3,4]。

再看以下情况：

const menu = ['鱼香肉丝'，'宫保鸡丁'，'泡椒风爪'，'麻辣兔头'];
const [first,second] = menu;

此时first与second变量的值应该是什么呢？显而易见他们是'鱼香肉丝'和'宫保鸡丁'，但是如果我们不想吃宫保鸡丁但是想吃泡椒凤爪呢？JS当然支持我们这样做，我们可以：

const [first, ,second] = menu;

此时，first对应的值为'鱼香肉丝'，second对应的值为'泡椒凤爪',在first与second之间的部分我们称之为hole，如果不想吃'泡椒凤爪'我们可以使用两个hole来将'泡椒凤爪'也跳过即：

const [first, , ,second] = menu;

此时second对应的值为'麻辣兔头' 。

我们还可以使用数组解构来实现交换值：

const temp = first;
first = second;
second = temp;

这是不使用数组解构时候的交换过程。

但是再JS之中我们可以：

[first, second] = [second, first]; 

通过数组解构我们甚至不用中间变量tmp。 

但是当我们有一个嵌套数组的时候呢？例如：

const nested = [1, 2, [5 ,6]];

这当然也可以使用解构，读者可以自行思考一下如何使用以下是使用解构来解构嵌套数组：

const [i, ,[j,k]];

此时i=1 j=5 而k=6。 

在开发过程中，我们也很有可能不知道数组的长度，在此时我们有改如何使用解构呢，JS允许我们设置默认值：

const arrDefault = [8, 9]
const [p,q,r] = arrDefault

此时r是undefined因为arrDefault数组之中并没有第三个元素，我们可以：

const [p = 1, q = 1, r = 1] = arrDefault;

当此时r的值为1，是我们设置的默认值。

2）Object Distructuring(对象解构)

首先我们创建一个对象基于此对象来具体解释对象的解构， 创建对象如下：

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  },
};

在进行数组解构时候我们使用“[ ]”来进行解构，但是在进行对象解构的时候我们使用“{ }”来进行，因为我们也使用此符号来创建对象。

先来看一个对象解构的例子：

const {name, openingHours, categories} = restaurant;

首先，再进对象解构的过程之中，我们必须使用此类之中的属性名来进行解构，且没有顺序。此行代码创建了三个新的变量来对应restaurant之中的相应属性。其中name的值与restaurant 之中的name相同，剩余两个变量也与restaurant之中的同名属性的值相同。

如果我们想让新建的变量的名称不同我们也可以：

const {name: restaurantName, openingHours: hours, categories: tags} = restaurant;

此时restaurant之中的属性被解构出来分别赋予了变量 restaurantName,hours,tags。

我们当然也可以在数组解构之中设置默认值：

const {menu = [], starterMenu: starters = []} = restaurant;

resturant之中并不存在menu属性，但是由于我们设置了默认值，所以menu的值此时为[ ]。

再来看一个例子：

let a = 1;
let b = 2;
const obj = {a: 10, b: 7, c: 14};
//当我们想让变量a,b的值变成数组里面a，b对应的值时
（{a, b} = obj）;

读者可能会问，为什么要加小括号呢，这是因为在JS之中如果一开始使用花括号则是一个代码块，而代码块不允许进行赋值操作，使用小括号可以避免此类错误。

有嵌套数组，当然也有嵌套对象，那么我们如何对嵌套对象进行解构呢？

我们在上面的过程之中已将restaurant之中的openingHours属性进行了解构，在restaurant之中此属性为一个对象所以我们可以：

const { fri } = openingHours;

读者仔细观察会发现，fri也是一个对象，当我们想要获得fri对象之中open和close时候我们就需要使用嵌套解构：

const { fri： {open, close} } = openingHours;

此时我们将fri之中的open属性的值赋值给了open变量，将close属性的值赋值给了close变量。

这就是JS之中的解构。

                                                                                                                                            本文结束