es6新特性之解构赋值（结构被解开赋值）

2020-09-12 本文已影响0人似朝朝我心

解构赋值其实就是如何优雅地取值罢了。

（1）对象原型：

使用了解构赋值后（对比原型），可以做到优雅地取值。
game是一个对象，用了结构赋值后，等号两边要一致，也就是说等号右边是个game对象,那么等号左边也应该是个对象。

大括号里面可以写game对象对应的属性。

完整代码：

效果是一致的。

（2）数组原型。

开始结构赋值
首先我们得明确等号两边数据类型保持一致。
等号右边是当前数组games，是数组类。那么等号左边也应该是数组[ ]

games数组里面有3个值，我们用a,b,c接收。

完整代码：（对比原型来看）

取值方式更加优雅，一行代码搞定。

（3）对象嵌套，对象作为一个属性的存在。
原型：

我结构赋值想取game对象嵌套下的giftPacks对象里面的属性呢？

（4）在嵌套对象中各自拥有的属性却巧合重名会怎么样？
原型：

很显然，const关键字不允许重名的存在。
方法一，将其中一个name属性改掉，改成name1。

方法二：重名属性可以添加别名（小名）区别开来，比如我们这里有2个同名的name属性，肯定要区分一个。

方法一和方法二效果是一致的。

如何在项目中做到准确地结构赋值？

场景1：在函数当中，数组作为实参，进行传参时，遍历数组做累加运算。

原型：
我们实参是个数组，传参也仅有一个参数arr，一个参数的话，所以是可以省掉小括号的。

整体：

那么实参是个数组的函数又怎么解构赋值呢?

那么这一块是怎么演变过来的。

image.png

实参作为对象传入函数。

原型：
在原型上改造，将对象最为实参传入。

在对象里面填入属性。

没有实参，直接定义形参。

有了实参后，直接覆盖掉形参。

作为函数返回值使用解构赋值

作为变量交换而使用解构赋值

JSON格式输出
JSON(JavaScript Object Notation, JS 对象简谱)

作为json格式使用解构赋值

模拟ajax请求数据，向后端发送请求。
目录下创建一个json文件，

json文件里面首先有一对大括号

内容输入：

vue库下的axios请求，我们用它的CDN.

网址：https://www.bootcdn.cn/axios/
axios的CDN远程地址：https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js
在index.html中导入这个CDN：

这个库的使用方法：

关于.then()的解释：axios返回的是一个promise，promise需要使用then方法来获取到返回成功的值，所以这里的then可以理解为是当这个文件获取成功之后所返回的内容。
已经(get到了)请求到刚刚我们在data.json中编写的数据

waring:这里有个小bug，就是axios发送的是http请求，我们在VSC编辑器安装了Live Server (实时加载路径)插件才能请求到json数据。

，如果是在文件夹下双击直接打开，是无法请求到的，因为它是file路径。

用箭头函数进一步优化代码，去掉关键字，一个参数不要小括号。

那么我们将如何取值使用，让我们一起来解构赋值吧。

上面是data数据是一步到位的。