JavaScript中7种常见删除数组中指定元素的方法(含代码)

news2025/1/9 0:50:17

在JavaScript中,有多种方法可以从数组中删除指定的元素。以下是几种常见的方法:
在这里插入图片描述

1. 使用 splice() 方法

splice() 方法可以同时从数组中删除和添加元素。如果只提供了两个参数,那么它只会删除元素。

let arr = [1, 2, 3, 4, 5];  
let index = arr.indexOf(3); // 找到要删除的元素的索引  
if (index !== -1) { // 确保元素存在于数组中  
    arr.splice(index, 1); // 删除一个元素  
}  
console.log(arr); // 输出: [1, 2, 4, 5]

2. 使用 filter() 方法

filter() 方法创建一个新数组,新数组中的元素都是通过检查指定条件为真的元素。

let arr = [1, 2, 3, 4, 5];  
let newArr = arr.filter(item => item !== 3); // 过滤掉等于3的元素  
console.log(newArr); // 输出: [1, 2, 4, 5]

3. 使用 delete 运算符

delete 运算符可以删除数组的元素,但是不会影响其他数组元素,也不会改变数组的长度。

let arr = [1, 2, 3, 4, 5];  
let index = arr.indexOf(3); // 找到要删除的元素的索引  
if (index !== -1) { // 确保元素存在于数组中  
    delete arr[index]; // 删除元素  
}  
console.log(arr); // 输出: [1, 2, undefined, 4, 5]

4. 使用 for 循环和 splice() 方法

我们可以使用 for 循环遍历数组,并在遍历过程中使用 splice() 方法删除元素。

let arr = [1, 2, 3, 4, 5];  
for (let i = 0; i < arr.length; i++) {  
    if (arr[i] === 3) { // 如果元素等于3,则删除它  
        arr.splice(i, 1); // 使用splice()删除元素,然后减小i以跳过被删除的元素  
        i--; // 因为我们删除了一个元素,所以我们需要减小索引以保持正确的遍历顺序  
    }  
}  
console.log(arr); // 输出: [1, 2, 4, 5]

5. 使用 includes() 方法

我们可以使用 includes() 方法检查数组中是否存在指定的元素,如果存在,则使用 splice() 方法删除它。这种方法可以避免在循环中使用复杂的条件判断。

let arr = [1, 2, 3, 4, 5];  
let itemToRemove = 3; // 要删除的元素  
let index = arr.indexOf(itemToRemove); // 在数组中查找要删除的元素的索引  
if (index !== -1) { // 如果元素存在于数组中,则删除它  
    arr.splice(index, 1); // 使用splice()删除元素,并返回被删除的元素(虽然在这个例子中我们不需要它)  
}  
console.log(arr); // 输出: [1, 2, 4, 5]

6. 使用 shift()pop() 方法

shift() 方法删除并返回数组的第一个元素,而 pop() 方法删除并返回数组的最后一个元素。

let arr = [1, 2, 3, 4, 5];  
let itemToRemove = 3; // 要删除的元素  
arr.splice(arr.indexOf(itemToRemove), 1); // 删除元素  
console.log(arr); // 输出: [1, 2, 4, 5]

7. 使用 map() 方法

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的结果。如果提供的函数在某个位置返回 false,则该位置的元素不会被包括在新数组中。

let arr = [1, 2, 3, 4, 5];  
let newArr = arr.map(item => item !== 3); // 过滤掉等于3的元素  
console.log(newArr); // 输出: [1, 2, 4, 5]

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

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

相关文章

直播预告丨看零售场,如何玩转 MaaS

今年&#xff0c;有一个被频繁提及的词是MaaS 这类工具正在帮助千行百业实现大模型落地产业 在零售场&#xff0c;特别是像京东这样拥有超高并发、超复杂协同的电商场内 也沉淀出了一套通用的AI基础设施——九数算法中台 从提升客户服务体验、平台效率出发&#xff0c;训练各…

JS逆向实战案例2——某房地产token RSA加密

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、 反爬分析 url1&#xff1a;aHR0cDovL3pmY2ouZ3ouZ292LmNuL3pmY2ovZnl4eC94a2I/c1Byb2plY3RJZD05MzBlMDQ0MmJjNjA0MTBkYTgzNzQ0MmQ…

频率阈图像滤波

介绍 频率阈图像滤波是一种在频域中进行图像处理的方法&#xff0c;它基于图像的频率分布来实现滤波效果。具体步骤如下&#xff1a; 将原始图像转换到频域&#xff1a;使用快速傅里叶变换&#xff08;FFT&#xff09;将图像从空间域转换到频域。对频域图像应用频率阈滤波器&a…

Tensorflow Lite从入门到精通

TensorFlow Lite 是 TensorFlow 在移动和 IoT 等边缘设备端的解决方案&#xff0c;提供了 Java、Python 和 C API 库&#xff0c;可以运行在 Android、iOS 和 Raspberry Pi 等设备上。目前 TFLite 只提供了推理功能&#xff0c;在服务器端进行训练后&#xff0c;经过如下简单处…

斯坦福Mobile ALOHA提到的ACT之外的另两项技术:Diffusion Policy、VINN

前言 本文接上一篇文章《斯坦福机器人Mobile ALOHA的关键技术&#xff1a;动作分块ACT的算法原理与代码剖析》而来&#xff0c;当然最开始本文是作为上一篇文章的第二、第三部分的 但因为ACT太过关键&#xff0c;除了在上一篇文章中写清楚其算法原理之外&#xff0c;还得再剖…

Java研学-三层架构实现简单登录操作

一 登录流程 将服务器资源给有权限的人访问&#xff0c;只有登录的管理员可以访问员工信息进行 CRUD 二 三层架构 Web 开发中的最佳实践&#xff1a;分层开发模式将整个业务应用划分为&#xff1a;表现层、业务逻辑层、数据访问层。区分层次的目的即为了“高内聚低耦合”的思想…

2023启示录 | 商业航天这一年

图片&#xff5c;SpaceX ©⾃象限原创 作者丨罗辑 编辑丨程心 整个2023年&#xff0c;在全球热度上能够和ChatGPT一争高下的&#xff0c;可能只有SpaceX的两次星舰发射。 就像2023年菜市场卖鱼的大爷都能聊两句大模型一样&#xff0c;即使从来不关心航天的人也会知道星舰…

话题浏览暴涨558%!从DIY到爆改,小红书数据洞察用户关注焦点

最近走红的“爆改”你们听说了吗&#xff1f;各大社媒平台明星爆改、素人爆改&#xff0c;频上热门。改造风流行的小红书&#xff0c;热度更盛&#xff0c;从DIY到爆改&#xff0c;用户关注焦点是什么&#xff1f;博主和品牌如何讲述“改造”&#xff1f;通过数据分析&#xff…

transbigdata笔记:数据预处理

0 数据 使用 transbigdata/docs/source/gallery/data/TaxiData-Sample.csv at main ni1o1/transbigdata (github.com) 和transbigdata/docs/source/gallery/data/sz.json at main ni1o1/transbigdata (github.com) 0.1 导入库 import transbigdata as tbd import pandas …

Hello,World!

“Hello, world”的由来可以追溯到 The C Programming Language 。在这门编程语言中&#xff0c;它被用作第一个演示程序&#xff0c;向人们展示了在计算机屏幕上输出“Hello world”这行字符串的计算机程序。由于这个演示程序的简洁性和直观性&#xff0c;它成为了许多初学者学…

傅昌林:百万级数据挑战的大师,NineData编程大赛的卓越表现

数据库编程大赛&#xff1a;一条SQL计算扑克牌24点 参赛选手&#xff1a;傅昌林 个人简介&#xff1a;HBI Solutions, Inc, VP Engineering 参赛数据库&#xff1a;SQL Server 性能评测&#xff1a;百万级数据代码性能评测 11.45秒 综合得分&#xff1a;78.8 以下是傅昌林…

golang学习-指针

1、定义 指针也是一个变量&#xff0c;但它是一个特殊的变量&#xff0c;它存储的是另一个变量的内存地址。是引用数据类型。 取一个变量的地址&#xff1a;&a 定义&#xff1a; var p *int &a 可以理解为 指针变量p中存储的是a的内存地址&#xff0c;但是变量p也…

vue实现-年、月、日、时、分、秒、星期?

一、文章引导 #mermaid-svg-nP4oT3Y4d6oaxUsg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-nP4oT3Y4d6oaxUsg .error-icon{fill:#552222;}#mermaid-svg-nP4oT3Y4d6oaxUsg .error-text{fill:#552222;stroke:#55222…

安卓应用无法拉起部分机型微信支付

错误提示&#xff1a; 2024-01-11 09:01:01.878 11754-11754 MicroMsg.S...ApiImplV10 com.bm.read E register app failed for wechat app signature check failed 2024-01-11 09:01:01.879 11754-11754 MicroMsg.S...ApiImplV10 com.bm.read E s…

蔚来出手,空气悬架「悬」了

空气悬架的这把火&#xff0c;可能要被「浇灭」了。 目前&#xff0c;在乘用车赛道&#xff0c;主动悬架按照控制类型&#xff0c;主要可以分为液压悬架、空气悬架和电磁感应悬架。其中&#xff0c;空气悬架因为中国本土造车新势力的强力推动&#xff0c;在过去几年时间成为市场…

C++11教程:C++11新特性大汇总(第六部分)

C11是2011年发布的C标准&#xff0c;是C的一次重大升级。 第十二部分&#xff1a;C多文件编程 十一、C11列表初始化&#xff08;统一了初始化方式&#xff09; 我们知道&#xff0c;在 C98/03 中的对象初始化方法有很多种&#xff0c;请看下面的代码&#xff1a; //初始化列…

SpringBoot+SSM项目实战 苍穹外卖(10) Spring Task WebSocket

继续上一节的内容&#xff0c;本节学习Spring Task和WebSocket&#xff0c;并完成订单状态定时处理、来单提醒和客户催单功能。 目录 Spring Task&#xff08;cron表达式&#xff09;入门案例 订单状态定时处理WebSocket入门案例 来单提醒客户催单 Spring Task&#xff08;cron…

⭐Unity 将电脑打开的窗口画面显示在程序中

1.效果&#xff1a; 下载资源包地址&#xff1a; Unity中获取桌面窗口 2.下载uWindowCapturev1.1.2.unitypackage 放入Unity工程 3.打开Single Window场景&#xff0c;将组件UwcWindowTexture的PartialWindowTitle进行修改&#xff0c;我以腾讯会议为例 感谢大家的观看&#xf…

python爬虫实战(7)--获取it某家热榜

1. 需要的类库 import requests from bs4 import BeautifulSoup import pandas as pd2. 请求榜单 def fetch_ranking_data():url "https://m.xxx.com/rankm/" #某家response requests.get(url)if response.status_code 200:return response.contentelse:print(f…

AIGC实战——改进循环神经网络

AIGC实战——改进循环神经网络 0. 前言1. 堆叠循环网络2. 门控制循环单元3. 双向单元相关链接 0. 前言 我们已经学习了如何训练长短期记忆网络 (Long Short-Term Memory Network, LSTM) 模型&#xff0c;以学习使用给定风格生成文本&#xff0c;接下来&#xff0c;我们将学习如…