深拷贝 - MDN Web 文档术语表:Web 相关术语的定义 | MDN
浅拷贝 - MDN Web 文档术语表:Web 相关术语的定义 | MDN
深拷贝和浅拷贝
- 浅拷贝:创建一个新对象,这个对象有着原始对象属性值的副本。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是引用类型,拷贝的就是内存地址,因此新旧对象还是共享同一个引用类型的对象。在 JavaScript 中,标准的内置对象复制操作(展开语法、
Array.prototype.concat()
、Array.prototype.slice()
、Array.from()
、Object.assign()
和Object.create()
)不创建深拷贝(相反,它们创建浅拷贝)。 - 深拷贝:创建一个新对象,递归地复制原始对象及其所有嵌套对象的属性值,确保新对象与原始对象完全独立。在JavaScript中,只有能够序列化的对象能够存在一种创建深拷贝的方式。使用
JSON.stringify()
将该对象转换为 JSON 字符串,然后使用JSON.parse()
将该字符串转换回(全新的)JavaScript 对象
对于一个存储整数的数组,浅拷贝已经足够,因为整数是基本类型,不会出现引用问题。以下是浅拷贝的示例:
const originalArray = [1, 2, 3, 4, 5];const copiedArray = originalArray.slice(); // 浅拷贝copiedArray[0] = 10;console.log(originalArray); // [1, 2, 3, 4, 5]console.log(copiedArray); // [10, 2, 3, 4, 5]
在这个例子中,originalArray
和 copiedArray
是完全独立的数组,修改 copiedArray
不会影响 originalArray
。
(function main() {const originalArray = [1, 2, 3, 4, 5];const copy = originalArray;// 直接引用const copy_by_slice = originalArray.slice(); // 浅拷贝,但是由于是基本类型,所以浅拷贝与深拷贝一致console.log('originalArray',originalArray);copy[0] = 666;console.log('originalArray-new',originalArray);console.log('copy',copy);console.log('copy_by_slice',copy_by_slice);
}());