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

一、前言：

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

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

二、浅拷贝的几种方式：

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" ] } */