ES6解构和rest的妙用

木有名字就是最好的名字

已于 2022-07-27 22:23:24 修改

阅读量453

点赞数

文章标签： es6 javascript 前端

于 2022-07-27 22:01:22 首次发布

本文链接：https://blog.csdn.net/weixin_45143856/article/details/126023724

版权

本文介绍了JavaScript ES6中的解构赋值和扩展运算符的使用，特别是如何通过它们的结合来优雅地处理和归类从后端获取的数据。作者通过实例展示了如何利用解构和扩展运算符将属性分组，减少了代码量，并提高了代码的可读性。

摘要由CSDN通过智能技术生成

在javascript，es6的特性中解构和扩展运算符/rest（...）都不陌生，在开发中可以让我们少些很多不必要的代码，运用得当还能让自己 “装一下”。

这里说明以下：扩展运算符和rest 都是三个点（...）但他们的作用是正好相反的

扩展运算符：把数组或类数组对象展开成一系列用逗号隔开的值

rest：把逗号隔开的值序列组合成一个数组

今天在开发中，看到前辈的代码，发现了一个解构和拓展运算符结合使用的巧妙之处，解决了之前我在实习阶段吐槽过的一个问题。（这是我自己在这之前没有发现的小技巧，仅能说明本人对解构赋值和拓展运算符还没有很深的了解，可能很多人都知道这个技巧。发这篇文章的目的是记录和分享自己在开发中遇到的问题）

一般我们会通过请求，接收到后端返回的数据：

// 通过解构赋值 获取到 后端返回的 data数据
let {data} = await 请求方法()

假设 解构赋值之后，data里面的数据是这样的：
data = {
    value1:'123',
    value2:'222',
    arr1:[1,2,3,4,5],
    value3:'333',
    obj:{
       a:'1',
       b:'2'
    }
}

当我们要对data里面的数据进行归类时，通常会使用到解构赋值的方法，例如：

// 将 data 数据里面的属性 逐一解构赋值出来
let {value1,value2,value3,obj,arr1} = data
//等同于将其变成
let value1 = data.value1
let value2 = data.value2
let value3 = data.value3
let obj = data.obj
let arr1 = data.arr1

但此时问题来了，如果data里面的属性有很多，使用解构赋值就要在{}里面把data属性都写个遍，而且，data里面的数据可能有几个之间彼此是属于同一类的，例如“value1,value2,value3”他们就是属于同一类数据，通过上述方法逐一解构，不仅要写很多次，他们本应该体现的关系没有提现到，此时可以将rest与上述解构赋值结合使用。

let {obj,arr1,...values} = data

上述写法，先将与data属性同名的obj和arr1先解构并赋值给obj和arr1,data中剩下的value1,value2,value3 将赋值给自定义的values数组，变成values = {value1:'111',value2:'222',value3:'333'}，这样既可以把之间存在关联的属性value1,value2,value3关联起来一起管理，也能减少解构赋值所写的代码。

如果写的有什么不对的地方，欢迎大家指出！