JS 添加数组元素( 4种方法 )

No.内容链接
1Openlayers 【入门教程】 - 【源代码+示例300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

    • 一、四种常规方法
      • 1. `push()` 方法 - 在数组末尾添加元素
      • 2. `unshift()` 方法 - 在数组开头添加元素
      • 3. `splice()` 方法 - 在数组任意位置插入元素
      • 4. `concat()` 方法 - 合并数组添加元素(返回新数组)
    • 二、其他方法
    • 三、注意事项总结


在这里插入图片描述

以下是JavaScript中用于添加数组元素的主要方法及其语法、注意事项和代码示例:

一、四种常规方法

1. push() 方法 - 在数组末尾添加元素

语法:

array.push(element1, ..., elementN)

注意事项:

  • push() 方法会直接修改原数组。
  • 返回值是修改后数组的长度。

代码示例:

let myArray = [1, 2, 3];
myArray.push(4, 5);
console.log(myArray); // 输出: [1, 2, 3, 4, 5]

2. unshift() 方法 - 在数组开头添加元素

语法:

array.unshift(element1, ..., elementN)

注意事项:

  • unshift() 方法也会直接修改原数组。
  • push() 类似,它返回数组更新后的长度。

代码示例:

let myArray = [1, 2, 3];
myArray.unshift(0);
console.log(myArray); // 输出: [0, 1, 2, 3]

3. splice() 方法 - 在数组任意位置插入元素

语法:

array.splice(index, deleteCount, item1, ..., itemX)

注意事项:

  • splice() 方法既可以用于插入元素也可以用于删除和替换数组部分元素,它会直接修改原数组。
  • 第一个参数 index 是开始插入/删除元素的位置。
  • 第二个参数 deleteCount 表示要从指定位置删除多少个元素,若为0,则不删除任何元素,仅插入新元素。
  • 之后的参数 item1, ..., itemX 是要插入的新元素。

代码示例:

let myArray = [1, 2, 4, 5];
myArray.splice(2, 0, 3);
console.log(myArray); // 输出: [1, 2, 3, 4, 5]

4. concat() 方法 - 合并数组添加元素(返回新数组)

语法:

array.concat(value1, value2, ..., valueN)

注意事项:

  • concat() 方法不会改变原数组,而是返回一个新的包含原数组和新增元素的数组。
  • 可以传入单个元素或另一个数组作为参数。

代码示例:

let myArray = [1, 2, 3];
let newArray = myArray.concat(4);
console.log(newArray); // 输出: [1, 2, 3, 4]
console.log(myArray); // 输出: [1, 2, 3] (原数组未变)

// 或者合并两个数组
let anotherArray = [4, 5];
newArray = myArray.concat(anotherArray);
console.log(newArray); // 输出: [1, 2, 3, 4, 5]

二、其他方法

  • 对于动态添加元素到特定索引位置,除了 splice() 外,也可以直接使用索引赋值:
let myArray = [1, 2, , 4]; // 创建一个有空位的数组
myArray[2] = 3; // 在索引2处添加元素
console.log(myArray); // 输出: [1, 2, 3, 4]

但是请注意,这种方法只适用于非连续性添加或者知道确切索引位置的情况,而且并不会自动扩容数组,如果索引超出了数组现有长度范围,可能会产生副作用。对于稀疏数组,这种方式会填补空位而不是在末尾追加元素。

三、注意事项总结

  • push() 和 unshift() 方法会直接修改原数组。
  • splice() 方法同样会直接修改原数组,但它还可以用来同时删除和插入元素。
  • concat() 方法不会改变原数组,而是返回一个新的数组。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/571898.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTTP/1.1,HTTP/2.0和HTTP/3.0 各版本协议的详解(2024-04-24)

1、HTTP介绍 HTTP 协议有多个版本,目前广泛使用的是 HTTP/1.1 和 HTTP/2,以及正在逐步推广的 HTTP/3。 HTTP/1.1:支持持久连接,允许多个请求/响应通过同一个 TCP 连接传输,减少了建立和关闭连接的消耗。 HTTP/2&#…

【leetcode面试经典150题】73. 从中序与后序遍历序列构造二叉树(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主,题解使用C语言。(若有使用其他语言的同学也可了解题解思路,本质上语法内容一致&…

BUUCTF-MISC-09文件中的秘密1

9.文件中的秘密1 题目:flag包含在图片的属性中

CentOS 7.9.2009 中 Docker 使用 GPU

一、安装nvidia驱动 1.1,查看显卡驱动 # 查看显卡型号 lspci | grep -i nvidia 1.2,进入 PCI devices ,输入上一步查询到的 2204 1.3,进入 官方驱动 | NVIDIA,查询 Geforce RTX 3090 驱动并下载 1.4,禁用…

【java、微服务】MQ

MQ(MessageQueue),中文是消息队列,字面来看就是存放消息的队列。也就是事件驱动架构中的Broker。 同步通讯 优点 时效性较强,可以立即得到结果 问题 微服务间基于Feign的调用就属于同步方式,存在一些问题。 耦合度高。每次加…

无人机干扰技术及干扰设备突破性发展

无人机干扰技术主要指的是通过各种手段干扰无人机的正常运行,从而达到使其失去控制、降低其性能或获取其信息的目的。这些干扰手段可以包括无线电干扰、GPS干扰、信号屏蔽、光学干扰等。 1.无线电干扰:由于无人机在遥控、定位、数据传输等方面都依赖于无…

云服务器搭建XSS-platform、DVWA靶机和Permeate论坛

目录 前言准备环境安装步骤一、 部署MySQL二、 系统部署三、系统安装主页介绍 前言 我发现目前网上的xss-platform的搭建教程都是基于本地搭建的,这样搭建好的xss平台只能在本地使用,无法测试别的网站。而网络上的大部分xss平台又几乎都是收费的&#x…

三维图形程序员入门-openmesh

三维网格入门第一篇,学习使用openmesh,三维模型的读取、存储有自己的数据结构,要想详细了解就开始学习openmesh,openmesh是开源的一个三角网格处理库,有三维顶点、面片、边、半边等,还有遍历算法、法向求解…

常见大厂面试题(SQL)02

小鹏面试题: 小鹏汽车充电每辆车连续快充最大次数 原表charging_data idcharge_timecharge_typeXP10012023/11/20 8:45快充XP10012023/11/21 20:45快充XP10012023/11/22 8:45快充XP10012023/11/23 8:45慢充XP10012023/11/25 8:45快充XP10022023/11/25 8:45快充XP10022023/11/…

Orange3数据可视化组件概览

概要 大家见过Orange3提供的丰富数据可视化组件吗? Orange3为您提供了一系列生动的图表工具,包括树图、箱线图、小提琴图、分布图、散点图、折线图、条形图、筛图、马赛克图、自由投影、线性投影、雷达图、热力图、韦恩图、轮廓图、毕达哥拉斯树、毕达哥…

C++_第八周做题总结

id:45 A.Equation(类与对象构造) 题目描述 建立一个类Equation,表达方程ax2bxc0。类中至少包含以下方法: 无参构造(abc默认值为1.0、1.0、0)与有参构造函数,用于初始化a、b、c的值; set方法,…

【AI学习】Transformer的Token嵌入表示为什么那么长

有朋友问,BERT等大模型的参数量怎么计算的?这个问题,李沐在BERT那篇论文中讲过,主要包括几部分。1、词嵌入:token数量乘以token表示的向量长度,就是 VH;2、注意力计算没有参数,只计算…

MT2041 三角形的个数

思路:找规律,推公式 4等分: 头朝上的三角形: 边长为1:1234s1; 边长为2:123s2; 边长为3:12s3; 边长为4:1s4; 即si12...n-i1(n-i2)*(n-i…

STM32玩转物联网实战篇:5.ESP8266 WIFI模块MQTT通信示例详解

1、准备开发板 开发板功能区分布图 开发板俯视图 2、实验讲解 在之前的章节中,已经讲解过了MQTT的通讯原理和组包过程,现在开始手把手的教大家用代码来实现连接MQTT平台以及数据的交互,实际上这篇文章已经拖更接近两年了,非常…

VS2019中配置C++ OpenCV 4.5.4完整指南

⭐️我叫忆_恒心,一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您,麻烦点个赞👍呗! 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧,喜欢的小伙伴给个三…

基于STM32的报警器

参考前面的内容:STM32点灯大师(中断法)-CSDN博客 同样是使用中断的方式触发警报 一、GPIO口配置起来 二、代码 打开gpio.c 重写虚函数,实现我们想要的功能 -----------------------------------------------------------------…

变频器基础原理

文章目录 0. 基本知识1.三相的电压之和为02.正弦交流相量的相量表示法(相量只是表示正弦量,而不等于正弦量 ;只有正弦量才能用相量表示)引入相量表示法目的:一种正弦量的产生方式:正弦量的相量表示,使用欧拉公式表示复数 3.用复数表示正弦量&…

Redis入门到通关之Redis网络模型-用户空间和内核态空间

文章目录 欢迎来到 请回答1024 的博客 🍓🍓🍓欢迎来到 请回答1024的博客 关于博主: 我是 请回答1024,一个追求数学与计算的边界、时间与空间的平衡,0与1的延伸的后端开发者。 博客特色: 在我的…

25考研数学可以全程跟张宇吗?

先说结论:25可以全程跟张宇。除了这三种情况。 总的来说,张宇的知识点是全的,不需要担心漏知识点、漏经典方法。不单高数,线代概率也是这样。 但是,老师讲得好,不能保证你上岸。 如果遇到这三种情况&…

java银行存取款程序设计

银行存取款的流程是人们非常熟悉的事情,用户可在银行对自己的资金账户进行存款、取款、查询余额等操作,极大的便利了人民群众对资金的管理。 本任务要求,使用所学知识编写一个银行存取款程序,实现存取款功能。编写一个帐户类实现…
最新文章