menu 山水有轻音
more_vert
关于js深拷贝和浅拷贝
2020-10-15 | js知识 | 暂无评论 | 9 次阅读 | 1847字

1、对象拷贝、浅拷贝与深拷贝问题

JS中对象之间的赋值采用的是引用拷贝的方法。在理解这个之前,需要先理解JS运行时的堆栈空间。对象数据存放在堆内存中,对象变量存放在栈内存中,对象变量通过引用数据的堆地址实现对象访问。
与基本类型不同,对象之间的赋值,是拷贝了堆内存的地址空间,结果是两个变量指向了同一个对象实体,也称共享,任何一个对对象的修改都会影响另一个变量。

let obj1 = {
    value: 1
};
let obj2 = obj1;
obj2.value = 2;
console.log(obj1.value);    //2

很多时候,这不是我们想要的效果。我们希望克隆出来的值不会影响到原来的对象。
为了实现对象之间互不影响,首先到的方法是对对象的每一个属性都做一次拷贝,类似下面的做法。

function shallowClone(item) {
    let clone = {};
    for (let prop in item) {
        clone[prop] = item[prop];
    }
    return clone;
}

测试一下:

let obj1 = {
    value: 1
};
let obj3 = shallowClone(obj1);
console.log(obj3.value);     //1
obj3.value = 2;
console.log(obj1.value);     //1
It works!是的,看上去是,让我们看一个稍微复杂的对象。
let compObj1 = {
    value: 1,
    param: {
        id: 1314,
        num: 3
    }
}
let compObj2 = shallowClone(compObj1);

console.log(compObj2);    //{ value: 1, param: { id: 1314, num: 3 } }
compObj2.param.num = 4;
console.log(compObj1.param.num);//4

同样的问题又出现了。原因在于compObj1存在值为对象类型的属性。在shallowClone()中对每一个属性采用赋值拷贝,如果属性是对象类型,也只是得到了引用。

我们也称这种拷贝为浅拷贝。也就是说,浅拷贝事实上只拷贝了对象的最外层属性。与之相对的,如果我们得到的拷贝对象在每一层属性上都不共享,就称为深拷贝,深拷贝是一种彻底的克隆,源对象与克隆对象不会相互影响。
为了实现深拷贝,我们可以采取对对象属性进行递归拷贝的方法。

function deepClone(item) {
    let clone = {};
    for (let prop in item) {
        clone[prop] = (item[prop] instanceof Object ?
            deepClone(item[prop]) :
            item[prop]);
    }
    return clone;
}

再使用上面的例子测试,证实确实是对param进行了拷贝。
尽管上面看似实现了对象的拷贝,但那不过是我为了解释简单处理,忽略和很多细节。问题远没有那么简单。

拷贝对象与原对象的一致性。上面的代码代码使用for...in循环遍历属性,但是for...in列出了对象自身及其原型链上的可枚举属性,也就是说不可枚举的属性没有被拷贝,原型也没有得到拷贝。
拷贝方法的通用性。在上面的例子中,只考虑了对象的情况,但实际中,不可避免有人把基本类型作为item传入,这时会得到一个默认对象,显然不合理。另外,我们应该注意到,数组也存在深浅拷贝的问题,当传入数组时,我们希望得到一个拷贝的数组。
拷贝方法的鲁棒性。它是否适用于所有的对象的拷贝?显然,上面的例子并不满足,当对象出现引用循环时,deepClone()将无限递归。

不幸的是,并不像语言一样,JS中对象拷贝的问题并没有一个通用的解决方案。但是,对特定的对象结构,不难找到合适的拷贝方案。下面,对一些常见的拷贝方法做个总结和比较。

2、深浅拷贝的实现

在探讨拷贝之前,我觉得有必要说明几个问题。

你是否真的需要深拷贝? 如果确定对象属性值都是基本类型,或者不会对对象的深层属性进行修改,这些情况下,浅拷贝就足够了。
你需要拷贝哪些内容? 一个对象的属性是复杂的,有自身属性和原型链上的属性,有可枚举属性和不可枚举属性,有字符串属性和Symbol属性,在选择拷贝方案时,请确定你的目标对象具有哪些属性,以及你需要拷贝哪些属性。
可能需要哪些拷贝数据类型?一些特定的类型可能需要特殊的拷贝处理,如Data, RegExp。

2.1 浅拷贝

2.1.1、利用Object.assign()进行浅拷贝

Object.assign(target, ...sources)实现将一组源对象中的自身可枚举属性(包括Symbol属性)复制到目标对象上。我们可以利用这个特点,进行浅拷贝,只需要一行代码。
let copyObj = Object.assign({}, sourceObj);
很多时候,这种拷贝是足够的,它的局限性在于:

只拷贝了自身的可枚举属性,没有拷贝正确的原型和不可枚举属性。
IE不兼容

2.1.2、利用展开语法实现浅拷贝

ES6中的展开语法...能方便地进行对象属性复制,同assign(),它拷贝了对象自身的可枚举属性。
let copyObj = {...target};
相当简洁易懂有没有,这也是我个人比较喜欢的拷贝方式。更强大的在于,你可以决定你要拷贝哪些属性:
let copyObj={};
{copyObj.prop1:prop1, copyObj.prop2:prop2 } = {...target}
另外,展开语法也能进行数组的拷贝:
let newArr = [...arr];

2.1.3、借助Object.create()实现浅拷贝

利用Object.create(), 我们能拷贝出一个高度相似的对象:
let clone = Object.create(

Object.getPrototypeOf(target), 
Object.getOwnPropertyDescriptors(target)
);

这种拷贝在对象与对象直接几乎是完美的,正确的原型,正确的属性。但遗憾数组拷贝的结果会变成一个对象,尽管数组的访问方式和方法都可以,但Array.isArray(clone)===false

注意,具有相同属性的对象,同名属性,后边的会覆盖前边的。

Vue中的使用技巧
  由于Object.assign()有上述特性,所以我们在Vue中可以这样使用:
Vue组件可能会有这样的需求:在某种情况下,需要重置Vue组件的data数据。
此时,我们可以通过this.$data获取当前状态下的data,通过this.$options.data()获取该组件初始状态下的data。
然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态,
非常方便!

2.1.4、手动实现浅拷贝

如果Object.assign()不适用,你可能需要自己定制自己的拷贝函数,类似shallowClone()的例子。不过,现在,让我们来优化一下代码。

一致性:为了更具有通用性,这里尽可能的保证拷贝对象和原对象的一致性。所以,我们会拷贝对象原型以及所有的对象属性。
通用性:只实现数组和对象类型的拷贝,其它类型,我们只返回原来的对象即可。

function shallowClone(target) {
    //排除非对象和非数组变量
    if (!(target instanceof Object)) return target;

    let clone = (Array.isArray(target) ? [] : Object.create(target.__proto__))

    let keys = Reflect.ownKeys(target); //保证能获取到所有自身属性 
    for (let k of keys) {
        clone[k] = target[k];
    }
    return clone;
}

需要注意的是,上面的方式是支持数组的(经过验证)。数组时特殊的对象,arr instanceof Object的结果为true。在for...of循环内进行数组内容或属性的拷贝。在拷贝数组时,不能直接返回数组的副本是因为数组上可能挂有其它的属性。
再次提醒,以上只是提供一种思路,你应该按自己的需要实现拷贝方法。

2.2、深拷贝

2.2.1、借助JSON转化实现深拷贝

使用JSON的解析功能可以快速进行深拷贝,很多时候,这是拷贝对象时的最先想到的方法。
let copyObj = JSON.parse(JSON.stringify(target));

得益于Json格式对数据的处理,这个方法在很多时候都能派上用场。但是,也存在问题:

对某些数据不支持:如Date类型会被转为字符串类型,Undefined和RegExp类型丢失等问题。
无法拷贝存在循环引用的对象。
拷贝自身可枚举字符串属性,原型链丢失。
属性特性丢失。
性能较差。

2.2.2、手动实现深拷贝

同样地,让我们来手动实现深拷贝。

function deepClone(target) {
    if (!(target instanceof Object) || 'isClone' in target)
        return target;
    
    let clone = null;
    if (target instanceof Date)
        clone = new target.constructor(); 
    else if(Array.isArray(target))
        clone = [];
    else
        clone = new target.constructor();
    let keys = Reflect.ownKeys(target);
    for (let key of keys) {
        if (Object.prototype.hasOwnProperty.call(target, key)) {
            target['isClone'] = null;
            clone[key] = deepClone(target[key]);
            delete target['isClone'];
        }
    }
    return clone;
}
None
发表评论
暂无评论
textsms
account_circle
email
link