深拷贝实现的六种方式(优缺点浅析)

首先,我们需要简单了解什么是深拷贝,什么是浅拷贝。

深拷贝:拷贝的是对象或者数组内部数据的实体,重新开辟了内存空间存储数据;
浅拷贝:拷贝的是引用类型的指针,副本和原数组或对象指向同一个内存;

浅拷贝:


var obj = {
      a: 1,
      b: 2
    }

    var obj1 = {}

    obj1 = obj//浅拷贝

    console.log(obj1);//{a: 1, b: 2}
    obj1.c = 3
    console.log(obj);//{a: 1, b: 2, c: 3},更改obj1,obj也被改变

深拷贝的实现:


1、通过递归方式实现深拷贝

比较全面的深拷贝,缺点是较为繁琐

function deepClone(obj) {
    var target = {};
    for(var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            if (typeof obj[key] === 'object') {
                target[key] = deepClone(obj[key]); 
            } else {
                target[key] = obj[key];
            }
        }
    }
    return target;
}

2、JSON.parse(JSON.stringify(obj))

    满足一般使用场景,但无法实现对象中方法(fountion)的深拷贝

let obj = {
	id: 1,
	name: '张三',
	age: 10,        
}
let newObj = JSON.parse(JSON.stringify(obj))

3、jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝,false为浅拷贝

4、Object.assign(obj1, obj2)---伪

    只有一级属性为深拷贝,二级属性后就是浅拷贝

let obj = {
	id: 1,
	name: '张三',
	age: 10,        
}
let newObj = Object.assign({}, obj)

5、扩展运算符---伪

    只有一级属性为深拷贝,二级属性后就是浅拷贝

var obj = {
        a: 1,
        b: 2
      }

var obj1 = {...obj}

6、数组使用数组方法进行深拷贝(concat、slice)---伪

    只有一级属性为深拷贝,二级属性后就是浅拷贝,如数组中的对象

 var arr1 = [1, 2, 3, 4]
 var arr2 = arr1.concat()
 var arr3 = arr1.slice(1)

  • 11
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值