当前位置:首页 » 《关于电脑》 » 正文

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

16 人参与  2024年11月18日 18:41  分类 : 《关于电脑》  评论

点击全文阅读


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

在这里插入图片描述

文章目录

一、五种方法1. `splice()` 方法 - 删除指定索引位置的元素2. `pop()` 方法 - 删除并返回数组最后一个元素3. `shift()` 方法 - 删除并返回数组第一个元素4. `delete` 操作符 - 删除指定索引位置的元素(保留数组长度,但使该位置值为 `undefined`)5. 设置 `length` 属性 - 快速删除数组尾部之外的所有元素 二、注意事项总结


在这里插入图片描述

在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); // 输出: 3console.log(myArray); // 输出: [1, 2]

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

语法:

array.shift()

注意事项:

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

代码示例:

let myArray = [1, 2, 3];let firstElement = myArray.shift();console.log(firstElement); // 输出: 1console.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 属性可快速截断数组,但请确保了解其对数组影响的特殊性。

点击全文阅读


本文链接:http://zhangshiyu.com/post/188371.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

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

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