当前位置: 首页 > news >正文

JavaScript中复制新的数组与原数组删除某个值——不影响新复制的数组的方法详解

系列文章目录


文章目录

  • 系列文章目录
  • 前言
  • 一、使用slice()方法复制数组
  • 二、使用concat()方法复制数组
  • 三、使用扩展运算符(...)复制数组
  • 总结


前言

在JavaScript中,我们经常需要处理数组的复制和修改。本文将详细介绍如何在JavaScript中复制一个新的数组,并在原数组删除某个值的情况下,确保新复制的数组值不受影响。通过丰富的示例代码,你将掌握多种方法来实现这一需求。


一、使用slice()方法复制数组

在JavaScript中,可以使用数组的slice()方法来复制一个新的数组。slice()方法会返回一个新的数组,其中包含了原数组的所有元素。

示例代码:

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();// 修改原数组
originalArray.splice(2, 1); // 删除索引为2的元素console.log("原数组:", originalArray); // 输出:[1, 2, 4, 5]
console.log("复制的新数组:", copiedArray); // 输出:[1, 2, 3, 4, 5]

在上述示例中,我们通过slice()方法复制了originalArray数组,并将其存储在copiedArray数组中。然后,我们通过splice()方法从原数组originalArray中删除了索引为2的元素,但是新复制的数组copiedArray并未受到影响,其值保持不变。

二、使用concat()方法复制数组

另一种复制数组的方法是使用concat()方法,它可以将多个数组连接成一个新数组。

示例代码:

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [].concat(originalArray);// 修改原数组
originalArray.splice(2, 1); // 删除索引为2的元素console.log("原数组:", originalArray); // 输出:[1, 2, 4, 5]
console.log("复制的新数组:", copiedArray); // 输出:[1, 2, 3, 4, 5]

在上述示例中,我们通过concat()方法将originalArray数组与一个空数组连接,从而复制了originalArray数组并存储在copiedArray数组中。同样,修改原数组并不影响新复制的数组。

三、使用扩展运算符(…)复制数组

ES6引入了扩展运算符(…),可以用于快速复制数组。

示例代码:

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [...originalArray];// 修改原数组
originalArray.splice(2, 1); // 删除索引为2的元素console.log("原数组:", originalArray); // 输出:[1, 2, 4, 5]
console.log("复制的新数组:", copiedArray); // 输出:[1, 2, 3, 4, 5]

通过扩展运算符(…),我们将originalArray数组中的所有元素复制到了copiedArray数组中。原数组的修改不会影响新复制的数组。

注意事项

使用上述方法复制数组时,只是复制了数组的引用而非数组本身。如果数组中的元素是引用类型,那么它们在新复制的数组中仍然是指向同一内存地址的。

总结

通过本文,你学会了在JavaScript中复制一个新的数组,并在原数组删除某个值的情况下,确保新复制的数组值不受影响的多种方法。你可以根据实际需求选择合适的方法来处理数组操作。

希望本文对你有所帮助。如果你有任何问题或疑问,欢迎留言讨论。感谢阅读!

需要系统源码或者BiShe加V
ID:talon712

http://www.lryc.cn/news/104126.html

相关文章:

  • easyui主表子表维护页面
  • k8s exam
  • C#,中国福利彩票《刮刮乐》的数学算法(02)——时来运转
  • 我的观影记录表【个人向】
  • 网络安全策略应包含哪些?
  • 【Git】Git GitHub
  • [STL]详解list模拟实现
  • C和C++的区别与联系
  • springboot通过接口执行本地shell脚本
  • 工欲善其事必先利其器,IT工作电脑更要维护好
  • 移动端个人中心UI设计
  • 开发接口,你需要先搞懂这些概念!
  • zookeeper常用命令
  • 亚马逊水基灭火器UL8测试报告ISO17025实验室办理
  • Shell学习脚本-if多分支结构
  • [SQL挖掘机] - 窗口函数 - lead
  • PyTorch Lightning教程四:超参数的使用
  • 2023 蓝桥杯真题B组 C/C++
  • 视频怎样分割成两段?分享几种视频分割方法
  • cyber_back
  • 价值 1k 嵌入式面试题-单片机 main 函数之前都做了啥?
  • 美团2024校招6000人;伯克利博士讲Llama 2技术细节;互联网转行AIGC最全指北;技术进步周期与创客崛起 | ShowMeAI日报
  • 【严重】PowerJob<=4.3.3 远程代码执行漏洞
  • 什么是 ASP.NET Core SignalR?
  • Centos/Ubuntu 替换yum/apt源?
  • 【RabbitMQ(day3)】扇形交换机和主题交换机的应用
  • redis 高级篇 redis 源码的读取分析
  • Acwing.873.欧拉函数
  • 深入浅出FPGA——笔记7 代码风格
  • npm, yarn配置