在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关联起来一起管理,也能减少解构赋值所写的代码。
如果写的有什么不对的地方,欢迎大家指出!