前言

增删改查是我们日常开发中的最基本任务,在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数组删除特定数据内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具!

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部