es6 对象深拷贝和浅拷贝

最新推荐文章于 2025-05-24 01:10:42 发布

原创最新推荐文章于 2025-05-24 01:10:42 发布 · 2w 阅读

10 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

32 篇文章

订阅专栏

本文深入探讨了在JavaScript中实现深拷贝和浅拷贝的不同方法，包括使用Object.assign(), 结构赋值及JSON.stringify()和JSON.parse()进行对象拷贝的区别。通过实例演示了各种拷贝方式的效果，帮助开发者理解并正确应用拷贝技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：在项目中，为了不影响原有数据，在操作数据时，经常需要深拷贝一个对象，在开发过程中，实践得出。

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。



const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);
console.log(object2);

> Object { c: 3, d: 5, a: 1, b: 2 }

这是浅拷贝，返回的不是一个新对象，而是把一个或多个源对象添加到目标对象

结构赋值




let object1 = {
  a: 1,
  b: 2,
  c: 3
};

let object2 = {...object1};
object1.a=11;

console.log(object2);
> Object { a: 1, b: 2, c: 3 }

仿佛好像深拷贝，但是如果object1嵌套了一层对象，就发现会互相影响了。
let object1 = {
  a: 1,
  b: 2,
  c: {a:1,b:2}
};
 
let object2 = {...object1};
object1.c.a=11;

> Object {a: 1, b: 2, c: {a: 11, b: 2}}

所以这也是浅拷贝

最简单的深拷贝(JSON.stringify() 和JSON.parse())
先把对象使用JSON.stringify()转为字符串，再赋值给另外一个变量，然后使用JSON.parse()转回来即可。

let object1 = {
  a: 1,
  b: 2,
  c: 3
};

let object2 =JSON.parse( JSON.stringify(object1));
object2.a=11;

console.log(object1,object2);

> Object { a: 1, b: 2, c: 3 } Object { a: 11, b: 2, c: 3 }