深浅拷贝? - 技术栈

一、定义：

浅拷贝：只复制对象的第一层属性，若第一层属性是引用类型（如对象、数组），则复制其内存地址，修改拷贝后的嵌套对象会影响原对象。

深拷贝：递归复制对象的所有层级，生成完全独立的副本

二、浅拷贝实现

1.Object.assign()

javascript 复制代码

const obj = { a: 1, b: { c: 2 } }; 
const clone = Object.assign({}, obj); // 浅拷贝 
clone.b.c = 3; // 原对象的 b.c 也会变为 3 
console.log("obj: ", obj) 
console.log("clone: ", clone)

2.展开运算符

javascript 复制代码

const arr = [1, 2, 3]; 
const newArr = [...arr]; // 浅拷贝 
newArr[2] = 4; 
console.log("arr: ", arr) 
console.log("newArr: ", newArr)

javascript 复制代码

const arr = [1, 2, { a: 3 }]; 
const newArr = [...arr]; // 浅拷贝 
newArr[2].a = 4; // 原数组的 { a: 3 } 变为 { a: 4 } 
console.log("arr: ", arr) 
console.log("newArr: ", newArr)

3.数组方法：slice, concat

slice:

javascript 复制代码

const arr = [1, 2, { a: 3 }]; 
const newArr = arr.slice(); // 浅拷贝 
newArr[2].a = 4 
console.log("arr: ", arr) 
console.log("newArr: ", newArr)

concat:

javascript 复制代码

const arr = [1, 2, { a: 3 }]; 
const newArr = arr.concat(); // 浅拷贝 
newArr[2].a = 4 
console.log("arr: ", arr) 
console.log("newArr: ", newArr)

三、深拷贝

1.JSON 方法

javascript 复制代码

const obj = { a: 1, b: { c: 2 } }; 
const clone = JSON.parse(JSON.stringify(obj)); // 深拷贝 
clone.b.c = 4 
console.log("obj", obj) 
console.log("clone", clone)

2.第三方库

javascript 复制代码

// Lodash 
const _ = require('lodash'); 
const clone = _.cloneDeep(obj);