JavaScript对象深拷贝与浅拷贝实现详解
作者:代码拾荒时间:2026-10-25 01:30:11浏览:202
本文详细解析JavaScript中对象复制的两种主要方式:浅拷贝与深拷贝。浅拷贝通过Object.assign或扩展运算符实现,仅复制第一层属性;深拷贝则利用JSON序列化或递归算法处理嵌套对象。文章重点说明了JSON方法对Date、函数等类型的限制,以及递归实现中的类型判断逻辑,帮助开发者根据实际需求选择合适的拷贝策略。
一、浅拷贝
1、Object.assign(target,source,source...)
a、支持多个对象进行复制操作
b、若source与target属性同名,source将覆盖target的属性
c、target必须为Object类型对象
var obj = {a:1,b:2}
undefined
Object.assign({c:3},obj)
{c: 3, a: 1, b: 2}
obj
{a: 1, b: 2}
兼容性写法if(Object.assign){//兼容}else{//不兼容}
2、扩展运算符(spread)
支持将多个对象合并复制至单一对象中
var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };
var copySpread = { ...obj1, ...obj2 }; // Object {foo: "foo", bar: "bar"}
copySpread
{foo: "foo", bar: "bar"}
var obj = {a:1,b:2,c:3}
var objs = {...obj}
objs
{a: 1, b: 2, c: 3}
objs.a=10
10
objs
{a: 10, b: 2, c: 3}
obj
{a: 1, b: 2, c: 3}
二、深拷贝
1、利用JSON.stringify()与JSON.parse()进行对象序列化
注意:此方法仅适用于原对象包含可序列化值类型且无循环引用的情况。不可序列化的值类型示例包括Date对象,JSON.parse()仅能将其解析为字符串,无法还原为原始Date对象,或属性值为function的情况
var obj = {a:1,b:[1,2,3],c:{e:3},bool:false}
undefined
var objs = JSON.parse(JSON.stringify(obj))
undefined
objs
{a: 1, b: Array(3), c: {…}, bool: false}
objs.bool = true
true
objs
{a: 1, b: Array(3), c: {…}, bool: true}
obj
{a: 1, b: Array(3), c: {…}, bool: false}
2、通过递归方式判断对象属性
function deepClone(obj) {
var copy;
// 如果 obj 是 null、undefined 或 不是对象,直接返回 obj
// Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}
// Handle Function
if (obj instanceof Function) {
copy = function() {
return obj.apply(this, arguments);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}
以上就是JS对象复制(深拷贝和浅拷贝)的详细内容,更多关于JS的资料请关注本站其它相关文章!
作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
