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

news2024/10/5 13:34:31
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.coloradmin.cn/o/1626614.html

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

相关文章

PS学习笔记-抠图相关

选好颜色后,altdelete更换画布颜色、填充前景色 按住shift键自由缩放图片,调好后双击鼠标即可完成,或者点击工具栏的 对勾 在某图层下 CTRLT 变换图片,调好后双击鼠标即可完成,或者点击工具栏的 对勾 CTRLJ复制图…

Linux用户与权限

切换账户 su su [-] [用户名]- 可选,表示在切换用户后加载环境变量,一般都使用 用户名 可选,省略表示切换到root切换用户后,可以使用exit命令退回上一用户,或用快捷键ctrld 为普通命令授权 sudo sudo命令:…

第5章 全局大喇叭——详解广播机制

第5章 全局大喇叭——详解广播机制 如果你了解网络通信原理应该会知道,在一个IP网络范围中,最大的IP地址是被保留作为广播地址来使用的。 比如某个网络的IP范围是192.168.0.XXX,子网掩码是255.255.255.0,那么这个网络的广播地址…

工厂数字化三部曲/业务、数据和IT融合

工厂数字化三部曲: 业务、数据和IT融合 在当今数字化转型的潮流中,企业面临着将业务、数据和IT融合的挑战和机遇。数字化转型不仅是技术上的升级,更是对企业运营模式和管理体系的全面优化和重构。通过业务“数字化”阶段的细致分析和整合,以及…

算法06链表

算法06链表 一、链表概述1.1概述1.2链表的组成部分:1.3链表的优缺点: 二、链表典例力扣707.设计链表难点分析:(1)MyLinkedList成员变量的确定:(2)初始化自定义链表:&…

记一次JSON.toJSONString()转换时非属性方法空指针异常排查及toJSONString保留null值属性

记一次JSON.toJSONString()转换时非属性方法空指针异常排查及toJSONString保留null值属性 异常详情 有一个类,里面有两个属性和一个类似工具的getRealName()方法如下: getRealName()方法就是获取这个人的真实名字,如果获取不到就以name返回…

小程序变更主体还要重新备案吗?

小程序迁移变更主体有什么作用?小程序迁移变更主体的作用可不止变更主体这一个哦!还可以解决一些历史遗留问题,比如小程序申请时主体不准确,或者主体发生合并、分立或业务调整等情况。这样一来,账号在认证或年审时就不…

全国各地级市财政收入支出明细统计数据2003-2022年

01、数据简介 全国各地级市财政统计主要是按地级市财政支出和财政收入两项统计,反映地区财政资金形成、分配以及使用情况的统计,​是由地区各地级市统计局统计公布,是加强财政资金管理使用的依据,研究国民收入分配和再分配的重要…

C语言----单链表的实现

前面向大家介绍了顺序表以及它的实现,今天我们再来向大家介绍链表中的单链表。 1.链表的概念和结构 1.1 链表的概念 链表是一种在物理结构上非连续,非顺序的一种存储结构。链表中的数据的逻辑结构是由链表中的指针链接起来的。 1.2 链表的结构 链表…

【Dart】双问号表达式报错的解决方案

最近准备学习一下Flutter,现从Dart开始。 Dart ??运算符报错的解决方案 报错代码如下 main() {int a;int b a ?? 123;print(b); }报错表现如下 _D05.8%20%E5%8F%8C%E9%97%AE%E5%8F%B7%E8%BF%90%E7%AE%97%E7%AC%A6.dart:3:11: Error: Non-nullable variable …

Lagent AgentLego 智能体应用搭建-作业六

本次课程由Lagent&AgentLego 核心贡献者樊奇老师讲解【Lagent & AgentLego 智能体应用搭建】课程。分别是: Agent 理论及 Lagent&AgentLego 开源产品介绍Lagent 调用已有 Arxiv 论文搜索工具实战Lagent 新增自定义工具实战(以查询天气的工具…

您的计算机已被rmallox勒索病毒感染?恢复您的数据的方法在这里!

引言: 在当今数字化时代,网络安全问题日益突出,其中勒索病毒作为一种新型的网络威胁,正逐渐引起人们的广泛关注。其中,.rmallox勒索病毒作为近期出现的一种新型恶意软件,给个人和企业带来了巨大的经济损失…

电机入门1

文章目录 122.12.22.3 33.13.23.33.4 1 2 2.1 电机板 驱动板电机分类 驱动器分类 转速 转向扭矩定时器 ADC 2.2 PID 自动控制 的核心闭环控制算是 PID的应用 2.3 无刷电机用的 可大大提高其控制效率 和控制精度 3 开发板的IO 电流太小了 20~25ma 电机要A 驱动板 信号放大没舵…

html表格(详解网页表格的制作)

一、表格介绍 HTML 表格由 <table> 标签来定义。 HTML 表格是一种用于展示结构化数据的标记语言元素。 每个表格均有若干行&#xff08;由 <tr> 标签定义&#xff09;&#xff0c;每行被分割为若干单元格&#xff08;由 <td> 标签定义&#xff09;&#x…

用卷积网络对城市住区进行分类

这将是解释我的人工智能硕士最终项目的几篇文章中的第一篇&#xff0c;我想在其中详细解释从项目的想法到结论&#xff0c;我将在其中展示给定解决方案的所有代码。 总体思路 城市扩张地图集 https://www.lincolninst.edu/es/publications/books/atlas-urban-expansion 项…

【linux】chmod权限开放(整个文件夹)

文章目录 起因权限查看权限修改 失败权限修改成功 起因 想要共享conda环境给同事&#xff0c;发现同事没权限。 权限查看 ls #查看当前目录 ls -l # 查看当前目录的东西和权限正常情况下是显示 三个rwx分别属于user&#xff0c;group&#xff0c;others 前面第一个rwx 是针…

【斐波那契】原来困扰多年的生兔子问题竟然能够轻松拿捏...万能公式法...

上篇文章我们讲解了「矩阵快速幂」技巧&#xff0c;通过快速幂极大的优化了 斐波那契数列 的求解问题。并且通过分析知道了 系数矩阵 是解决问题的关键。 本文我们继续深化对于 系数矩阵 的求解&#xff0c;介绍一种通用方法&#xff0c;一举解决所有 斐波那契及变种类型 的问…

路由器使用docker安装mysql和redis服务

路由器使用docker安装mysql和redis服务 1.先在路由器中开启docker功能 &#xff08;需要u盘 或者 移动硬盘&#xff09; 2. docker 管理地址 :http://192.168.0.1:11180/#/ 3. 拉取镜像 4. mysql容器参数设置 MYSQL_ROOT_PASSWORD 5. redis 容器设置 开发经常需要用到 &…

【工具-PyCharm】

工具-PyCharm ■ PyCharm-简介■ PyCharm-安装■ PyCharm-使用■ 修改主题■ 设置字体■ 代码模板■ 解释器配置■ 文件默认编码■ 快捷键■ 折叠■ 移动■ 注释■ 编辑■ 删除■ 查看■ 缩进■ 替换 ■ PyCharm-简介 官方下载地址 Professional&#xff1a;专业版&#xff0…

贪吃蛇撞墙功能的实现 和自动行走刷新地图 -- 第三十天

1.撞墙 1.1最初的头和尾指针要置为空&#xff0c;不然是野指针 1.2 在增加和删除节点后&#xff0c;判断是否撞墙&#xff0c;撞墙则初始话蛇 1.3在撞墙后初始化蛇&#xff0c;如果头不为空就撞墙&#xff0c;得定义临时指针指向头&#xff0c;释放头节点 2.自动刷新地图 2.1…