Skip to main content

JavaScript的深拷贝浅拷贝

· 2 min read
fish

JavaScript深拷贝浅拷贝

JavaScript 数据类型分为两种:

  • 基础类型:像Number、String、Boolean等
  • 引用类型:像Object、Array、Function等

浅拷贝只是复制了对象的引用地址,两个对象指向同一个内存地址,所以修改其中任意的值,另一个值都会随之变化。Array.prototype.slice/concatObject.assign 扩展运算符... 都是浅拷贝

var obj = { a: 1, b: { foo: 'foo' } };
var newObj = {...obj}; // 或 var newObj = Object.assign({}, obj);
newObj.b.foo = 0;
console.log(obj); // { a: 1, b: { foo: 0 } };

与之对应的就是深拷贝,深拷贝就是指完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。

JSON.parse( JSON.stringify(obj) ) 可以简单粗暴的作为深拷贝,但不能拷贝函数

自己实现一个深拷贝

var deepCopy = function(obj) {
if (typeof obj !== 'object') return;
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}

一般在开发中会引用第三方工具库,会提供深拷贝方法 如 lodash的_.cloneDeep, jquery的$.extend, immutable的数据转换等