Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
javascript如何复制一个数组_创想鸟

javascript如何复制一个数组

在javascript中复制数组不能直接用等号赋值,因为数组是引用类型,直接赋值只会复制内存地址,导致新旧数组相互影响。1. 使用展开运算符 […originalarray] 是最简洁现代的浅拷贝方法;2. array.from(originalarray) 和 slice() 也能实现浅拷贝,效果类似;3. concat() 通过空数组连接原数组实现复制;这些方法均为浅拷贝,即新数组中的引用类型元素仍共享原数组的引用,修改嵌套对象会影响原数组。4. 深拷贝需用 json.parse(json.stringify()) 或递归函数(如lodash的 _.clonedeep()),以彻底分离所有嵌套结构。选择方法应根据是否需要深拷贝及数据复杂度决定,性能差异在常规场景下可忽略,推荐优先考虑代码可读性与适用性。

javascript如何复制一个数组

在JavaScript里,如果你想复制一个数组,可不是简单地用等号赋值就能搞定的。你需要明确地告诉JavaScript,你要一个新的数组,并且把原数组里的所有元素都搬过来。这样做才能确保你修改新数组时,不会意外地影响到原来的那个。

javascript如何复制一个数组

复制数组的方法有很多,每种都有它适用的场景和一些需要注意的小细节。我个人最常用的,也是现在前端开发里非常流行且简洁的方式,就是使用展开运算符(spread syntax)。比如,你有一个

originalArray

,想复制一份,直接

const newArray = [...originalArray];

就可以了。这行代码的背后,是JavaScript创建了一个全新的数组,然后把

originalArray

里的每一个元素“展开”并填充到这个新数组里。

当然,还有其他一些经典方法:

立即学习“Java免费学习笔记(深入)”;

javascript如何复制一个数组

Array.from()

:这个方法非常灵活,它能从一个类数组对象或可迭代对象创建一个新的、浅拷贝的数组实例。对于数组来说,

const newArray = Array.from(originalArray);

效果和展开运算符类似,同样是创建了一个新数组。

slice()

:这是数组原型上的一个方法,当不带任何参数调用时,

originalArray.slice()

会返回原数组的一个浅拷贝。

const newArray = originalArray.slice();

简单直接,也是很多老项目里常见的写法。

concat()

:虽然

concat

主要用于连接数组,但当它与一个空数组结合时,也能实现复制的效果。

const newArray = [].concat(originalArray);

同样会返回一个新数组,包含原数组的所有元素。

这些方法都属于“浅拷贝”,这意味着如果你的数组里嵌套了对象或其他数组,那么这些嵌套的引用类型数据在复制后,新旧数组仍然会共享同一个引用。这一点,在实际开发中非常重要,也是很多初学者容易踩坑的地方。

为什么直接赋值不行?理解引用与值类型

你可能会好奇,为啥不能直接

let newArr = oldArr;

呢?这其实是JavaScript数据类型的一个核心概念在作祟。在JavaScript中,数据类型大致分为两类:基本类型(如字符串、数字、布尔值、null、undefined、Symbol、BigInt)和引用类型(主要是对象、数组和函数)。

javascript如何复制一个数组

当你对一个基本类型变量进行赋值时,比如

let a = 10; let b = a;

b

会得到

a

的一个副本,它们是完全独立的。你修改

b

不会影响

a

但数组是引用类型。当你写

let newArr = oldArr;

时,

newArr

并没有得到

oldArr

的一个副本,它只是得到了

oldArr

所指向的那个内存地址。简单来说,

newArr

oldArr

现在都指向了内存中的同一个数组。这就好比你给同一个文件夹起了两个不同的名字,无论你通过哪个名字去修改文件夹里的内容,实际修改的都是同一个地方。

举个例子:

const original = [1, 2, { name: 'Alice' }];const assigned = original; // 直接赋值assigned.push(4);assigned[0] = 99;assigned[2].name = 'Bob'; // 修改嵌套对象console.log(original); // 输出: [99, 2, { name: 'Bob' }, 4]console.log(assigned); // 输出: [99, 2, { name: 'Bob' }, 4]// 它们完全一样,因为指向的是同一个数组

这种行为在某些场景下可能正是你想要的,比如你希望两个变量始终同步更新。但更多时候,尤其是在处理数据时,我们希望拥有一个独立的数据副本,避免“牵一发而动全身”的副作用。这就是为什么我们需要明确地进行数组复制操作的原因。

浅拷贝与深拷贝:何时需要更彻底的复制?

前面提到的展开运算符、

slice()

Array.from()

concat()

都属于浅拷贝。它们能很好地处理数组中包含基本类型元素的情况,因为这些基本类型的值会被直接复制。然而,一旦数组中出现了对象或另一个数组(即引用类型),浅拷贝就显得力不从心了。

浅拷贝的本质是:它创建了一个新数组,但如果原数组的元素是引用类型(比如对象或数组),那么新数组中对应的元素仍然是原引用类型元素的引用。换句话说,它们指向的是内存中的同一个对象或数组。

const originalArray = [1, { a: 1 }, [2, 3]];const shallowCopy = [...originalArray];shallowCopy[0] = 100; // 修改基本类型,互不影响shallowCopy[1].a = 200; // 修改嵌套对象属性,原数组也会受影响shallowCopy[2].push(4); // 修改嵌套数组,原数组也会受影响console.log(originalArray); // 输出: [1, { a: 200 }, [2, 3, 4]]console.log(shallowCopy);   // 输出: [100, { a: 200 }, [2, 3, 4]]

可以看到,虽然

shallowCopy

是一个新数组,但它内部的

{ a: 1 }

[2, 3]

仍然是和

originalArray

共享的。

那么,何时需要深拷贝呢?当你需要一个完全独立的数据副本,包括所有嵌套的对象和数组都不能与原数据有任何关联时,你就需要深拷贝。这在处理复杂的配置对象、状态管理(如Redux中不可变状态的更新)、或者需要回溯数据历史的场景中非常常见。

实现深拷贝的方法通常有:

JSON.parse(JSON.stringify(object))

:这是最简单粗暴,也最常用的深拷贝方法。它先把对象序列化成JSON字符串,再反序列化回来,这样就切断了所有引用。

优点:简单,一行代码搞定。缺点:无法处理函数、

undefined

Symbol

BigInt

类型的数据(它们会在序列化时丢失)。无法处理循环引用(会报错)。无法处理

Date

对象(会变成字符串)。性能相对较低,尤其是在处理大型复杂对象时。

const originalDeep = [1, { a: 1, b: () => {} }, new Date()];const deepCopyJSON = JSON.parse(JSON.stringify(originalDeep));console.log(deepCopyJSON); // 输出: [1, { a: 1 }, "2023-10-27T...Z"] (函数丢失,日期变字符串)

递归拷贝:对于更复杂的情况,尤其是要处理函数、日期、循环引用等,你需要编写一个递归函数来遍历对象的每一个属性,并根据其类型进行深拷贝。这通常是手写或使用成熟库(如Lodash的

_.cloneDeep()

)的方式。

// 简化版递归深拷贝(不处理循环引用、特殊对象如Date、RegExp等)function deepClone(obj) {    if (obj === null || typeof obj !== 'object') {        return obj;    }    let clone = Array.isArray(obj) ? [] : {};    for (let key in obj) {        if (Object.prototype.hasOwnProperty.call(obj, key)) {            clone[key] = deepClone(obj[key]);        }    }    return clone;}const originalDeepComplex = [1, { a: 1, b: { c: 2 } }];const deepCopyManual = deepClone(originalDeepComplex);deepCopyManual[1].b.c = 99;console.log(originalDeepComplex[1].b.c); // 输出: 2 (原数组未受影响)

选择哪种拷贝方式,完全取决于你的具体需求。对于大多数只包含基本类型或不需要修改嵌套对象的数组,浅拷贝就足够了,而且性能更好。当你需要一个完全独立的数据副本,并且数据结构复杂时,才应该考虑深拷贝。

性能考量:哪种数组复制方法效率更高?

在JavaScript中,不同的数组复制方法在性能上确实存在差异,但对于大多数日常应用场景和中小型数组而言,这些差异通常微乎其微,不足以成为你选择方法的决定性因素。我们更多地会从代码的可读性、简洁性以及是否满足浅拷贝/深拷贝需求来考量。

不过,既然提到了性能,我们还是可以简单聊聊:

展开运算符 (

...

)、

slice()

Array.from()

concat()

:这些浅拷贝方法通常都非常高效。它们在底层实现上都涉及创建一个新数组并迭代原数组元素。现代JavaScript引擎(如V8)对这些操作进行了高度优化,尤其是在处理数组时,它们的性能表现往往不相上下。展开运算符因为其简洁和声明式风格,在很多情况下甚至可能被引擎进一步优化。

我个人在实践中发现,对于大部分场景,选择展开运算符 (

...

) 既能保证性能,又能提供极佳的可读性,是我的首选。它表达意图清晰:“我要一个和这个数组一样的新数组”。

JSON.parse(JSON.stringify(array))

:这种深拷贝方法在性能上通常会比浅拷贝方法慢很多,尤其是在处理大型或深度嵌套的数组/对象时。这是因为它涉及到两个阶段:先将整个对象序列化为字符串(CPU密集型操作),再将字符串解析回对象(同样是CPU密集型操作)。这种开销在数据量大时会变得非常明显。

递归深拷贝(手写或库函数如Lodash

cloneDeep

:这类方法性能介于浅拷贝和

JSON.parse(JSON.stringify())

之间,具体取决于实现复杂度和数据结构。它们通常比

JSON.parse(JSON.stringify())

更灵活,可以处理更多数据类型,但也会有递归调用的开销。对于需要处理复杂数据结构且注重性能的场景,专业的深拷贝库通常会做得更好,因为它们会考虑各种边缘情况和优化策略。

总结一下我的看法:

除非你正在处理数万甚至数十万级别的数组元素,并且对性能有极致要求(这种情况下你可能需要进行性能基准测试),否则,选择浅拷贝方法时,你大可不必纠结于它们之间那微小的性能差异。更重要的是选择一个让你和你的团队成员都能快速理解、易于维护的方法。

对于浅拷贝,我倾向于推荐展开运算符 (

...

),因为它现代、简洁、表达力强。

而对于深拷贝,如果你只是处理纯粹的JSON数据(没有函数、日期等特殊类型),

JSON.parse(JSON.stringify())

确实是最简单的方案。但如果数据结构复杂,或者对性能有较高要求,那么引入像Lodash这样的库,使用其提供的

_.cloneDeep()

会是更稳妥、更专业的选择。

总而言之,理解不同复制方法的原理和它们在浅拷贝/深拷贝上的差异,远比纠结于它们之间的微小性能差距来得重要。选择最适合你当前任务和数据结构的方法,才是王道。

以上就是javascript如何复制一个数组的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1513688.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
javascript数组怎么填充连续数字
上一篇 2025年12月20日 07:54:45
js 如何使用takeWhile从开头获取满足条件的元素
下一篇 2025年12月20日 07:55:04

相关推荐

  • Linux内核13-进程切换

    进程切换,也称为任务切换、上下文切换或任务调度,本文将探讨linux内核中进程切换的实现。我们首先理解几个关键概念。 1.1 硬件上下文 每个进程都有自己的地址空间,但所有进程共享CPU寄存器。因此,在恢复进程执行前,内核必须确保挂起时的寄存器值被重新加载到CPU寄存器中。 这些需要加载到CPU寄存…

    2026年9月22日
    200
  • 如何修改MySQL的默认端口号?

    如何修改MySQL的默认端口号?如何修改MySQL的默认端口号?如何修改MySQL的默认端口号?如何修改MySQL的默认端口号?

    修改mysql默认端口号需编辑配置文件,核心步骤为:1.定位my.cnf或my.ini文件;2.在[mysqld]段落中修改或添加port参数;3.保存后重启mysql服务。更改端口主要出于避免冲突、提升安全性和适应网络策略考虑。连接时需在客户端工具或代码中指定新端口,如命令行加-p参数、编程语言连…

    2026年9月22日 用户投稿
    1200
  • 抖音短视频如何选择合适的BGM?音乐对流量影响有多大?

    抖音短视频如何选择合适的BGM?音乐对流量影响有多大?抖音短视频如何选择合适的BGM?音乐对流量影响有多大?抖音短视频如何选择合适的BGM?音乐对流量影响有多大?抖音短视频如何选择合适的BGM?音乐对流量影响有多大?

    选对bgm能显著提升抖音视频流量。bgm不仅烘托氛围,还影响算法推荐和用户停留;平台通过音乐判断视频类型与受众,节奏感强的音乐提高完播率,增强情绪共鸣促进互动;选音乐需结合内容调性、热门趋势与受众喜好,如搞笑类配明快音乐、美食类用温馨轻音乐,关注热榜与同类账号参考;常见误区包括音量过大、风格不符、盲…

    2026年9月22日 用户投稿
    100
  • 一加Pro系列微信收款语音怎么开启?快速设置支付播报的方法

    首先检查微信内“收款小账本”开启语音播报功能,其次确保手机系统给予微信通知权限、关闭勿扰模式、媒体音量正常,并在电池设置中避免微信后台被限制,同时更新微信至最新版本;若需个性化,可通过系统通知渠道单独设置收款通知的声音与优先级,但无法更换播报音色;使用时注意公共场合隐私保护,务必核对屏幕金额以防误报…

    2026年9月22日
    100
  • PHP匿名函数怎么用_PHP匿名函数使用场景分析

    PHP匿名函数是无名函数,可作为回调或赋值给变量,常用在数组处理、事件回调、逻辑封装等场景,支持use引入外部变量及fn短语法,结合bindTo可访问对象私有成员。 PHP匿名函数,也叫闭包函数(Closure),是一种没有名称的函数,通常作为回调使用或赋值给变量。它在实际开发中非常灵活,尤其适合用…

    2026年9月22日
    100
  • 抖音专营店怎么添加直播号?怎么把新开的抖音号添加到专营店里

    随着抖音平台社交属性不断增强,内容生态日益丰富,越来越多电商从业者开始在该平台上开展业务。其中,抖音专营店作为电商布局的重要一环,也吸引了大量商家入驻。那么,如何将直播号加入抖音专营店中,让直播成为店铺引流和销售的新工具呢?接下来的内容将为您详细介绍。 一、为什么要在抖音专营店中添加直播号 提升店铺…

    2026年9月22日
    000
  • 为什么建议手动定义Java序列化ID

    手动定义serialVersionUID可确保序列化兼容性,避免因类结构变化导致反序列化失败。Java默认生成的ID依赖类名、字段等信息,编译环境或代码微小改动均使其改变,易引发InvalidClassException。显式声明后,可在兼容性变更时主动控制ID更新,保留原ID则允许旧版本读取新对象…

    2026年9月22日
    200
  • VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​

    VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​

    vscode中高效批量追踪数据变化的关键是将监视列表用作表达式求值器,而非仅添加单一变量;2. 可在监视列表中添加复杂对象路径(如user.profile.address.city)、计算表达式(如(a + b) * c)、函数调用(如calculatetotal(items))或条件判断(如myv…

    2026年9月22日 用户投稿
    000
  • mysql安装完如何诊断 mysql慢查询分析与优化方法

    要解决 mysql 慢查询问题,首先要开启慢查询日志,其次使用 mysqldumpslow 分析日志,再通过 explain 查看执行计划,最后根据常见优化建议改进 sql 和索引。具体步骤如下:一、修改配置文件或动态开启慢查询日志,并设置阈值和路径;二、使用 mysqldumpslow 工具分析慢…

    2026年9月22日
    100
  • PHP如何实现视频留言评论_PHP实现视频留言评论功能

    答案:通过数据库设计、前端表单、后端处理和评论展示四步实现PHP视频留言功能。1. 创建comments表存储信息;2. 构建表单提交昵称与评论;3. 用add_comment.php接收并存入数据库;4. 在页面读取并安全输出评论,防止XSS。 要实现视频留言评论功能,PHP可以结合前端页面、数据…

    2026年9月22日
    000
  • Java中如何区分逻辑错误和系统异常

    系统异常是程序运行中由JVM抛出的RuntimeException,如空指针、数组越界,会导致程序中断并打印堆栈;逻辑错误是程序语法正确但结果不符预期,如条件写反、循环次数错误,不会崩溃但行为异常。两者区别在于是否抛出异常、是否中断执行及调试方式不同,需通过防御性编程、单元测试和日志调试加以防范。 …

    2026年9月22日
    000
  • 抖音小店如何运营?普通人开店选品与推广的实用策略

    抖音小店如何运营?普通人开店选品与推广的实用策略抖音小店如何运营?普通人开店选品与推广的实用策略抖音小店如何运营?普通人开店选品与推广的实用策略抖音小店如何运营?普通人开店选品与推广的实用策略

    新手做抖音小店最现实的问题是没钱投广告和没专业团队,解决方法是抓住选品和推广两个核心环节。一、选品要找市场需求高且利润合理的商品,避开竞争激烈或太冷门的品类,结合多平台数据测试;二、前期重点用“商品卡”推广,通过短视频展示产品使用场景并挂链接引流,成本低且适合测试;三、适当尝试直播积累经验,但不依赖…

    2026年9月22日 用户投稿
    400
  • Spring Boot 应用中的单元测试、Mockito 和集成测试:最佳实践

    第一段引用上面的摘要: 本文旨在帮助初学者理解在 Spring Boot 应用中何时以及如何使用 JUnit、Mockito 和集成测试。我们将探讨这些测试框架在 Controller、Service 和 Repository 层中的应用,并提供示例说明何时使用 Mockito 模拟对象,以及何时使…

    2026年9月22日
    000
  • mysql如何输入变量值 mysql交互式代码输入步骤详解

    mysql如何输入变量值 mysql交互式代码输入步骤详解mysql如何输入变量值 mysql交互式代码输入步骤详解mysql如何输入变量值 mysql交互式代码输入步骤详解mysql如何输入变量值 mysql交互式代码输入步骤详解

    在mysql命令行中交互式输入变量值可通过预处理语句或用户自定义变量实现。1. 使用预处理语句时,先用prepare定义含占位符的sql语句,再通过set设置变量值,最后用execute执行并传参,完成后需deallocate释放资源;2. 使用用户自定义变量时,直接通过set赋值并在sql语句中引…

    2026年9月22日 用户投稿
    100
  • vivoS系列手机微信收款语音播报怎么设置?配置语音的详细方法

    开启微信收款语音播报需在微信“收付款”中启用“收款语音提醒”并授权麦克风权限;2. vivo手机需在设置中开启微信的自启动、后台运行、通知及麦克风权限以确保功能正常;3. 语音播报延迟或无声可能由网络、手机性能、微信版本、系统模式或第三方软件干扰导致;4. 除微信自带功能外,还可选用第三方收款App…

    2026年9月22日
    600
  • 抖音小店网页版怎么登录?抖音我的小店在哪里

    随着抖音电商平台的快速发展,越来越多的商家选择入驻该平台。作为商家运营的重要工具之一,抖音小店网页版为店铺管理带来了诸多便利。那么,如何正确登录抖音小店网页版?又该如何找到“我的小店”?下面将为您详细介绍。 一、为什么需要登录抖音小店网页版? 通过抖音小店网页版,商家可以高效地进行商品管理、订单处理…

    2026年9月22日
    000
  • php-gd怎么应用复古滤镜_php-gd图像怀旧色调处理

    使用PHP-GD库实现复古滤镜主要通过色调偏移和色彩调整模拟老照片效果。1. 色调偏黄褐色:先转灰度,再用imagefilter添加棕黄色调;2. 手动像素级调整:逐像素计算灰度并赋予暖色系值,降低饱和度;3. 增强质感:结合对比度降低与轻微模糊提升真实感;4. 示例流程包括加载图像、应用滤镜、输出…

    2026年9月22日
    200
  • 苹果手机为什么无法连接蓝牙耳机

    先检查蓝牙开关、耳机电量及配对模式,确认设备靠近且无干扰,重启设备后删除旧连接记录并重连,更新系统或重置网络设置,若均无效则可能存在硬件故障需联系官方支持。 苹果手机连不上蓝牙耳机,通常不是大问题,多是设置或环境的小疏忽。先别着急,按下面几步检查,基本能解决大部分情况。 基础状态确认 连接失败往往出…

    2026年9月22日
    000
  • 抖音账号定位技巧:普通人如何选择最适合自己的内容方向?

    抖音账号定位技巧:普通人如何选择最适合自己的内容方向?抖音账号定位技巧:普通人如何选择最适合自己的内容方向?抖音账号定位技巧:普通人如何选择最适合自己的内容方向?抖音账号定位技巧:普通人如何选择最适合自己的内容方向?

    做抖音最容易犯的错误是内容随意,导致涨粉慢、互动低,明确目标和定位才能精准吸引用户。一、先搞清楚做抖音的目的,带货卖货选实用性强的领域,打造个人品牌需突出专业性,兴趣分享也要有核心主题;二、从“你能做的”“你感兴趣的”“用户有需求的”找交集,确定内容方向;三、参考对标账号的内容形式、标题风格、拍摄手…

    2026年9月22日 用户投稿
    200
  • 为什么不应该在多个网站重复使用同一个密码,撞库攻击的原理是什么?

    撞库攻击利用用户重复使用密码的习惯,黑客通过泄露的账号密码批量尝试登录其他网站,一旦某个小网站密码泄露,相同密码的高价值账户也可能被攻破,因此每个网站应使用独立复杂密码并开启双重验证以提升安全。 不建议在多个网站用同一个密码,核心原因就是防范“撞库攻击”。这种攻击利用了用户重复使用密码的习惯,让黑客…

    2026年9月22日
    700

发表回复

登录后才能评论
关注微信