JS 删除数组元素( 5种方法 )

JS 删除数组元素( 5种方法 )splice 适合删除任意位置的元素 且可以一次删除多个

大家好,欢迎来到IT知识分享网。

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

在这里插入图片描述


在这里插入图片描述

JavaScript中,删除数组元素有以下几种常用方法,包括它们的语法、注意事项和代码示例:

一、五种方法

1. splice() 方法 – 删除指定索引位置的元素

语法:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 

注意事项:

  • splice() 方法会直接修改原数组。
  • 需要提供两个参数:起始索引 start 和要删除的元素数量 deleteCount
  • 可选地,可以在删除元素后在其位置插入新的元素。

代码示例:

let myArray = [1, 2, 3, 4, 5]; myArray.splice(2, 1); // 删除索引为2的元素 console.log(myArray); // 输出: [1, 2, 4, 5] // 同时删除并插入元素 myArray.splice(2, 1, 'a', 'b'); console.log(myArray); // 输出: [1, 2, 'a', 'b', 4, 5] 

2. pop() 方法 – 删除并返回数组最后一个元素

语法:

array.pop() 

注意事项:

  • pop() 方法会直接修改原数组,减少数组长度。
  • 它返回被删除的最后一个元素。

代码示例:

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

3. shift() 方法 – 删除并返回数组第一个元素

语法:

array.shift() 

注意事项:

  • shift() 方法同样会直接修改原数组,减少数组长度。
  • 它返回被删除的第一个元素。

代码示例:

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

4. delete 操作符 – 删除指定索引位置的元素(保留数组长度,但使该位置值为 undefined

注意事项:

  • delete 不是数组专用方法,而是JavaScript通用操作符。
  • 使用 delete 会使得数组在相应索引上的值变为 undefined,但数组长度不变。

代码示例:

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

5. 设置 length 属性 – 快速删除数组尾部之外的所有元素

注意事项:

  • 直接设置数组的 length 属性可以缩短数组,所有索引大于新 length 值的元素都会被删除。

代码示例:

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

二、注意事项总结

  • splice() 适合删除任意位置的元素,且可以一次删除多个。
  • pop()shift() 分别用于删除末尾和头部的单个元素。
  • 使用 delete 操作符会导致数组中出现 undefined 值,而非真正缩小数组大小。
  • 调整 length 属性可快速截断数组,但请确保了解其对数组影响的特殊性。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/109667.html

(0)
上一篇 2026-02-05 13:00
下一篇 2026-02-05 13:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信