JavaScript从数组中删除特定数据的方法总结
前言
增删改查是我们日常开发中的最基本任务，在JavaScript中我们经常需要从数据组删除特定的数据项。然而，JavaScript数组中并没有提供删除特定数据项的方法。所以我们必须使用替代的方法，来从javaScript中删除特定数据项。
如何在Javascript中删除特定的数组项
1：使用 filter()
使用现代 Javascript 删除特定数组项的最简单方法是使用过滤器。让我们看一个简单的例子：
let myArr = [ "🍎", "🍏", "🍐", "🍍" ]; let removedArr = myArr.filter((x) => x !== "🍍"); console.log(removedArr);
当我们的数组中的每一个数据想都是唯一的时候，他是正常工作的，但是当我们的存在重复项的时候，此时如果你只想删除一个，保留其他重复的，这种方式是无法做到的。
let myArr = [ "🍎", "🍏", "🍏", "🍍" ]; let removedArr = myArr.filter((x) => x !== "🍏"); console.log(removedArr);
由于我们有两个青苹果，并且新数组过滤掉了所有青苹果，因此我们在使用此方法时实际上删除了两个项目。如果我们只想删除一个元素，我们必须使用另一种方法。
2：使用 indexOf() 和 splice()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。 splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。 这种方式与上面的区别在于：
- 首先，它改变了原始数组——所以我们不在这里复制。原始数组将被改变。
- 其次，它使用两个函数——首先我们获取indexOf要删除的数组项，然后我们splice获取数组以删除单个项。
这是一个例子：
let myArr = [ "🍎", "🍏", "🍏", "🍍" ];
let getLocation = myArr.indexOf("🍏");
myArr.splice(getLocation, 1);
// myArr now becomes [ "🍎", "🍏", "🍍" ];
console.log(myArr);附：js delete方法删除指定位置的数组元素
delete方法可以通过数组的下标将js数组中的一个元素从指定位置上删除，且删除掉数组中的元素后，会把该下标出的值置为undefined，数组的长度不会变。
语法：
delete.数组[数组下标];/*数组下标控制指定位置，下标从0开始*/
代码实例：删除animal数组的第二项元素，即：animal[1]，然后animal[1]的值会为：undefined。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="demo">
<p>数组：cat，elephant，tiger，rabbit；<br>数组长度为：4</p>
<button onclick="myFunction()">点我--delete删除元素</button>
</div>
</body>
<script type="text/javascript">
function myFunction(){
var animal = ["cat", "elephant", "tiger","rabbit"];
document.write("<p>数组："+animal+"<br>数组长度："+ animal.length+"</p>");
var animal1= delete animal[1];
document.write("<p>新数组："+animal+"<br>删除元素后，现在为："+ animal[1]+"<br>数组长度："+ animal.length+"</p>");
}
</script>
</html>总结
尽管在 Javascript 中没有直接从数组中删除项目的方法，但我们确实有两个工具可以为我们提供足够的灵活性来涵盖几乎所有有关删除数组项目的场景。
到此这篇关于JavaScript从数组中删除特定数据的文章就介绍到这了,更多相关js数组删除特定数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
如果不需要显示调用函数， 让这个函数在定义的时候就执行的话， 该如何写才可以呢，下面为大家介绍下具体的实现步骤，喜欢的朋友可以了解下2014-01-01
在编写JavaScript应用的时候，我们经常会使用this关键字。那么this关键字究竟是怎样工作的，它的设计有哪些好的地方，有哪些不好的地方，本文带大家全面系统地认识这个老朋友，感兴趣的小伙伴可以借鉴阅读2023-05-05
这篇文章主要介绍了js实现操作cookie的常见方法,结合实例形式分析了js操作cookie创建、读取、删除相关实现技巧与注意事项,需要的朋友可以参考下2020-03-03
xml 封装与解析 javascript和C#中的分别实现代码。2009-07-07
变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明，本文主要介绍了JavaScript 变量对象，具有一定的参考价值，感兴趣的可以了解一下2022-05-05
解析John Resig Simple JavaScript Inheritance代码
上网也查了一下对些的理解说的都不是很清楚. 在翻阅的同时找到了一篇 分析这篇文章的文章 哈哈 分析的很详细. (Join Resig 大师的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有时间, 并对此感兴趣不访好好看看. 我相信多少会有所收益的.2012-12-12
这篇文章主要为大家详细介绍了JavaScript对象类型，分析了JavaScript六种数据类型，感兴趣的小伙伴们可以参考一下2016-06-06
再谈JavaScript中bind、call、apply三个方法的区别与使用方式
这篇文章主要介绍了Javascript中bind、call、apply三个方法的使用方式,需要的朋友可以参考下2022-05-05
今天小编就为大家分享一篇layui radio性别单选框赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章介绍了JS实现遮罩层效果的简单实例，有需要的朋友可以参考一下2013-11-11
最新评论