快捷導航

JavaScript從數(shù)組中刪除特定數(shù)據(jù)的方法總結(jié)

更新時間：2022年08月05日 10:19:14 作者：櫻舞

js數(shù)組是js部分非常重要的知識,有時我們有這么個需求js數(shù)組刪除指定元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript從數(shù)組中刪除特定數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下

前言

增刪改查是我們?nèi)粘ｉ_發(fā)中的最基本任務(wù)，在JavaScript中我們經(jīng)常需要從數(shù)據(jù)組刪除特定的數(shù)據(jù)項。然而，JavaScript數(shù)組中并沒有提供刪除特定數(shù)據(jù)項的方法。所以我們必須使用替代的方法，來從javaScript中刪除特定數(shù)據(jù)項。

如何在Javascript中刪除特定的數(shù)組項

1：使用 filter()

使用現(xiàn)代 Javascript 刪除特定數(shù)組項的最簡單方法是使用過濾器。讓我們看一個簡單的例子：

let myArr = [ "??", "??", "??", "??" ];


let removedArr = myArr.filter((x) => x !== "??");
console.log(removedArr);

當我們的數(shù)組中的每一個數(shù)據(jù)想都是唯一的時候，他是正常工作的，但是當我們的存在重復(fù)項的時候，此時如果你只想刪除一個，保留其他重復(fù)的，這種方式是無法做到的。

let myArr = [ "??", "??", "??", "??" ];


let removedArr = myArr.filter((x) => x !== "??");
console.log(removedArr);

由于我們有兩個青蘋果，并且新數(shù)組過濾掉了所有青蘋果，因此我們在使用此方法時實際上刪除了兩個項目。如果我們只想刪除一個元素，我們必須使用另一種方法。

2：使用 indexOf() 和 splice()

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。如果沒有找到匹配的字符串則返回 -1。 splice() 方法用于添加或刪除數(shù)組中的元素。注意：這種方法會改變原始數(shù)組。這種方式與上面的區(qū)別在于：

首先，它改變了原始數(shù)組——所以我們不在這里復(fù)制。原始數(shù)組將被改變。
其次，它使用兩個函數(shù)——首先我們獲取indexOf要刪除的數(shù)組項，然后我們splice獲取數(shù)組以刪除單個項。

這是一個例子：

let myArr = [ "??", "??", "??", "??" ];
let getLocation = myArr.indexOf("??");
myArr.splice(getLocation, 1);
// myArr now becomes [ "??", "??",  "??" ];
console.log(myArr);

附：js delete方法刪除指定位置的數(shù)組元素

delete方法可以通過數(shù)組的下標將js數(shù)組中的一個元素從指定位置上刪除，且刪除掉數(shù)組中的元素后，會把該下標出的值置為undefined，數(shù)組的長度不會變。

語法：

delete.數(shù)組[數(shù)組下標];/*數(shù)組下標控制指定位置，下標從0開始*/

代碼實例：刪除animal數(shù)組的第二項元素，即：animal[1]，然后animal[1]的值會為：undefined。

<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? </head>

? ? <body>
? ? ? ? <div class="demo">
? ? ? ? ? ? <p>數(shù)組：cat，elephant，tiger，rabbit；<br>數(shù)組長度為：4</p>
? ? ? ? ? ? <button onclick="myFunction()">點我--delete刪除元素</button>
? ? ? ? </div>
? ? </body>

? ? <script type="text/javascript">
? ? ? ? function myFunction(){
? ? ? ? ? ?var animal = ["cat", "elephant", "tiger","rabbit"];
? ? ? ? ? ?document.write("<p>數(shù)組："+animal+"<br>數(shù)組長度："+ animal.length+"</p>");
? ? ? ? ? ?var animal1= delete animal[1];
? ? ? ? ? ?document.write("<p>新數(shù)組："+animal+"<br>刪除元素后，現(xiàn)在為："+ animal[1]+"<br>數(shù)組長度："+ animal.length+"</p>");
? ? ? ? }
? ? </script>
</html>