手写浅拷贝( 常见面试题之一 )

最新推荐文章于 2025-02-04 19:48:26 发布

碎碎。

最新推荐文章于 2025-02-04 19:48:26 发布

阅读量2.4k

点赞数 3

分类专栏：常见面试题函数文章标签：浅拷贝常见面试题

本文链接：https://blog.csdn.net/weixin_43410419/article/details/83748363

版权

常见面试题同时被 2 个专栏收录

8 篇文章

订阅专栏

函数

6 篇文章

订阅专栏

本文探讨了浅拷贝与深拷贝的区别，重点解析了如何手动实现浅拷贝，包括其思路和具体代码实现。同时，列举了其他常见的浅拷贝方式，如赋值运算、扩展运算符、Object.assign等，并提到了深拷贝的实现和hasOwnProperty方法的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅拷贝和深拷贝的区别：

浅拷贝： 只是将数据中所有的数据引用下来，依旧指向同一个存放地址，拷贝之后的数据修改之后，也会影响到原数据的中的对象数据

深拷贝： 将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据

实现思路：

将要拷贝的数据 obj 以参数的形式传参
声明一个变量（假如是 data ）来储存我们拷贝出来的内容
循环obj 中的每一项，判断 obj 上有这一项
将 obj 中的每一个赋值给data中的每一项
最后将这个变量 return 出来即可

代码

var data = {
        name:"test",  //一会要被拷贝的数据，包含字符串、对象、函数、数组
        main:{
            a:1,
            b:2
        },
        fn:function(){
            
        },
        friends:[1,2,3,[22,33]]
    }

    function shallowCopy(obj){
        var data = {};
        for (var i in obj){
            if(obj.hasOwnProperty(i)){  // for in  循环，也会循环原型链上的属性，所以这里需要判断一下
            //hasOwnProperty的相关知识点，查看下面的：相关知识点补充
                data[i] = obj[i]
            }
        }
        return data
    }
    var obj2 = shallowCopy(data)
    obj2.name = '修改成功'    //由于name是基本数据类型，会开辟一个新的地址来储存我们拷贝的内容，所以原数据的name属性不会被修改
    obj2.main.a = 100    //   main是引用类型，浅拷贝会直接拷贝它的地址，所以原数据的这个值也会改变
   console.log(data,obj2)

其他浅拷贝的方式：

① 赋值运算

*② 扩展运算符 …

③ Object.assign( target, …sources)
target参数：代表目标对象，assign方法会改变目标对象，所以一般target会设置一个空值
…sources参数：代表原对象，可以有多个，用，逗号隔开
注意：对于要合并的原对象中，要求键名唯一，如果有重复的，后者的键值会覆盖前者的键值

④ concat、解构赋值等

相关知识点补充

深拷贝的实现：可查看利用递归实现深拷贝（常见面试题之一）

hasOwnProperty
作用：确定某个对象是否具有带指定名称的属性。

语法：object.hasOwnProperty( proName )

参数：
object ：必传参数，对象的实例，也就是要判断的那个对象。
proName：必传参数。要判断的这个属性名

返回值：布尔值。如果 object 具有带指定名称的属性，则返回 true，否则返回 false。（此方法不会检查对象原型链中的属性；该属性必须是对象本身的一个成员。）

兼容： IE8 及以下，均不兼容该该方法

例子：

var s={
    name : 'a',
    other:{
        age:13,
        like:10
    }
};

console.log(other.hasOwnProperty('name'))  //ture