ES6黑科技之 … 拆箱与装箱

文章目录[隐藏]

你用过 … 吗? 没用过的话,你太low了。

const test = (...args)=>{

}

你肯定写过这种代码,这个比较简单,就是对不定长入参的封装,args是一个数组,入参个数就是args的长度。

名词解释

用…把数据拼在一起 称为装箱,把数据结构才开,称为拆箱

高级用法

还有更高级的用法,

let aa = {11:22,33:44}
let bb = {11:22,33:44,55:{66:77,88:99}}
let cc = {11:22,33:44,55:{66:77,88:110,99:120}}
let dd = {...aa,...bb,...cc}

------out---
dd = {"11":22,"33":44,"55":{"66":77,"88":110,"99":120}}

还有呢

let ee = [11,22,33]
let ff=[55,66,77]
[...ee,...ff]
-----out---
[11, 22, 33, 55, 66, 77]

是不是,以后再也不用为数据合并而烦恼了,不需要extend , merge ,assign这些函数了,而且这个装箱操作还是不可变的,Immutable。新生成的对象和之前的对象不是一个对象,或者你可以理解为深克隆。是不是很神奇?

let aa = {11:22,33:44}
let bb = {11:22,33:44,55:{66:77,88:99}}
let cc = {11:22,33:44,55:{66:77,88:110,99:120}}
let dd = {...aa,...bb,...cc}
dd[11] = 23
------out---
dd = {"11":23,"33":44,"55":{"66":77,"88":110,"99":120}}
aa = {11:22,33:44}
let ee = [11,22,33]
let ff=[55,66,77]
let gg = [...ee, ...ff] 
gg[0]=22 
------out---- 
gg: [22, 22, 33, 55, 66, 77] 
ee: [11, 22, 33]

这回又解决了一个问题,深克隆,以后深拷贝就可以用 … 了,是不是很简单。

PS: 以上测试在Chrome浏览器中正常,在前端webpack或者rollup打包需要babel-preset-stage-3支持,但是这个babel最终会转换成Object.assign, 所以又变成浅拷贝了!!!

fed123版权所有,转载请保留出处:前端123学堂 » ES6黑科技之 … 拆箱与装箱

赞 (1) 打赏

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏