前端JavaScript篇之JavaScript 深浅拷贝?

最新推荐文章于 2025-08-10 11:34:37 发布

原创最新推荐文章于 2025-08-10 11:34:37 发布 · 439 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

前端知识点同时被 2 个专栏收录

196 篇文章

订阅专栏

JavaScript

105 篇文章

订阅专栏

本文详细介绍了JavaScript中的浅拷贝和深拷贝，浅拷贝只复制对象或数组的一层，深拷贝则递归复制所有层级。浅拷贝适用于只需要复制第一层属性的情况，深拷贝则保证完全独立，但可能带来性能问题。

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

JavaScript 深浅拷贝?

JavaScript 中的深拷贝和浅拷贝是处理对象和数组复制时常见的概念。

浅拷贝（Shallow Copy）

浅拷贝只复制对象或数组的第一层内容。这意味着当你对原始对象或数组进行修改时，浅拷贝出来的对象或数组可能会受到影响。浅拷贝通常使用 Object.assign 方法来实现。

例如，假设有一个对象 obj1：

const obj1 = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
}

// 使用浅拷贝
const obj2 = Object.assign({}, obj1)

// 修改原始对象的属性值
obj1.age = 31
obj1.address.city = 'San Francisco'

console.log(obj2.age) // 30，因为是浅拷贝，只复制了第一层属性
console.log(obj2.address.city) // 'San Francisco'，因为浅拷贝中的嵌套对象仍指向同一内存地址

请添加图片描述

深拷贝（Deep Copy）

深拷贝会递归复制所有层级的内容，确保复制的对象或数组与原始数据完全独立，不会相互影响。一个常见的实现方式是使用 JSON.parse(JSON.stringify(object))。

例如，对同样的 obj1 对象进行深拷贝：

const obj1 = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
}
const obj3 = JSON.parse(JSON.stringify(obj1))

// 修改原始对象的属性值
obj1.age = 32
obj1.address.city = 'Los Angeles'

console.log(obj3.age) // 30，因为是深拷贝，与原始数据完全独立
console.log(obj3.address.city) // 'San Francisco'，因为深拷贝已经创建了全新的对象

请添加图片描述

注意

深拷贝虽然能够完全复制对象，但可能会导致性能问题，特别是当处理大型对象或包含循环引用时。
深拷贝过程中，函数、正则表达式、Date 对象等特殊类型可能会丢失原始对象的一些特性，需要额外处理。

在实际开发中，根据数据结构和复制需求选择适合的拷贝方式是很重要的。如果只需复制对象的第一层属性，浅拷贝就足够了；如果需要完全独立的副本，就需要使用深拷贝。

持续学习总结记录中，回顾一下上面的内容：
浅拷贝只复制对象或数组的第一层内容，当原始数据改变时，浅拷贝的数据也会受影响；而深拷贝会递归复制所有层级的内容，确保复制的对象或数组与原始数据完全独立，不会相互影响。如果只需复制第一层属性，用浅拷贝；如果需要完全独立的副本，用深拷贝。浅拷贝通过Object.assign解决，深拷贝可以通过 JSON.parse(JSON.stringify(object)) 来解决。