本文详细解析JavaScript中变量赋值、浅复制与深复制的核心区别。通过对比原始值与引用值的内存存储机制，阐述[[wp:a0]]操作符与浅复制在对象引用共享上的差异。介绍使用[[wp:a11]]和展开运算符实现浅复制，以及[[wp:a20]]方法实现深复制的原理与局限性，帮助开发者准确处理对象拷贝问题。
前言：
在面试中，浅复制和深复制是高频考点。本文将深入探讨JavaScript中这两种复制方式的具体表现与差异。
一、变量赋值机制
许多人误以为浅复制等同于使用=操作符将变量值赋给另一个变量，但实际上两者存在本质区别。因此，我们需要先厘清变量赋值的基本原理。
1.1 原始值与引用值的存储差异
原始值（primitive value）包括Undefined、Null、Boolean、Number、String、BigInt和Symbol类型。这类数据按值访问，变量直接存储实际数据内容，操作变量即操作其内部存储的值。
引用值（reference value）主要指Object类型。由于JavaScript不允许直接访问内存地址，变量实际存储的是指向堆内存中对象的指针（引用）。操作对象时，是通过该引用来访问内存中的对象，而非直接操作内存空间本身。
1.2 赋值行为分析
此处讨论的赋值特指通过变量将一个值传递给另一个变量，而非直接将字面量（如{}或false）赋给变量。
对于原始值，赋值操作会将实际值复制到新变量的存储空间中。
let num1 = 5;
let num2 = num1;
console.log(num1, num2); // 5 5
num2 = 4;
console.log(num1, num2); // 5 4例如num2通过num1被赋值为5，两者存储相同的原始值。由于原始值按值存储，修改其中一个变量不会影响另一个，它们相互独立。
具体赋值过程如下：
对于引用值，赋值操作复制的是指向堆内存中对象的指针。赋值后，两个变量指向同一个对象。因此，通过任一变量修改对象属性，都会反映在另一个变量上，因为它们操作的是同一份数据。
let obj1 = {};
let obj2 = obj1;
console.log(obj1); // {}
console.log(obj2); // {}
obj1.name = 'haha';
console.log(obj1); // { name: 'haha' }
console.log(obj2); // { name: 'haha' }
obj1.age = 24;
console.log(obj1); // { name: 'haha', age: 24 }
console.log(obj2); // { name: 'haha', age: 24 }如上代码，通过obj1将指向对象的引用赋值给obj2后，obj1和obj2保存指向同一对象的引用，对对象的操作会相互影响。
具体可见下图：
注：如上两图来自《JavaScript 高级程序设计（第四版）》
接下来要说的浅复制和深复制就是针对引用值而言的。
二、浅复制（Shallow Copy）
参考博客定义：
An object is said to be shallow copied when the source top-level properties are copied without any reference and there exist a source property whose value is an object and is copied as a reference. If the source value is a reference to an object, it only copies that reference value to the target object.
个人理解：浅复制遍历源对象的每个属性。若属性值为原始值，则复制该值；若属性值为对象，则复制该对象的引用。
即：浅复制将复制顶层属性，但嵌套对象在原始（源）和拷贝（目标）之间共享
2.1 原生 JavaScript 中的浅复制
Object.assign()
Object.assign()方法将所有可枚举（Object.propertyIsEnumerable()返回 true）和自有（Object.hasOwnProperty()返回 true）属性从一个或多个源对象复制（浅复制） 到目标对象，返回修改后的对象。
如下代码可以看出，浅复制和变量赋值不同，修改对象的属性值互不影响。
const source = { a: 1, b: 2 };
const objCopied = Object.assign({}, source);
console.log(objCopied); // { a: 1, b: 2 }
source.a = 3;
console.log(source); // { a: 3, b: 2 }
console.log(objCopied); // { a: 1, b: 2 }
objCopied.a = 4;
console.log(source); // { a: 3, b: 2 }
console.log(objCopied); // { a: 4, b: 2 }对象内的嵌套对象在源对象和拷贝对象之间还是共享的，如上代码，修改对象内对象的属性时会相互影响。
const source = { a : {b : 1} };
const objCopied = Object.assign({}, source);
console.log(objCopied); // { a: { b: 1 } }
source.a.b = 3;
console.log(source); // { a: { b: 3 } }
console.log(objCopied); // { a: { b: 3 } }但是注意如下代码中，source.a = {};修改的是源对象中属性的值，这个并不共享。
const source = { a : {b : 1} };
const objCopied = Object.assign({}, source);
console.log(objCopied); // { a: { b: 1 } }
source.a = {};
console.log(source); // { a: {} }
console.log(objCopied); // { a: { b: 1 } }展开运算符（...）：展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
const source = { a : {b : 1}, c: 2 };
const objCopied = {...source}
console.log(objCopied); // { a: { b: 1 }, c: 2 }
source.c = 3;
console.log(source); // { a: { b: 1 }, c: 3 }
console.log(objCopied); // { a: { b: 1 }, c: 2 }
source.a.b = 3;
console.log(source); // { a: { b: 3 }, c: 3 }
console.log(objCopied); // { a: { b: 3 }, c: 2 }2.2 浅复制的手动实现
function shallowClone(source) {
// 如果是原始值，直接返回
if (typeof source !== 'object') {
return source;
}
// 拷贝后的对象
const copied = Array.isArray(source) ? [] : {};
// 遍历对象的key
for(let key in source) {
// 如果key是对象的自有属性
if(source.hasOwnProperty(key)) {
// 复制属性
copied[key] = source[key]
}
}
// 返回拷贝后的对象
return copied;
}三、深复制（Deep Copy）
首先来看深复制的定义：
A deep copy will duplicate every object it encounters. The copy and the original object will not share anything, so it will be a copy of the original.
与浅复制不同，当源对象属性值为对象时，深复制会递归复制该对象本身，而非引用。因此，源对象和拷贝对象之间没有任何共享内容。
2.1 原生 JavaScript 中的深复制
JSON.parse(JSON.stringify(object))
JavaScript 中最常见的深复制的方法就是JSON.parse(JSON.stringify(object))
如下代码所示，深复制中源对象和拷贝对象不共享任何内容，即使是嵌套对象。
let obj = {
a: 1,
b: {
c: 2,
},
}
let newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }2.2 深复制的手动实现
function deepClone(source) {
// 如果是原始值，直接返回
if (typeof source !== 'object') {
return source;
}
// 拷贝后的对象
const copied = Array.isArray(source) ? [] : {};
// 遍历对象的key
for(let key in source) {
// 如果key是对象的自有属性
if(source.hasOwnProperty(key)) {
// 深复制
copied[key] = deepClone(source[key]);
}
}
return copied;
}有关浅复制和深复制的手动实现，这里只是简单实现了一下。其中还有很多细节未实现，具体的实现大家可以参见 lodash 中的实现。
小结
- 赋值操作符是把一个对象的引用赋值给一个变量，所以变量中存储的是对象的引用
- 浅复制是复制源对象的每个属性，但如果属性值是对象，那么复制的是这个对象的引用。所以源对象和拷贝对象之间共享嵌套对象。
- 深复制与浅复制不同的地方在于，如果属性值为对象，那么会复制该对象。源对象和拷贝对象之间不存在共享的内容。
到此这篇关于JavaScript 赋值,浅复制和深复制的区别的文章就介绍到这了,更多相关JS 赋值内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！