JavaScript对象与数组的几种常见复制方法

 更新时间:2024年10月21日 08:35:08   作者:喝拿铁写前端  
在 JavaScript 开发中,对象和数组的复制是一个非常常见的操作,无论是函数参数传递、状态管理,还是避免不必要的副作用,了解和掌握各种复制方式至关重要,我们将系统梳理 JavaScript 中的几种常见复制方法,并对其应用场景进行详细说明,需要的朋友可以参考下

一、引用赋值:简单高效的数据共享

概念:引用赋值是 JavaScript 中最简单的操作。它不会真正创建对象的副本,而是让新的变量与原变量共享同一个内存地址。当你修改新变量时,原变量的数据也会被修改。

代码示例:

let person = { name: "Alice", age: 25 };
let newPerson = person;
newPerson.age = 30;
console.log(person.age);  // 输出 30

适用场景:

  • 在内存和性能上有要求时,可以避免不必要的复制。
  • 需要共享数据或保持同步的场景,如状态管理或配置共享。

优点:

  • 高效、节省内存。

缺点:

  • 修改新变量会影响原对象,容易引发副作用。

二、浅拷贝:复制顶层属性

浅拷贝创建一个新对象,复制原对象的顶层属性,但如果属性是引用类型(如对象、数组),它们仍然指向原来的内存地址。

1. 扩展运算符 ...

代码示例:

let person = { name: "Alice", age: 25, details: { city: "New York" } };
let newPerson = { ...person };
newPerson.details.city = "Los Angeles";
console.log(person.details.city);  // 输出 "Los Angeles"

适用场景:

  • 对象结构简单,或仅需浅层修改的情况。

2. Object.assign()

Object.assign() 也是一种浅拷贝方式,适用于将多个对象合并到目标对象。

代码示例:

let target = { a: 1 };
let source = { b: 2 };
let newObject = Object.assign(target, source);

适用场景:

  • 当你需要将多个对象合并时,尤其适合对象合并操作。

3. Array.prototype.slice() 和 concat()

对于数组,可以使用 slice() 或 concat() 来创建浅拷贝。

代码示例:

let arr = [1, 2, 3];
let shallowCopy = arr.slice();

适用场景:

  • 适合处理简单数组,不涉及深层次数据。

三、深拷贝:完整的对象复制

深拷贝是指对对象或数组进行递归复制,确保所有层级的嵌套对象都有独立的副本。修改新对象不会影响原对象。

1. 递归实现深拷贝

代码示例:

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepClone(obj[key]);
        }
    }
    return copy;
}

适用场景:

  • 当对象结构复杂,需要完全独立的副本时。

2. JSON.parse(JSON.stringify())

这种方式可以快速实现深拷贝,但它有一些局限性,如无法复制函数、DateRegExp 等特殊类型。

代码示例:

let original = { a: 1, b: { c: 2 } };
let copy = JSON.parse(JSON.stringify(original));

适用场景:

  • 适合简单的对象结构,不包含特殊类型。

3. structuredClone()

structuredClone() 是一种更高级的深拷贝方法,可以处理 DateMapSet 等复杂对象类型。

代码示例:

let original = { a: 1, b: new Date(), c: new Map([[1, 'one']]) };
let copy = structuredClone(original);

适用场景:

  • 需要复制复杂对象,包括 MapSet 等高级数据结构。

四、特殊数据类型的复制方法

1. Object.create()

Object.create() 用于创建一个新的对象,该对象继承自指定的原型对象,而不是复制原对象的属性。

代码示例:

let person = { name: "Alice", age: 25 };
let newPerson = Object.create(person);

适用场景:

  • 用于原型继承,而不是单纯复制。

2. Map 和 Set 的复制

Map 和 Set 提供直接构造函数,可以创建它们的浅拷贝。

代码示例:

let originalMap = new Map([[1, 'one']]);
let copyMap = new Map(originalMap);

适用场景:

  • 需要复制 Map 或 Set 时,适合浅拷贝操作。

五、冻结对象:防止对象修改

虽然不是一种拷贝方式,但 Object.freeze() 可以防止对象的属性被修改。这是一种浅冻结,嵌套对象仍然可以修改。

代码示例:

let obj = { name: "Alice", details: { age: 25 } };
Object.freeze(obj);

适用场景:

  • 需要防止对象被修改时,尤其适合配置或常量对象。

六、总结与最佳实践

在 JavaScript 中,不同的复制方式适用于不同的场景。以下是总结:

  • 引用赋值:高效、内存占用少,但会产生副作用,适合数据共享。
  • 浅拷贝:适用于简单对象或数组,性能较好,但无法处理深层嵌套对象。
  • 深拷贝:适用于复杂对象的完全复制,保证数据独立,但性能开销较大。
  • 特殊数据类型的复制:针对 MapSetDate 等复杂类型,选择合适的复制方式。
  • 冻结对象:适用于需要确保对象不可修改的场景,如配置文件或常量。

在实际项目中,选择合适的复制方式可以大幅提升代码的效率和可维护性。针对不同的需求,深度理解这些方法的适用场景,能够帮助你编写出更加健壮、可维护的代码。

通过这篇文章,我们梳理了 JavaScript 中从引用赋值到深拷贝的各种方法及其应用场景。我们在开发过程中,需要灵活选择合适的方式,确保数据的有效管理和高效处理。

以上就是JavaScript对象与数组的几种常见复制方法的详细内容,更多关于JavaScript对象与数组复制的资料请关注脚本之家其它相关文章!

相关文章

  • 使用SpreadJS快速清除Excel中工作表保护密码

    使用SpreadJS快速清除Excel中工作表保护密码

    这篇文章主要为大家介绍了使用SpreadJS快速清除Excel中工作表保护密码方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • 基于js 各种排序方法和sort方法的区别(详解)

    基于js 各种排序方法和sort方法的区别(详解)

    下面小编就为大家分享一篇基于js 各种排序方法和sort方法的区别(详解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript实现京东购物放大镜和选项卡效果的方法分析

    JavaScript实现京东购物放大镜和选项卡效果的方法分析

    这篇文章主要介绍了JavaScript实现京东购物放大镜和选项卡效果的方法,结合实例形式分析了javascript基于事件响应、数值计算与页面元素动态修改实现图片放大功能以及tab选项卡切换效果相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • JavaScript数据存储 Cookie篇

    JavaScript数据存储 Cookie篇

    这篇文章主要为大家介绍了JavaScript数据存储 Cookie篇,感兴趣的朋友可以参考一下
    2016-07-07
  • ECharts多图表联动功能的实现过程

    ECharts多图表联动功能的实现过程

    echarts是非常好用的图表插件,下面这篇文章主要给大家介绍了关于ECharts多图表联动功能的相关资料,需要的朋友可以参考下
    2021-06-06
  • 微信小程序之下拉列表实现方法解析(附完整源码)

    微信小程序之下拉列表实现方法解析(附完整源码)

    这篇文章主要介绍了微信小程序之下拉列表实现方法解析(附完整源码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS图片无缝滚动(简单利于使用)

    JS图片无缝滚动(简单利于使用)

    现在又想做一个无缝滚动了,所以在网上找啊找,好多都是相同的,而且调试复杂,好多都不能动,也懒得去细看,终于让我发现了这个,希望能帮到别人:
    2013-06-06
  • js实现数字拼图

    js实现数字拼图

    这篇文章主要为大家详细介绍了js实现数字拼图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js history对象简单实现返回和前进

    js history对象简单实现返回和前进

    返回和前进大家应该不陌生吧,浏览器上面的返回和前进按钮大家浏览网页时都会应到的,下面就为大家介绍下js中是如何实现所谓的返回和前进
    2013-10-10
  • jQuery 的 ready()的纯js替代方法

    jQuery 的 ready()的纯js替代方法

    这篇文章主要介绍了jQuery 的 ready()的纯js替代方法的相关资料,需要的朋友可以参考下
    2016-11-11

最新评论