前端开发：JS的解构

前言

在前端开发过程中，关于数据处理是一个非常重要的操作，尤其是遇到一些复杂的业务场景情况，涉及到数据的处理也是非常麻烦的事情。从后台拿到的数据源，处理成前端需要的格式或者形式，这就需要前端开发者做中转的一系列逻辑处理，甚至涉及到算法处理，所以不要单纯的觉得数据处理就是从后台拿数据然后展示渲染处理即可，其实远不止这些，尤其是在ES6之后，新增了一种从数组或者对象中获取指定元素的方式，也就是本篇博文所要介绍的内容：解构。解构可以很好的解决在后台返回的数据复杂且多的时候引起的问题，而且使用结构可以减少不必要的代码量，是一个非常方便的操作，总结一下，方便以后查阅使用。

解构是什么？

解构，其实就是按照一定的模式或者规则，在数组和对象中提取值，并且对变量进行赋值的操作。

概述

解构赋值其实就是对赋值运算符的扩展，它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值的操作。且在代码书写方面上简洁和易读，语义更清晰明了，也方便在复杂数据中对数据字段的获取。

定义

从数据量很大的数组或者对象中提取出来具体的想要的值的操作。

解构模型

在解构中，主要涉及到下面两部分：

1、解构的目标，解构赋值表达式的左边内容部分；

2、解构的源头，解构赋值表达式的右边内容部分。

数组（Array）模型的解构

1、使用对比

首先来看一下没有使用解构的赋值方式，如下所示：