2021-07-19 深浅拷贝的区别以及实现深拷贝的几种方法,Object.assign()是什么拷贝,自定义递归深拷贝函数的封装

原创

已于 2022-12-12 18:27:22 修改 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #json

于 2021-07-19 09:05:12 首次发布

本文探讨了JavaScript中深浅拷贝的区别，解释了深拷贝是如何创建独立的内存副本，而浅拷贝只是复制引用。还详细解析了`Object.assign()`的拷贝特性，指出其仅在一级属性时进行深拷贝，二级及以后属性则是浅拷贝。此外，文章介绍了实现深拷贝的多种方法，包括`JSON.parse(JSON.stringify(obj))`、jQuery的`extend()`方法，以及两种不同的递归实现方式，并提到了这些方法的优缺点和适用场景。

文章目录

1.浅拷贝:拷贝的是指针

例子

var obj1 = {
   
    age: 18 };
var obj2 = obj1;//浅拷贝
obj2.age = 20;
console.log(obj1.age,obj2.age);//输出20 20

可以看到obj2的属性值改变后,obj1的属性值也改变,因为它们指向同一片内存空间

2.深拷贝:拷贝的是内存空间

例子

var obj1 = {
   
   age: 18};
var obj2 = JSON.parse(JSON.stringify(obj1));//深拷贝
obj2.age = 20;
console.log(obj1.age, obj2.age); //输出18 20

与浅拷贝不同的是,深拷贝对象与原对象的内存空间是相互独立的,彼此互不干扰

3.Object.assign是什么拷贝?

3.1.Object.assign的用法

*var returnTarget=object.assign(target,source);
前面可以不用写,仅仅保留Object.assign(target, source);输出结果都是一样的,都是两个对象合并的结果

const target = {
   
    a: 1, b: 2 };
const source = {
   
    b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);// expected output: Object { a: 1, b: 4, c: 5 }

target为空时叫做深拷贝,target有属性方法时叫做合并对象,本质都是把source的属性和方法复制一份给它

3.2.只有一级属性为深拷贝，二级属性后就是浅拷贝

var obj = {
   
   
    name: "zhangsan",
    hobbies: {
   
   
        am: "sleep",
        <

最低0.47元/天解锁文章