#高考加油#每一天的学习就是对自己的投资

JavaScript系列--深浅拷贝简单实现

一、前言

之前写了一篇:浅析JavaScript解析赋值、浅拷贝和深拷贝的区别https://www.mwcxs.top/page/592.html。里面介绍了解析赋值,浅拷贝,深拷贝的原理和实现。浅拷贝方法:Object.assign(),展开语法Spread,Array.prototype.alice(),array.prototype.concat()。深拷贝方法:JSON.parse(JSON.stringify(object)),对于undefined,symbol和函数的会直接忽略。

javascript之Object.assign实现浅拷贝的原理以及实现:https://www.mwcxs.top/page/595.html,浅拷贝Object.assign()原理实现。


二、数组浅拷贝

如果是数组,可以使用数组的一些方法实现:slice(),concat()返回一个新数组的特性实现拷贝。

举个例子:

用concat()实现

var arr = ['saucxs', 1, true, null, undefined];

var new_arr = arr.concat();

new_arr[0] = 'new';

console.log(arr) // ["saucxs", 1, true, null, undefined]
console.log(new_arr) // ["new", 1, true, null, undefined]

用slice实现

var new_arr = arr.slice();

但是如果数组嵌套了对象或者数组的话,比如:

var arr = [{old: 'old'}, ['old']];

var new_arr = arr.concat();

arr[0].old = 'new';
arr[1][0] = 'new';

console.log(arr) // [{old: 'new'}, ['new']]
console.log(new_arr) // [{old: 'new'}, ['new']]

发现:无论是新数组还是旧数组都发生了变化,也就是说使用 concat 方法,克隆的并不彻底


用扩展运算符spread实现

var arr = [{old: 'old'}, ['old']];

var new_arr =[...arr];

arr[0].old = 'new';
arr[1][0] = 'new';

console.log(arr) // [{old: 'new'}, ['new']]
console.log(new_arr) // [{old: 'new'}, ['new']]


总结

如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化。

我们把这种复制引用的拷贝方法称之为浅拷贝,与之对应的就是深拷贝,深拷贝就是指完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。

所以我们可以看出使用 concat , slice, 扩展预算符spread 是一种浅拷贝。


三、数组深拷贝

JSON.parse(JSON.stringify())不仅适用于数组还适用于对象。

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]

var new_arr = JSON.parse( JSON.stringify(arr) );

console.log(new_arr);

这个方法是一个简单粗暴的好方法,就是有一个问题,不能拷贝函数,undefined,symbol。

我们举个例子看一下:

var arr = [
    function(){ console.log(a)}, 
    { b: function(){ console.log(b)}},
    undefined,
    Symbol('saucxs')
]

var new_arr = JSON.parse(JSON.stringify(arr));

console.log(new_arr);   //[null, {}, null, null]


四、浅拷贝的实现

接下来我们思考下如何实现一个对象或者数组的浅拷贝。

想一想,好像很简单,遍历对象,然后把属性和属性值都放在一个新的对象里。

var shallowCopy = function(obj) {
    // 只拷贝对象
    if (typeof obj !== 'object') return;
    // 根据obj的类型判断是新建一个数组还是对象
    var newObj = obj instanceof Array ? [] : {};
    // 遍历obj,并且判断是obj的属性才拷贝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}


五、深拷贝的实现

如何实现一个深拷贝呢?说起来也好简单,我们在拷贝的时候判断一下属性值的类型,如果是对象,我们递归调用深拷贝函数不就好。

var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}


六、注意事项

尽管使用深拷贝会完全的克隆一个新对象,不会产生副作用,但是深拷贝因为使用递归,性能会不如浅拷贝,在开发中,还是要根据实际情况进行选择。


感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/740.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

图文推荐

saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!