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.mzph.cn/bicheng/2961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 集成 EasyExcel 3.x

Spring Boot 集成 EasyExcel 3.x Spring Boot 集成 EasyExcel 3.x 本章节将介绍 Spring Boot 集成 EasyExcel(优雅实现Excel导入导出)。 🤖 Spring Boot 2.x 实践案例(代码仓库) 介绍 EasyExcel 是一个基于 Java 的、…

HZNUCTF -- web

HZNUCTF第五届校赛实践赛初赛 Web方向 WriteUp-CSDN博客 ezssti 下载文件 访问 /login 可由源代码中看到 Eval 函数 ,可以任意命令执行 按照格式,可执行命令 POST :name{{.Eval "env"}} 可以得到flag (尝试ls 只能列出…

「ChatGPT」掀起新一轮AI热潮!超越GPT-4 Turbo,商汤日日新大升级!

目录 拳打 GPT-4 Turbo ,脚踢 DALLE 3 端侧大模型,唯快不破 AI 应用落地需要一个即插即用的大模型超市 并不存在 AI 这个行业,只有 AI行业,强调 AI 需要与传统产业合作,这种关系是结合与赋能,而不是颠覆…

java开发之路——用户管理中心_简单初始化

用户管理中心_简单初始化 (一) 初始化项目1. 使用 Ant Design Pro(现成的管理系统) 进行前端初始化2. 后端初始化三种初始化java项目 (二) 遇到的问题【问题1】Ant design pro页面打不开,一直在budiling控制台出现错误error-./src/components/index.ts【问题2】初始…

基于SSM的物业管理系统(含源码+sql+视频导入教程+文档+PPT)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的物业管理系统2拥有三种角色 管理员:用户管理、物业管理、房产信息管理、小区概况管理、开发商管理、收费标准管理、物业公司管理等 物业:住户管理、收费…

如何通过cURL库实现远程控制插座

如何通过cURL库实现远程控制插座呢? 本文描述了使用cURL库调用HTTP接口,实现控制插座,即插即用,先插入插座,再接电器,实现远程控制。 可选用产品:可根据实际场景需求,选择对应的规格…

udp/tcp错误总结

udp tcp——多进程 tcp——多线程 tcp——线程池 tcp——守护进程 🎆udp  ✨pthread_create 错误总结  ✨LockGuard错误总结  ✨服务端需要写成多线程  ✨客户端也需要写成多线程  ✨多线程调试工具 🎆tcp  ✨tcp独有调试工具——telnet  ✨Threa…

基于瞬时频率的语言信号清/浊音判决和高音检测(MATLAB R2021)

语音是由气流激励声道从嘴唇或鼻孔辐射出来而产生的。根据声带是否振动,发音可分为浊音和清音。浊音和清音有明显的区别,浊音具有周期信号的特征,而清音则具有随机噪声的特征;浊音在频域上具有共振峰结构,其能量主要集…

⑤【Shiro】SpringBoot整合Shiro,实现登录认证

个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ ⑤【Shiro】SpringBoot整合Shiro,实…

AI助力科研创新与效率双提升:ChatGPT深度科研应用、数据分析及机器学习、AI绘图与高效论文撰写

2022年11月30日,可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5,将人工智能的发展推向了一个新的高度。2023年4月,更强版本的ChatGPT4.0上线,文本、语音、图像等多模态交互方式使其在…

计算机网络4——网络层2

文章目录 一、地址解析协议ARP二、IP数据报格式1、IP 数据报首部的固定部分中的各字段2、IP 数据报首部的可变部分 三、IP 层转发分组的过程1、流程2、案例分析3、最长前缀匹配4、分组转发算法5、使用二叉线索查找转发表 一、地址解析协议ARP 在实际应用中,我们经常…

第一篇【传奇开心果系列】Python深度学习库技术点案例示例:深度解读深度学习在自动驾驶领域的应用

传奇开心果博文系列 系列博文目录Python深度学习库技术点案例示例系列 博文目录前言一、深度学习在自动驾驶方面的应用介绍二、目标检测和识别示例代码三、路况感知示例代码四、行为预测示例代码五、路径规划示例代码六、自动驾驶控制示例代码七、感知融合示例代码八、高精度地…

【数据结构】串(String)

文章目录 基本概念顺序存储结构比较当前串与串s的大小取子串插入删除其他构造函数拷贝构造函数扩大数组空间。重载重载重载重载[]重载>>重载<< 链式存储结构链式存储结构链块存储结构 模式匹配朴素的模式匹配算法(BF算法)KMP算法字符串的前缀、后缀和部分匹配值nex…

Android 10.0 Launcher3替换桌面app图标后大小和其他app图标不一样的问题解决方案

1.前言 在10.0的系统ROM产品定制化开发中,在关于launcher3的产品定制化开发中,在有些时候需要对一些第三方的app图标做 替换或者是做一些动态图标的替换,发现在替换以后图标大小和其他app的图标大小不一样,所以就需要看是具体哪里 对app的图标做了缩放功能,接下来就需要去…

【网页在线小游戏源码】

网页在线小游戏源码 效果图部分源码领取源码下期更新预报 效果图 部分源码 index.html <!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <meta id"viewport" na…

WEB逆向—X-Bogus逆向分析(纯算+补环境)

声明 本文章中所有内容仅供学习交流&#xff0c;抓包内容、敏感网址、数据接口均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 前言 此平台 本人 仅限…

分类预测 | Matlab实现CNN-BiLSTM-SAM-Attention卷积双向长短期记忆神经网络融合空间注意力机制的数据分类预测

分类预测 | Matlab实现CNN-BiLSTM-SAM-Attention卷积双向长短期记忆神经网络融合空间注意力机制的数据分类预测 目录 分类预测 | Matlab实现CNN-BiLSTM-SAM-Attention卷积双向长短期记忆神经网络融合空间注意力机制的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基…

深入探究音视频开源库WebRTC中NetEQ音频抗网络延时与抗丢包的实现机制

目录 1、引言 2、WebRTC简介 3、什么是NetEQ&#xff1f; 4、NetEQ技术详解 4.1、NetEQ概述 4.2、抖动消除技术 4.3、丢包补偿技术 4.4、NetEQ概要设计 4.5、NetEQ的命令机制 4.6、NetEQ的播放机制 4.7、MCU的控制机制 4.8、DSP的算法处理 4.9、DSP算法的模拟测试…

分布式与一致性协议之CAP(二)

CAP CAP不可能三角 CAP不可能三角是指对于一个分布式系统而言&#xff0c;一致性、可用性、分区容错性指标不可兼得&#xff0c;只能从中选择两个&#xff0c; 如图所示。CAP不可能三角最初是埃里克布鲁尔(Eric Brewer)基于自己的工程实践提出的一个猜想&#xff0c;后被塞斯吉…

论文辅助笔记:LLM-MOB代码解读

论文笔记 Where Would I Go Next? Large Language Models as Human Mobility Predictor-CSDN博客 1 主函数 1.1 导入库 import os import pickle import time import ast import logging from datetime import datetime import pandas as pd from openai import OpenAIclie…