深拷贝、浅拷贝及其实现方式


一、浅拷贝

  浅拷贝和深拷贝都只针对于引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存
例如:

const obj_1 = {
    age: 21
}
const obj_2 = obj_1;    // 对象obj_2只复制了obj_1的地址
obj_2.age = 19;
console.log(obj_1.age);     // 输出:19

内存角度:对象obj_1会在中分配一个内存地址,该内存地址对应的值又会创建一个新的内存地址,该新的内存地址又指向这样一个数据结构,并在堆中创建对应的属性值age:21。而上述案例中创建obj_2并赋值obj_1,实际上只复制了指针,这么做将会导致obj_2与obj_1指向同一个地址,他们两从栈到堆这两种数据类型的链路都是一样的,obj_2修改属性age的值,导致obj_1中age的值发生改变,称作只实现了浅拷贝。

二、深拷贝

  不同于浅拷贝,深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象;

三、判断深、浅拷贝

  我们通过我们熟知的引用类型——数组,用其内置的一些方法判断是浅拷贝还是深拷贝

1.concat()方法

判断:

let list = ['我爱', '学习'];
let copyList = [].concat(list);
copyList.push('JavaScript');
console.log(list);      // ['我爱', '学习']
console.log(copyList);      // ['我爱', '学习', 'JavaScript']

  我们使用concat()方法拷贝副本,返回新构建的数组,此时我对新数组元素的添加也不会影响到原数组,然而。。。答案为:浅拷贝

2.slice()方法

判断:

let list = ['我爱', '学习'];
let copyList = list.slice();
copyList.push('JavaScript');
console.log(list);      // ['我爱', '学习']
console.log(copyList);      // ['我爱', '学习', 'JavaScript']

  我们使用slice()方法不传参的方式从头到尾拷贝副本,并且返回新数组,即使我对新数组添加元素也不会影响到原数组,然而。。。答案仍然为:浅拷贝

3.Array.from()方法

判断:

let list = ['我爱', '学习'];
let copyList = Array.from(list);
copyList.push('JavaScript');
console.log(list);      // ['我爱', '学习']
console.log(copyList);      // ['我爱', '学习', 'JavaScript']

  我们使用ES6中Array.from()方法同样以不影响原数组的方式实现了拷贝,然而。。。答案依旧为:浅拷贝

4.扩展运算符

判断:

let list = ['我爱', '学习'];
let copyList = [...list];
copyList.push('JavaScript');
console.log(list);      // ['我爱', '学习']
console.log(copyList);      // ['我爱', '学习', 'JavaScript']

  我们再次使用ES6中扩展运算符,同理:浅拷贝

我们来考证一下:

let list = [{ name: 'Tom' }];
let copyList = [...list];
copyList[0].name = 'Jerry'
console.log(list[0].name);      // Jerry
console.log(copyList[0].name);      // Jerry

  我们将数组元素都换成引用类型,执行以上方法,并通过拷贝副本改变数组元素的值,我们会发现原数组的元素也发生了改变,由此可见,确实是浅拷贝。除此之外,数组的其他方法如map()、filter()、reduce(),都是会造成浅拷贝的。

四、实现浅拷贝

1.Object.assign方法

let list = {
    obj: {
        hobby: 'JavaScript'
    }
}
let copyList = Object.assign({}, list);
copyList.obj.hobby = 'Vue'
console.log(list.obj.hobby);    // Vue

2.for in方法

let user1 = {
    name: "小明",
    age: 30,
    height: 1.9,
    hobby: {
        project: 'React'
    }
};
let user2 = {};
for (let i in user1) {
    user2[i] = user1[i];    //user1[i]输出的是每一个属性的值,将user1的每一个属性的值取出来赋值给user2对象
}
user2.name = '小蓝'
user2.hobby.project = 'Vue'
console.log(user1)      //{ name: "小明", age: 30, height: 1.9, hobby: { project: 'Vue' } }

五、实现深拷贝

1.递归实现

采用递归去拷贝所有层级属性

function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === "object") {
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                //判断ojb子元素是否为对象,如果是,递归复制
                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}
let a = [1, 2, 3, 4],
    b = deepClone(a);
a[0] = 2;
console.log(a, b)	// [2,2,3,4]  [1,2,3,4]

2.JSON.stringify与JSON.parse

通过JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成一个全的新的对象;

let list = [{ name: 'Tom' }];
let copyList = JSON.parse(JSON.stringify([...list]));
copyList[0].name = 'Jerry'
console.log(list[0].name);      // Tom
console.log(copyList[0].name);      // Jerry

3.loadash函数库

函数库lodash,也有提供_.cloneDeep用来做深拷贝

let lodash = require('lodash');
let list = [{ name: 'Tom' }];
let copyList = lodash.cloneDeep(list);
copyList[0].name = 'Jerry'
console.log(list[0].name);      // Tom
console.log(copyList[0].name);      // Jerry

  • 14
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JV_32

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值