JS学习笔记（九）深拷贝&浅拷贝【Array、Object为例】

JS学习笔记（九）

本系列更多文章，可以查看专栏 JS学习笔记

---

---

一、赋值&复制

此部分赋值和复制的区别，仅针对引用类型

let arr = [1, 3, 5, 7, 9];
// 赋值，没有创建新对象
let arr2 = arr;
// 复制，会创建一个新对象
let arr3 = arr.slice();

// 输出数组
console.log("arr:", arr);
console.log("赋值arr2:", arr2);
console.log("复制arr3:", arr3);
// 比较数组对象
console.log("arr === arr2:", arr === arr2);
console.log("arr === arr3:", arr === arr3);

输出结果如下图所示：

区别：

• 1.赋值： 仅仅将arr开辟的空间，给arr2进行共享
• 2.复制： 重新为数组存储的元素开辟空间，只是元素值相同

深拷贝和浅拷贝，对于数组元素为原始类型（Number、String等）时，没有什么区别，区别在于元素为对象类型。

---

二、浅拷贝(shallow copy)

一般来说，
（1）原始类型(Number、String、BinInt、Null、Undefined、Boolean)的值存储在栈内存中（闭包除外）；
（2）引用类型（Array、Function、Object），值一般存储在堆内存中（JS不允许直接访问堆内存）。

1. 什么是浅拷贝

浅拷贝，指会对引用类型对象本身进行复制，但不会复制对象内部的属性或元素。
注： 如果引用类型对象是数组类型，且其中存储的数据类型是原始类型，则浅拷贝或深拷贝效果一致【将在本文最后进行展示】

2. 数组的浅拷贝

（1）介绍

const arr = [{ name: "张三" }, { name: "李四" }];
const arr2 = arr.slice();
// 输出数组
console.log(arr);
console.log(arr2);
// 比较数组引用值
console.log("arr === arr2", arr === arr2);
// 比较数组属性值
console.log("arr[0] === arr2[0]", arr[0] === arr2[0]);
console.log("arr[1] === arr2[1]", arr[1] === arr2[1]);

数组的浅拷贝，如下图所示：

观察上图运行结果可知，浅拷贝仅会创建一个新数组（新的堆地址）存储原数组的值，本质上内部存储的元素是同一个。

---

（2）数组浅拷贝的常见方法

const arr = [{ name: "张三" }, { name: "李四" }];

方式1：Array.slice()方法

const arr2 = arr.slice();

方式2：Array.prototype.concat()方法

const arr2 = arr.concat();

方式3：ES6拓展运算符...

用途：用于将数组转换成以逗号分隔开的参数序列

const arr2 = [...arr];

方式4：for循环、for-of循环、while循环等

注：以下仅为一维数组示例代码

// for循环
const arr2 = [];
for (let i = 0; i < arr.length; i++) {
	arr2[i] = arr[i];
}

// for-of循环
const arr2 = [];
let i = 0;
for (let value of arr) {
	arr2[i++] = value;
}

// while循环
const arr2 = [];
let i = -1;
while (++i < arr.length) {
	arr2[i] = arr[i];
}

方式5：Object.assign()方法

用途：将一个或多个源对象，复制给目标对象，返回修改后的对象

const arr2 = Object.assign([], arr);

更多常见方法待补充中…

---

2. 对象的浅拷贝的常见方法

本质上与数组的浅拷贝一致

对象浅拷贝测试代码，运行结果如下图所示

const obj = { arr1: [1, 3, 5], arr2: [2, 4, 6] };

方式1：ES6拓展运算符...

const obj2 = { ...obj };

方式2：Object.assign()方法

用途：将一个或多个源对象，复制给目标对象，返回修改后的对象

const obj2 = Object.assign({}, obj);

更多常见方法待补充中…

---

三、深拷贝

1. 什么是深拷贝

深拷贝，指不仅复制引用类型对象本身，还会对对象的属性或元素进行复制
注： 如果引用类型对象是数组类型，且其中存储的数据类型是原始类型，则浅拷贝或深拷贝效果一致【将在本文最后进行展示】

2. 深拷贝介绍

以下为数组类型深拷贝为例，进行简单介绍

const arr = [{ name: "张三" }, { name: "李四" }];
const arr2 = structuredClone(arr);
// 输出数组
console.log(arr);
console.log(arr2);
// 比较数组引用值
console.log("arr === arr2", arr === arr2);
// 比较数组元素
console.log("arr[0] === arr2[0]", arr[0] === arr2[0]);
console.log("arr[1] === arr2[1]", arr[1] === arr2[1]);
// 比较数组元素值
console.log(
	"arr[0].name === arr2[0].name ",
	arr[0].name === arr2[0].name
);

数组的深拷贝，如下图所示：

上图可以看出，不仅对象本身进行了复制，其元素也进行了复制

观察上图运行结果可知，深拷贝不仅引用值会复制，其元素的值也会进行复制，仅有不可修改的原始类型的值及其地址不变。

---

3. 深拷贝的常见方法

const arr = [{ name: "张三" }, { name: "李四" }];

方式1：window.structuredClone()方法【适用于Array和Object】

const arr2 = structuredClone(arr); // window可省略

若对象的属性或者元素为自定义对象，则使用 window.structuredClone() 进行深拷贝后会变成普通对象
方式2：利用JSON.parse()和JSON.stringify()方法【适用于Array和Object】

const arr2 = JSON.parse(JSON.stringify(arr));

更多常见方法待补充中…

---

四、浅拷贝和深拷贝对比

上文中反复提到，当数据类型是原始类型，则浅拷贝或深拷贝效果一致

下文中，以对象中属性为原始类型为例

const obj = { name: "Jack", age: 18 };
// 浅拷贝
const obj2 = Object.assign({}, obj);
// 深拷贝
const obj3 = JSON.parse(JSON.stringify(obj));
// 输出对象
console.log("obj", obj);
console.log("obj2", obj2);
console.log("obj3", obj3);
// 比较对象引用值
console.log("obj === obj2", obj === obj2);
console.log("obj === obj3", obj === obj3);
// 比较对象中的属性值
console.log("obj.name === obj2.name", obj.name === obj2.name);
console.log("obj.name === obj3.name", obj.name === obj3.name);

以上代码，运行效果如下图所示：

---

结尾

部分内容参考《ECMAScript 6 入门》《JavaScript权威指南》《JavaScript高级程序设计》，如有错误，欢迎评论区指正。