深拷贝与浅拷贝:理解并避免潜在问题

一、引言

在JavaScript中,我们经常需要复制对象或数组。然而,我们可能并不完全理解这两种不同的复制方式:深拷贝和浅拷贝。在本文中,我们将深入探讨这两种复制方式,以及它们在编程中的应用和潜在问题。

二、浅拷贝

浅拷贝(Shallow Copy)是指只复制对象的顶层属性。如果对象的属性是一个引用类型(例如,数组或对象),那么这两个对象将共享这个引用。这意味着,如果你更改了其中一个对象的属性,另一个对象的属性也会被改变。

在JavaScript中,你可以使用Object.assign()方法或Object.create()方法来实现浅拷贝。例如:

js 复制代码
let original = {a: 1, b: 2, c: {d: 3}};  
let copy = Object.assign({}, original);

或者使用JavaScript原生模式,通过封装一个方法实现。例如:

js 复制代码
function clone (original,taraget){
    const tar = taraget || {}; // taraget 可能不会传入,所以在这里判断一下
    for(const key in original){
        // 使用objetc.hasOwnProperty()方法,获取original自身的属性,防止获取到原型的属性
        if(original.hasOwnProperty(key)){
            taraget[key] = original[key];
        }
    }
    return tar;
}

三、深拷贝

深拷贝(Deep Copy)是指不仅复制对象的顶层属性,而且复制其所有嵌套的属性。如果对象的属性是一个引用类型,那么这两个对象将拥有各自独立的副本。这样,你可以自由地修改其中一个对象,而不会影响到另一个对象。

在JavaScript中,你可以使用JSON的parse()和stringify()方法来实现深拷贝。例如:

js 复制代码
let original = {a: 1, b: 2, c: {d: 3}};  
let copy = JSON.parse(JSON.stringify(original));
// 此方法虽然可以实现深拷贝,但是不建议这样做,如果属性中存在Function Reg Date等,会出现问题,拷贝之后会访问不到

所以通常情况下我们提供封装一个方法去实现。例如:

js 复制代码
function deepClone (orginal,target){
    const tar = target || {};
    const toStr = Object.prototype.toString; // 这里其实是调用Object.prototype.toString.call()方法
    const arrType = '[object Array]';
    for (const key in orginal){
        if(orginal.hasOwnProperty(key)){
            // 判断当前属性是否为引用类型  因为null 的类型返回为object 所以 属性为null 的 我们排除
            if(typeof(orginal[key]) === 'object' && orginal[key] !== null){
                // 若果当前属性为引用类型 我们在判断是否是数组类型
                // 当前只判断了数组和对象,Function,Date,等内置的对象 可自行增加判断
                if(toStr.call(orginal[key]) === arrType) {
                    tar[key] = [];
                }else {
                    tar[key] = {};
                }deepClone (orginal[key],tar[key]);
            }else {
                tar[key] = orginal[key];
            }
        }
    }
    return tar;
}

四、潜在问题

在使用浅拷贝时,如果原对象中的某个引用类型属性被修改,那么所有使用这个属性的对象都会受到影响。这可能会导致意料之外的结果,甚至可能导致程序错误。(具体问题是堆内存和栈内存的存值问题本文暂不解释)

js 复制代码
let original = {a: 1, b: 2, c: {d: 3}};  
let copy = Object.assign({}, original);  
copy.c.d = 4; // 这里修改了copy对象的属性,但实际上也修改了original对象的属性  
console.log(original.c.d); // 输出4,而不是3

五、结论

深拷贝和浅拷贝是编程中常见的概念,理解并正确使用它们对于避免潜在问题非常重要。当需要复制对象时,你需要考虑是否需要复制对象的所有嵌套属性。如果需要,你应该使用深拷贝;如果不需要,你可以使用浅拷贝。

相关推荐
巴巴_羊31 分钟前
React Ref使用
前端·javascript·react.js
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想1 小时前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷1 小时前
TypeScript-webpack
javascript·webpack·typescript
Rockson1 小时前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子3 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹4 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志4 小时前
typescript结构化类型应用两例
javascript
gnip5 小时前
总结一期正则表达式
javascript·正则表达式