使用vanilla javascript复制JS对象
基础概念
在JavaScript中，对象是引用类型，这意味着当你将一个对象赋值给另一个变量时，实际上是将对象的引用（内存地址）复制给了新变量。因此，如果你直接复制一个对象，修改其中一个变量的属性，另一个变量的属性也会被修改。这就是所谓的“浅拷贝”。
相关优势
- 深拷贝：能够创建一个完全独立的对象副本，修改副本不会影响原对象。
- 浅拷贝：在某些情况下，如果你只需要复制对象的第一层属性，浅拷贝会更高效。
类型
- 浅拷贝：
- 使用
Object.assign()方法。 - 使用扩展运算符（
...）。
- 使用
- 深拷贝：
- 使用
JSON.parse(JSON.stringify(obj))（有局限性，不能处理函数、循环引用等）。 - 使用递归函数实现深拷贝。
- 使用第三方库，如Lodash的
_.cloneDeep()方法。
- 使用
应用场景
- 浅拷贝：当你需要复制一个对象，并且只修改第一层属性时。
- 深拷贝：当你需要创建一个完全独立的对象副本，或者对象内部包含嵌套对象时。
示例代码
浅拷贝
// 使用Object.assign()
const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.a = 3;
shallowCopy.b.c = 4;
console.log(original); // { a: 1, b: { c: 4 } }
console.log(shallowCopy); // { a: 3, b: { c: 4 } }
// 使用扩展运算符
const shallowCopy2 = { ...original };
shallowCopy2.a = 5;
shallowCopy2.b.c = 6;
console.log(original); // { a: 1, b: { c: 6 } }
console.log(shallowCopy2); // { a: 5, b: { c: 6 } }深拷贝
// 使用JSON.parse(JSON.stringify(obj))
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.a = 7;
deepCopy.b.c = 8;
console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 7, b: { c: 8 } }
// 使用递归函数实现深拷贝
function deepClone(obj) {
if (typeof obj !== 'object' || obj === null) return obj;
const clone = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key]);
}
}
return clone;
}
const deepCopy2 = deepClone(original);
deepCopy2.a = 9;
deepCopy2.b.c = 10;
console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy2); // { a: 9, b: { c: 10 } }遇到的问题及解决方法
问题：使用JSON.parse(JSON.stringify(obj))进行深拷贝时，无法处理函数、循环引用等。
原因：JSON.stringify()方法在序列化对象时会忽略函数和undefined，并且会抛出循环引用的错误。
解决方法：
- 使用递归函数实现深拷贝，可以处理函数和循环引用。
- 使用第三方库，如Lodash的
_.cloneDeep()方法。
// 使用Lodash的_.cloneDeep()方法
const _ = require('lodash');
const original = { a: 1, b: { c: 2 }, d: function() {} };
const deepCopy3 = _.cloneDeep(original);
deepCopy3.a = 11;
deepCopy3.b.c = 12;
console.log(original); // { a: 1, b: { c: 2 }, d: [Function: d] }
console.log(deepCopy3); // { a: 11, b: { c: 12 }, d: [Function: d] }参考链接
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
