js 克隆一个对象

在JavaScript中，克隆一个对象通常指的是创建一个新的对象，并将原始对象的属性复制到新对象上。以下是一些克隆对象的方法：

1. 浅拷贝（Shallow Clone）

浅拷贝只复制对象的顶层属性，如果属性是引用类型，则复制的是引用，而不是实际的对象。

方法一：Object.assign()

const originalObj = { a: 1, b: { c: 2 } };
const clonedObj = Object.assign({}, originalObj);

console.log(clonedObj); // { a: 1, b: { c: 2 } }

方法二：展开运算符（Spread Operator）

const originalObj = { a: 1, b: { c: 2 } };
const clonedObj = { ...originalObj };

console.log(clonedObj); // { a: 1, b: { c: 2 } }

2. 深拷贝（Deep Clone）

深拷贝会复制对象的所有属性以及属性指向的对象，直到所有的嵌套对象都被复制为止。

方法一：JSON.parse() 和 JSON.stringify()

const originalObj = { a: 1, b: { c: 2 } };
const clonedObj = JSON.parse(JSON.stringify(originalObj));

console.log(clonedObj); // { a: 1, b: { c: 2 } }

注意：这种方法不能复制函数、RegExp对象、Date对象、undefined、Infinity、-Infinity、NaN和字符串中的函数等。

方法二：使用第三方库，如lodash

const _ = require('lodash');
const originalObj = { a: 1, b: { c: 2 } };
const clonedObj = _.cloneDeep(originalObj);

console.log(clonedObj); // { a: 1, b: { c: 2 } }

应用场景

数据备份：在修改对象之前，克隆一份原始数据作为备份。
避免副作用：在函数式编程中，为了避免修改传入的对象，通常会克隆一份。
并行处理：在多线程或异步处理中，克隆对象可以避免数据竞争。

可能遇到的问题及解决方法

问题一：克隆后的对象与原对象共享引用类型属性

原因：使用浅拷贝方法时，如果对象的属性是引用类型（如数组、对象），则复制的是引用，而不是实际的对象。

解决方法：使用深拷贝方法，如JSON.parse(JSON.stringify(obj))或第三方库（如lodash的_.cloneDeep方法）。

问题二：无法复制特殊对象

原因：使用JSON.parse(JSON.stringify(obj))方法时，无法复制函数、RegExp对象、Date对象等特殊对象。

解决方法：使用第三方库（如lodash的_.cloneDeep方法），或者手动实现深拷贝逻辑，针对特殊对象进行特殊处理。

示例代码

// 浅拷贝示例
const originalObj = { a: 1, b: { c: 2 } };
const shallowClonedObj = Object.assign({}, originalObj);
shallowClonedObj.b.c = 3;

console.log(originalObj.b.c); // 3，因为浅拷贝共享引用

// 深拷贝示例
const deepClonedObj = JSON.parse(JSON.stringify(originalObj));
deepClonedObj.b.c = 4;

console.log(originalObj.b.c); // 2，因为深拷贝不共享引用

通过以上方法，你可以根据具体需求选择合适的克隆方式。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 克隆一个对象

1. 浅拷贝（Shallow Clone）

方法一：Object.assign()

方法二：展开运算符（Spread Operator）

2. 深拷贝（Deep Clone）

方法一：JSON.parse() 和 JSON.stringify()

方法二：使用第三方库，如lodash

应用场景

可能遇到的问题及解决方法

问题一：克隆后的对象与原对象共享引用类型属性

问题二：无法复制特殊对象

示例代码

相关·内容

JS加密，有这一个网站就够了。

027_EGov教程_面向对象的JS

111.尚硅谷_JS基础_事件对象

66.尚硅谷_JS基础_原型对象

67.尚硅谷_JS基础_原型对象

81.尚硅谷_JS基础_Date对象

07.尚硅谷_JS高级_对象.avi

AJAX教程-29-js中转换json对象

46.尚硅谷_JS基础_对象的简介

50.尚硅谷_JS基础_对象字面量

实例演示，2分钟掌握一个新技能：JS压缩混淆

47.尚硅谷_JS基础_对象的基本操作

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐