深拷贝(对象和数组的深拷贝)

一、理解

数组的深拷贝:

arr.concat()拷贝的数组 一维数组相当于做深拷贝,多维数组相当于做浅拷贝 。 arr.slice()选取数组的一部分,并返回一个新数组,不修改原数组。

对象的深拷贝:

Object.assign(参数) 简单的对象深拷贝,复杂的还是浅拷贝

二、运用

(1)数据简单

javascript 复制代码
<script>
// ------数组
        var arr = [10, 20, 30];
        var arr1 = arr.concat();
        arr1[0] = 100
        console.log(arr, arr1);//(3) [10, 20, 30]   (3) [100, 20, 30]

        var arr2=arr.slice(0,arr.length);
        console.log(arr,arr2);//(3) [10, 20, 30]  (3) [10, 20, 30]
        arr2[2]=100;
        console.log(arr,arr2);//(3) [10, 20, 30]  (3) [10, 20, 100]

//  -----对象
        var obj = { name: '小明' };
        var obj1 = obj;
        obj1.name = '小红'
        console.log(obj1, obj);//{name: '小红'} {name: '小红'}

        var obj2 = Object.assign({}, obj);
        console.log(obj, obj2);//{name: '小红'} {name: '小红'}
        obj2.name = '小绿'
        console.log(obj, obj2);//{name: '小红'} {name: '小绿'}
</script>

(2)数据复杂

javascript 复制代码
<script>
        var data = {
            code: 1,
            list: [{
                name: "詹桑",
                title: "值",
                arr: [2, 3, 4],
                isShow: true,
                obj: {
                    name: "123"
                }
            }]
        }
</script>

解决方法 三种

1.方法一: JSON.stringify() JSON.parse()

javascript 复制代码
    <script> 
      var data1 = JSON.parse(JSON.stringify(data));
      data1.list[0].name = '大权'
      console.log(data, data1);
    </script>

运行结果:

2.方法二: lodash官网 封装好的深拷贝 _.cloneDeep(value)

javascript 复制代码
<script>
    var data2 = _.cloneDeep(data);
    data2.list[0].name='大权';
    console.log(data, data2);
</script>

运行结果:

3.方法三:递归函数 封装 原生的方法

javascript 复制代码
<script>
        function deepCopy(obj) {
            //1.不是对象,基本数据类型 输出
            if (typeof obj != 'object') return obj
            //2.是对象  ,遍历对象,再拷贝一遍
            var newobj = obj instanceof Array ? [] : {}
            for (var k in obj) {
                newobj[k] = deepCopy(obj[k])
            }
            return newobj
        }
        var newobj = deepCopy(data);
</script>

运行结果:

相关推荐
rit843249916 分钟前
人工鱼群算法AFSA优化支持向量机SVM,提高故障分类精度
算法·支持向量机·分类
佩佩(@ 。 @)40 分钟前
嵌入式:走馬燈-stm32GPIOF_LED9、10; GPIOE_D10、D12 流水綫蜂鸣器
stm32·嵌入式硬件·算法
知彼解己1 小时前
字符串大数相加:从初稿到优化的思路演进
java·开发语言·算法
haing20191 小时前
使用deboor法计算三次B样条曲线在参数为u处的位置的方法介绍
算法·b样条曲线·deboor
qq_352109521 小时前
旋转数字矩阵 od
算法
大阳1231 小时前
51单片机4(温度传感器DS18B20)
开发语言·单片机·嵌入式硬件·算法·51单片机
iナナ1 小时前
Java优选算法——二分查找
数据结构·算法·leetcode
l1t2 小时前
利用美团龙猫添加xlsx的sheet.xml读取sharedStrings.xml中共享字符串输出到csv功能
xml·c语言·数据结构·人工智能·算法·解析器
宇钶宇夕3 小时前
西门子 S7-200 SMART PLC 编程:转换 / 定时器 / 计数器指令详解 + 实战案例(指令讲解篇)
运维·算法·自动化
我叫汪枫3 小时前
Spring Boot图片验证码功能实现详解 - 从零开始到完美运行
java·前端·javascript·css·算法·html