基础总结JS（3）：对象的浅拷贝和深拷贝

最新推荐文章于 2024-08-07 21:49:18 发布

前端小展

最新推荐文章于 2024-08-07 21:49:18 发布

阅读量141

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wangzhanxiaobai/article/details/108923154

版权

前端基础总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细讲解了浅拷贝和深拷贝在JavaScript中的实现方式，包括简单拷贝、Object.assign()、for…in，以及递归和序列化实现的深拷贝。了解这些技术有助于开发者正确处理复杂对象的复制问题。

摘要由CSDN通过智能技术生成

一、前言：

对象的浅拷贝和深拷贝，都是为了将拷贝后的对象和原对象区别开，修改其一，不会影响另一个。

浅拷贝：适用于原对象里只含有基本类型数据时的拷贝
深拷贝：适用于原对象里包含二级及多级对象、数组的拷贝

二、浅拷贝的几种方式：

1、简单拷贝：使用ES6的扩展运算符

```javascript
let obj1 = {
    name: "Mike",
    age:  20
};
let obj2 = { ...obj1 };

obj1.name = "Jane";

console.log(obj1);  // {name: "Jane", age: 20}
console.log(obj2);  // {name: "Mike", age: 20}

2、拷贝合并多个对象：使用Object.assign()

let obj1 = {
    name: "Mike",
    age:  20
};
let obj2 = {
    phone: "1234566"
};
let obj3 = Object.assign({}, obj1, obj2);

obj3.name = "Jane";

console.log(obj1);  // {name: "Mike", age: 20}
console.log(obj2);  // {phone: "1234566"}
console.log(obj3);  // {name: "Jane", age: 20, phone: "1234566"}

3、需要逐项做修改时：使用 for…in

let obj1 = {
    name: "Mike",
    age:  20
};

let obj2 = {};
for (const key in obj1) {
  obj2[key] = key + "：" + obj1[key];
}

obj1.name = "Jane";
console.log(obj1);  // {name: "Jane", age: 20}
console.log(obj2);  // {name: "name：Mike", age: "age：20"}

三、深拷贝的几种方式：

1、使用递归：

let obj1 = {
    title: "A blog",
        author: {
        name: "Miki",
        age: "30"
    },
    list: []
};

//演示 Object.entries返回值
console.log(JSON.stringify(Object.entries(obj1), null, 4));

function copy(object) {
    let obj = object instanceof Array ? [] : {};
    // Object.entries：无论是数组还是对象，返回的都是数组
    for (const [k, v] of Object.entries(object)) {
        //若是对象，则继续递归调用自身，若是数组，则等于原值
        obj[k] = typeof v == "object" ? copy(v) : v;
    }
    return obj;
}

let obj2 = copy(obj1);
obj2.author.name = "Jane";
obj2.list.push("文章1");

console.log(JSON.stringify(obj1, null, 4));
console.log(JSON.stringify(obj2, null, 4));
/*
[
    [
        "title",
        "A blog"
    ],
    [
        "author",
        {
            "name": "Miki",
            "age": "30"
        }
    ],
    [
        "list",
        []
    ]
]

{
    "title": "A blog",
    "author": {
        "name": "Miki",
        "age": "30"
    },
    "list": []
}

{
    "title": "A blog",
    "author": {
        "name": "Jane",
        "age": "30"
    },
    "list": [
        "文章1"
    ]
}
*/

2、使用序列化：

let obj1 = {
    title: "A blog",
    author: {
        name: "Miki",
        age: "30"
    },
    list: []
};

let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.author.name = "Jane";
obj2.list.push("文章1");

console.log(JSON.stringify(obj1, null, 4));
console.log(JSON.stringify(obj2, null, 4));
/*
{
    "title": "A blog",
    "author": {
        "name": "Miki",
        "age": "30"
    },
    "list": []
}
{
    "title": "A blog",
    "author": {
        "name": "Jane",
        "age": "30"
    },
    "list": [
        "文章1"
    ]
}
*/