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

js中添加数组元素的方法

push() 方法将一个或多个元素添加到数组的末尾,并返回新的长度。
let arr = [1, 2, 3];  
arr.push(4); // arr 现在是 [1, 2, 3, 4]  
arr.push(5, 6); // arr 现在是 [1, 2, 3, 4, 5, 6]
unshift() 方法将一个或多个元素添加到数组的开头,并返回新的长度。
let arr = [1, 2, 3];  
arr.unshift(0); // arr 现在是 [0, 1, 2, 3]  
arr.unshift(-1, -2); // arr 现在是 [-1, -2, 0, 1, 2, 3]
使用方括号索引

通过指定索引来直接修改或添加数组元素。但是,如果索引大于或等于数组的长度,那么新的元素会被添加到数组的末尾。如果索引不存在,那么该位置的元素会被设置为 undefined

let arr = [1, 2, 3];  
arr[3] = 4; // arr 现在是 [1, 2, 3, 4]  
arr[10] = 11; // arr 现在是 [1, 2, 3, 4, undefined, undefined, undefined, undefined, undefined, undefined, 11]
使用 splice() 方法

splice() 方法通过删除或替换现有元素或者添加新元素来修改数组,并以数组形式返回被修改的内容。虽然这主要用于删除或替换元素,但也可以用来添加元素。

let arr = [1, 2, 3];  
arr.splice(3, 0, 4); // arr 现在是 [1, 2, 3, 4]  
// 在索引3处开始,删除0个元素,并添加元素4
使用扩展运算符(...

ES6引入了扩展运算符,它可以用来合并数组。虽然这不是直接添加元素到现有数组的方法,但你可以用它来创建一个新数组,该数组包含原始数组的元素以及要添加的新元素。

let arr = [1, 2, 3];  
let newArr = [...arr, 4]; // newArr 现在是 [1, 2, 3, 4]
使用 concat() 方法

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

let arr = [1, 2, 3];  
let newArr = arr.concat(4); // newArr 现在是 [1, 2, 3, 4],但 arr 仍然是 [1, 2, 3]  
// 注意:这里的 4 会被当作一个只包含一个元素的数组 [4] 来处理  
// 如果要添加多个元素,应该这样做:arr.concat(4, 5, 6)

相关文章:

  • Go语言学习:每日一练2
  • EFCore_悲观锁与乐观锁(MySQL)
  • Unity 粒子特效(下)
  • 服务器BMC基础知识总结
  • vue3弹窗usehook
  • C#面:举列 a=10,b=15,在不用第三方变量的前提下,把a,b的值互换
  • Linux驱动开发实战宝典:设备模型、模块编程、I2C/SPI/USB外设精讲
  • 图形化用户界面-java头歌实训
  • python本学期所有代码!
  • 容器内存
  • 13 Redis-- 数据一致性模型、MySQL 和 Redis 的数据一致性
  • 【JavaScript脚本宇宙】从Cypress到Nightwatch.js:全面解析前端自动化测试工具
  • ROS2自定义接口Python实现机器人移动
  • llama.cpp
  • CPP入门:日期类的构建
  • @jsonView过滤属性
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 08.Android之View事件问题
  • Android开源项目规范总结
  • CSS盒模型深入
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • Idea+maven+scala构建包并在spark on yarn 运行
  • JavaScript HTML DOM
  • Promise面试题2实现异步串行执行
  • Puppeteer:浏览器控制器
  • SAP云平台里Global Account和Sub Account的关系
  • Terraform入门 - 3. 变更基础设施
  • unity如何实现一个固定宽度的orthagraphic相机
  • Vue官网教程学习过程中值得记录的一些事情
  • Wamp集成环境 添加PHP的新版本
  • 给github项目添加CI badge
  • 记一次和乔布斯合作最难忘的经历
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 使用Envoy 作Sidecar Proxy的微服务模式-4.Prometheus的指标收集
  • 手写一个CommonJS打包工具(一)
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • 无服务器化是企业 IT 架构的未来吗?
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • 一个完整Java Web项目背后的密码
  • 栈实现走出迷宫(C++)
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • 深度学习之轻量级神经网络在TWS蓝牙音频处理器上的部署
  • gunicorn工作原理
  • Hibernate主键生成策略及选择
  • 大数据全解:定义、价值及挑战
  • ​linux启动进程的方式
  • ​用户画像从0到100的构建思路
  • !$boo在php中什么意思,php前戏
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • $ git push -u origin master 推送到远程库出错
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (2024.6.23)最新版MAVEN的安装和配置教程(超详细)
  • (差分)胡桃爱原石
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda