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, 所以又变成浅拷贝了!!!

再补充个深克隆的实验

let aa = {11:function(){ console.log(11) }}
let bb = {...aa}

aa[11] = function(){console.log(23)}

aa[11]() // 输出 23
bb[11]() // 输出 11

函数都可以实现深克隆,厉害。不是这是浏览器实现了的。上面红色的字提示了,如果用polyfill,注意回退情况。如果是中后台可控范围,可以放心用

知识共享署名4.0国际许可协议,转载请保留出处; 部分内容来自网络,若有侵权请联系我:前端学堂 » ES6 … 拆箱与装箱实现深克隆

赞 (1) 打赏

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

支付宝扫一扫打赏

微信扫一扫打赏