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

在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]

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

邂逅Node.JS的那一夜

邂逅Node.JS的那一夜&#x1f303; 本篇文章&#xff0c;学习记录于&#xff1a;尚硅谷&#x1f3a2; 本篇文章&#xff0c;并不完全适合小白&#xff0c;需要有一定的HTML、CSS、JS、HTTP、Web等知识及基础学习&#xff1a; &#x1f197;&#xff0c;紧接上文&#xff0c;…

计算机毕业设计----JSP+servlet鲜花销售商城管理系统

项目介绍 本系统分为前后台&#xff0c;普通用户可在前台页面购买鲜花&#xff0c;加入购物车、查看订单等&#xff1b;后台为管理员登录&#xff0c;可对用户、商品、订单、留言、新闻等进行管理。本系统分为普通用户和管理员两种角色&#xff1b; 普通用户角色包含以下功能&…

Edge 浏览器如何设置自动刷新

Edge 浏览器设置自动刷新有两种方式 安装Edge浏览器自动刷新扩展更改页面的源代码文件 目录 方式一&#xff1a;Edge 自动刷新扩展实现&#xff08;推荐&#xff09; 方式二&#xff1a;更改页面的源代码文件 实现页面自动刷新&#xff08;不推荐&#xff09; 方式一&#xff…

高效底座模型LLaMA

论文标题&#xff1a;LLaMA: Open and Efficient Foundation Language Models 论文链接&#xff1a;https://arxiv.org/pdf/2302.13971.pdf 论文来源&#xff1a;Meta AI 1 概述 大型语言模型&#xff08;Large Languages Models&#xff0c;LLMs&#xff09;通过大规模文本数…

Docker部署Homepage个人引导页

个人名片&#xff1a; 对人间的热爱与歌颂&#xff0c;可抵岁月冗长&#x1f31e; 个人主页&#x1f468;&#x1f3fb;‍&#x1f4bb;&#xff1a;念舒_C.ying 个人博客&#x1f30f; &#xff1a;念舒_C.ying Homepage | 主页 1. 安装环境2. Docker部署 原作者&#xff1a;無…

ChatGPT最新动态:新推出GPTs,你了解了吗?

&#x1f680;&#x1f680;2024年1月10日&#xff0c;ChatGPT推出了GPT Store功能。在GPT Store上可以浏览和使用GPTs。&#x1f680;&#x1f680; 这是OpenAI官方Twitter账号也发出相应推文。 GPTs是什么呢&#xff1f; GPTs是ChatGPT几个月前推出的新概念&#xff0c;按官…

使用git submodule解决高耦合度问题

引言 在开发我的笔记系统时&#xff0c;我遇到了一个问题。问题是&#xff0c;在api-gate服务中&#xff0c;我需要验证用户的access_code&#xff0c;但是access_code的生成逻辑是在auth2服务中实现的。这个问题从架构设计的层面上看&#xff0c;就是一个高耦合度问题。高耦合…

安科瑞企业微电网能效管理系统在寿宁县五校迁建项目的设计应用

安科瑞 崔丽洁 安科瑞微电网系统解决方案&#xff0c;通过在企业内部的源、网、荷、储、充的各个关键节点安装安科瑞自主研发的各类监测、分析、保护、治理装置&#xff1b;通过先进的控制、计量、通信等技术&#xff0c;将分布式电源、储能系统、可控负荷、电动汽车、电能路由…

来,挑战一套Python面试题

来&#xff0c;挑战一套Python面试题 最近计划发布一些跟Python招聘面试相关的文章&#xff0c;欢迎大家持续关注。今天先给大家上一套Python的面试题&#xff0c;大家可以挑战一下&#xff0c;看看自己是王者还是青铜。 题目1&#xff1a;下面的Python代码会输出什么。 pri…

如何将ArcGIS工程文件迁移到ArcGIS Pro内

当你刚接触ArcGIS Pro的时候&#xff0c;尝试新建一个工程文件会发现工程文件的后缀已经改变&#xff0c;那么以前在ArcGIS内辛苦制作的工程文件是否就不能在ArcGIS Pro内使用了&#xff0c;答案是否定的&#xff0c;对此Esri也给出了解决方案&#xff0c;这里为大家介绍一下迁…

C++day3作业

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…

Vue学习笔记六--Vue3学习

1、Vue3的优势 2、创建Vue3工程 前提&#xff1a;node -v 查看node版本&#xff0c;需要在16.0及以上 创建命令 npm init vuelatest,先安装create-vue然后创建项目 然后执行npm run dev 提示 sh: vite: command not found,需要执行npm i重新安装依赖&#xff0c;之后再执行np…

Transformer如何工作

Transformer如何工作 Transformer工作可以分为两个阶段&#xff1a;Inference&#xff08;推理&#xff09;和Training&#xff08;训练&#xff09; ​ ​​​ ‍ ‍

计算机体系结构----计分板(scoreboard)算法

计分板算法简介 计分板记录着所有必要的信息&#xff0c;用来控制以下事情&#xff1a; 每条指令何时可以读取操作数并投入运行&#xff08;对应着RAW冲突的检测&#xff09;每条指令何时可以写入结果&#xff08;对应着WAR冲突的检测&#xff09;在计分板中&#xff0c;WAW冲…

在本地服务器发送邮件不可以,生产环境下跑可以

公司一般会给一个smtp-xxxx.com mail:host: smtp-xxxx.comport: 25properties:mail:smtp:starttls:enable: falsedebug: true然后你会使用堡垒机映射ip 会发现在本地邮件根本不会发出去,只能拿到虚拟机上跑 解决方案 我们需要把smtp-xxxx.com,改成对应的ip地址,只需要把smtp…

flutter release包使用adb查看日志排查错误实践

release包给出去后发现出现无法启动的情况&#xff0c;需要flutter开发排查 &#xff0c;直接将release包安装到模拟器 使用adb 去连接模拟器 我这边是MuMu模拟器 adb connect 127.0.0.1:7555 然后查看设备列表 adb devices 直接输入0 即选择第一个设备 然后使用 adb logcat …

配电室智能监控系统设计及实现分析——安科瑞赵嘉敏

摘要&#xff1a;配电室作为电网正常运行中的基础性设施&#xff0c;在信息化建设中处于信息交换管理的核心位置&#xff0c;这就要求配电室内所有设备须时时刻刻正常运转&#xff0c;一旦某台设备出现故障&#xff0c;对数据传输、存储及系统运行构成威胁&#xff0c;就会影响…

2022-2023 ICPC, Asia Yokohama Regional Contest 2022(题解)

2022-2023 ICPC, Asia Yokohama Regional Contest 2022 文章目录 A. Hasty Santa ClausB. Interactive Number GuessingC. Secure the Top SecretD. Move One CoinE. Incredibly Cute Penguin ChicksF. Make a LoopG. Remodeling the DungeonH. Cake DecorationI. Quiz Contest…

数据结构02附录02:哈希表[C++]

图源&#xff1a;文心一言 上机题目练习整理~&#x1f95d;&#x1f95d; 本篇作为线性表的代码补充&#xff0c;每道题提供了优解和暴力解算法&#xff0c;供小伙伴们参考~&#x1f95d;&#x1f95d; 第1版&#xff1a;在力扣新手村刷题的记录&#xff0c;优解是Bard老师提…

pyqt treeWidget树生成

生成treeWidget树与获取treeWidget树节点的数据 # encodingUTF-8 import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QApplication, QTreeWidgetItem, QLineEdit, QSpinBox, QComboBox from PyQt5.QtWidgets import QWidget from release_test import Ui_F…