当前位置:首页 » 《关注互联网》 » 正文

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

2 人参与  2024年04月27日 18:25  分类 : 《关注互联网》  评论

点击全文阅读


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://zhangshiyu.com/post/101301.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1