一文弄懂浅拷贝和深拷贝

简介: 一文弄懂浅拷贝和深拷贝

一文弄懂浅拷贝和深拷贝

目的:复制一个对象

浅拷贝:复制基本类型的属性;引用类型的属性复制,复制栈中的变量 和 变量指向堆内存中的对象的指针,不复制堆内存中的对象。(修改拷贝对象中的应用类型属性值时,原对象也会随着变化

深拷贝:复制基本类型的属性;引用类型的属性复制,复制栈中的变量 和 变量指向堆内存中的对象的指针和堆内存中的对象。(修改拷贝对象中的应用类型属性值时,原对象不会随着变化

JS实现

浅拷贝

function clone(origin,target){
    var target = target || {};
    for(var key in origin){
        target[key] = origin[key];//直接赋值每一项
    }
    return target;
}

深拷贝(递归实现)

function deepClone(origin,target){
    var target = target || {},
        toStr = Object.prototype.toString,
        //Object.prototype.toString.call(origin[key]):判断对象类型
        arrType = '[object Array]';//数组类型
    //遍历每一个属性
    for(var key in origin){
        //判断是否是prototype上的属性
        if(origin.hasOwnProperty(key)){
            //不是原型上的
            if(typeof(origin[key]) === 'object' && origin[key] !== null){
                //是引用类型
                if(toStr.call(origin[key]) === arrType){
                    //是数组
                    target[key] = [];
                }else{
                    //是对象
                    target[key] = {};
                }
                //递归拷贝
                deepClone(origin[key],target[key]);
            }else{
                //对应key赋值
                target[key] = origin[key];
            }
        }
    }
    return target;
}
目录
相关文章
|
7月前
|
存储 人工智能 前端开发
深拷贝浅拷贝的区别?如何实现一个深拷贝?
深拷贝浅拷贝的区别?如何实现一个深拷贝?
111 0
|
2月前
|
存储 前端开发 JavaScript
浅拷贝和深拷贝的区别?
本文首发于微信公众号“前端徐徐”,介绍了JavaScript中浅拷贝和深拷贝的概念及其实现方法。文章首先解释了数据类型的基础,包括原始值和对象的区别,然后详细介绍了浅拷贝和深拷贝的定义、底层逻辑以及常见的实现方式,如 `Object.assign`、扩展运算符、`JSON.stringify` 和手动实现等。最后,通过对比浅拷贝和深拷贝的区别,帮助读者更好地理解和应用这两种拷贝方式。
92 0
浅拷贝和深拷贝的区别?
|
6月前
|
安全 Java
深拷贝和浅拷贝的区别
深拷贝和浅拷贝的区别
|
5月前
|
前端开发 JavaScript
前端深拷贝、浅拷贝,一起手撕深拷贝
【7月更文挑战第2天】JavaScript中的深拷贝和浅拷贝关乎对象复制的独立性。浅拷贝(如`Object.assign()`、扩展运算符)创建新对象,但共享引用类型属性的内存地址,导致修改新对象会影响原始对象。深拷贝(如递归复制)创建完全独立的对象副本,不受原始对象变动影响。`JSON.parse(JSON.stringify(obj))`是简单的深拷贝方法,但无法处理函数、undefined、Symbol及循环引用。手动实现深拷贝需递归遍历并处理循环引用问题,以确保复制的完整性。理解这两者差异对编写健壮的代码至关重要。
34 0
面试官:深拷贝与浅拷贝有啥区别?
面试官:深拷贝与浅拷贝有啥区别?
|
7月前
|
存储 Java Apache
【面试问题】深拷贝和浅拷贝的区别?
【1月更文挑战第27天】【面试问题】深拷贝和浅拷贝的区别?
|
存储 JavaScript 前端开发
深拷贝浅拷贝有什么区别?怎么实现深拷贝?
深拷贝浅拷贝有什么区别?怎么实现深拷贝?
103 0
浅说一下深拷贝和浅拷贝,如何自己实现一个深拷贝?
浅说一下深拷贝和浅拷贝,如何自己实现一个深拷贝?
64 0
C++学习笔记_06 深拷贝和浅拷贝 2021-04-19
C++学习笔记_06 深拷贝和浅拷贝 2021-04-19
|
存储 JSON JavaScript
面试常问:深拷贝和浅拷贝
在了解深拷贝和浅拷贝之前我们先简单了解一下堆和栈的概念。 堆的概念:在javaScript中,堆是用来存储地址的。比如引用数据类型的地址就是存储在堆中。 栈的概念:栈在javascript中用于存储值的。比如基本数据类型都是直接存在栈内存中的。