记录一下js拷贝/克隆数组或对象的方法

Javascript 496849654@qq.com 1年前 (2020-07-17) 742次浏览 0个评论

今天帮开发做一个类似购物车功能,页面中有全选、单选,点击确定按钮的时候,把所有选中的数据放到一个数组当中,展示在弹出层中。开始以为挺简单的事,直接定义个数组push不就行了。结果啪啪打脸,效果是有,感觉也没啥毛病。但是,当我点击全选按钮,所有数据都选中了(这个没毛病,哈哈哈),但是取消其中一条选中的数据后,这条取消的数据消失了,(奇怪,为什么呢?)。然后就各种debugger,一步一步走,还是没发现啥问题(郁闷)。
然后一顿百度,发现了重大问题……,在此记录一下:
js中的克隆
1.如果克隆对象是基本类型(int,short, long, byte, float, double, boolean, char),直接复制就可以:

<script type="text/javascript">
    var str1 = 'abc'
    var str2 = str1
    console.log(str2)  //abc
    str1 = '123'
    console.log(str2)  //abc
    </script>

2、不是基本类型(arr,object)就不可以直接复制,以数组为例:

//浅克隆(两个对象相互影响)
<script type="text/javascript">
    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }
        
​
    var arr = [1,2,3];
    var copy = Object.assign([], arr);
    console.log(copy); // [1,2,3]
    
​
//深克隆(两个对象互不影响)
    let arr1 = [1,2,3,4,5];
    let arr2 = JSON.parse(JSON.stringify(arr1));
    console.log(arr2)  //[1,2,3,4,5]
​
</script>

css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:记录一下js拷贝/克隆数组或对象的方法
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址