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

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); // 输出: 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 属性可快速截断数组,但请确保了解其对数组影响的特殊性。

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

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

相关文章

QT中文乱码常见解决办法

QT中出现中文字符串乱码情况时(如图示), 可尝试下面的几种方法: 1、QString str QStringLiteral("1你好世界 hello world")); //推荐2、QString str QObject::tr("2你好世界 hello world")); //推荐国际化场景使用3、QString str QString::fromU…

Linux内核驱动开发-001字符设备开发-003独立按键杂项驱动

1驱动程序 /*************************************************************************> File Name: key_misc.c> Author: yas> Mail: rage_yashotmail.com> Created Time: 2024年04月22日 星期一 17时20分42秒**********************************************…

DBA-现在应该刚刚入门吧

说来话长 在2023年以前,我的DBA生涯都是“孤独的”。成长路径除了毕业前的实习期有人带,后续几乎都是靠自学。如何自学,看视频、看文档、网上查阅资料、项目实战。 可能是学疏才浅 ,一直都是在中小公司混,在中小公司通…

30V-STM32设计项目

30V-STM32设计 一、项目描述 (已验证) 基于STM32c8t6芯片设计的开发板,支持4-30V宽电压输入,串口模式自动下载功能,支持串口和STlink,方式下载程序 二、原理图介绍 电源电路采用了DCDCLDO电路,如果是外接DC头供电的话&…

GELU激活函数

Gaussian Error Linerar Units(GELUS) 论文链接:https://arxiv.org/abs/1606.08415 在激活函数领域,鄙视链应该是:Elus > Relu > Sigmoid ,这些激活函数都有自身的缺陷, sigmoid容易饱和,Elus与Rel…

【Transformer】detr之encoder逐行梳理(二)

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 detr之encoder逐行梳理 1. 整体 encoder由encoder layer构成 输入进encoder的特征shape:(hw,b,c),后文将给出说明 class Transformer(nn.…

java-springmvc 01

MVC就是和Tomcat有关。 01.MVC启动的第一步,启动Tomcat 02.Tomcat会解析web-inf的web.xml文件

《架构风清扬-Java面试系列第23讲》如何理解Java的泛型檫除?

晚上好,给大家加个餐 来,思考片刻,说出你的答案 1,什么是泛型檫除? 泛型擦除是指编译器在处理泛型代码时,会在编译阶段移除(擦除)所有与泛型相关的类型参数信息,将其替换…

Java 网络编程之TCP(三):基于NIO实现服务端,BIO实现客户端

前面的文章,我们讲述了BIO的概念,以及编程模型,由于BIO中服务器端的一些阻塞的点,导致服务端对于每一个客户端连接,都要开辟一个线程来处理,导致资源浪费,效率低。 为此,Linux 内核…

VulBG: 构建行为图加强基于深度学习的漏洞检测模型

近年来,人们提出了基于深度学习(DL)的漏洞检测系统,用于从源代码中自动提取特征。这些方法在合成数据集上可以实现理想的性能,但在检测真实世界的漏洞数据集时,准确率却大幅下降。此外,这些方法…

数字时代的社交王者:探索Facebook的社交帝国

引言:社交媒体的霸主 在数字化浪潮席卷全球的当下,社交媒体已然成为人们日常生活中不可或缺的一部分,而Facebook则是这个领域的不二之选。作为全球最大的社交网络,Facebook不仅拥有庞大的用户群体,更在技术创新、社会…

EJB和Spring

1. EJB 1.1. 背景 功能日趋复杂的软件,如果把所有的功能实现都放在客户端,不仅代码没有安全性,部署及发布运维都会变的很复杂,所以将软件的功能实现分为客户端和服务端,服务端和客户端之间通过网络调用进行功能实现。…