JavaScript >> Javascript 文檔 >  >> JavaScript

在 JavaScript 中從數組中刪除元素

在 JavaScript 中,就像許多其他語言一樣,在某些時候您可能需要從數組中刪除一個元素。根據您的用例,這可能與使用內置 shift() 一樣簡單 或 pop() 命令,但僅當元素分別位於數組的開頭或結尾時才有效。許多用例將要求您支持從數組中的任意位置刪除元素,這就是我們將在此處介紹的內容。

我還將解釋如何以其他方式實現這一點,例如使用為您處理它的實用程序庫,或者您是否必須支持像 IE 8 這樣的舊瀏覽器。

原版 JavaScript

要在 JavaScript 中從數組中刪除特定元素,我們首先要找到該元素的位置,然後將其刪除。

按值查找位置可以使用 indexOf() 方法,返回第一次出現的索引 給定值的值,如果不在數組中,則為 -1。

使用這個索引值,我們將想要實際刪除元素,我們可以使用 splice() 方法。

function removeElement(array, elem) {
    var index = array.indexOf(elem);
    if (index > -1) {
        array.splice(index, 1);
    }
}

所以如果 indexOfsplice 我們只需要兩種方法來實現這一點,那麼 if 語句的用途是什麼?通過檢查索引是否大於 -1,我們正在驗證該元素是否實際存在於數組中。如果不是,index 為 -1,則在 splice 中使用此值 實際上會刪除 last 數組中的元素,這不是我們想要的。

請記住,這只會刪除給定元素的第一次出現。請看下面的例子來說明這一點:

var arr = [1, 2, 3, 3, 4, 5];
removeElement(arr, 3);
console.log(arr);

// Output:
// [ 1, 2, 3, 4, 5 ]

請注意,第二個“3”仍然存在。

如果我們想刪除每個實例 指定元素,那麼我們可以使用while循環而不是if語句來實現:

function removeAllElements(array, elem) {
    var index = array.indexOf(elem);
    while (index > -1) {
        array.splice(index, 1);
        index = array.indexOf(elem);
    }
}

現在運行與上面相同的示例代碼,我們得到以下內容:

var arr = [1, 2, 3, 3, 4, 5];
removeAllElements(arr, 3);
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

如你所見,'3' 兩個元素現在都從數組中刪除了。

由於這是一個如此常見的用例,大多數(如果不是全部)實用程序庫都具有從數組中刪除元素的功能。

Lodash

要刪除一個元素,Lodash 有 remove() 方法。如果您有一個非常簡單的用例,您只是想刪除一個原始元素(如數字),那麼這個函數對您來說可能是多餘的,因為您需要傳遞一個函數來確定該元素是否符合您的條件。

因此,例如,以下是刪除數字 3 的方法:

var arr = [1, 2, 3, 3, 4, 5];
_.remove(arr, function(e) {
    return e === 3;
});
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

請注意,它已經刪除了 3 的所有實例,這是默認行為。

但是,當刪除更複雜的元素(如對象)時,此方法更有用。例如,也許您想從數組中刪除所有未滿 21 歲的“人”對象:

var people = [
    {name: 'Billy', age: 22},
    {name: 'Sally', age: 19},
    {name: 'Timmy', age: 29},
    {name: 'Tammy', age: 15}
];
_.remove(people, function(e) {
    return e.age < 21
});
console.log(people);

// Output
// [ { name: 'Billy', age: 22 }, { name: 'Timmy', age: 29 } ]

它有點像 filter 方法,除了它從你傳遞的數組中刪除元素,然後從方法本身返回一個刪除元素的數組。

下劃線

Underscore 實用程序庫有一個與 Lodash 類似的方法,稱為 reject .它的工作原理非常相似,除了一個顯著的區別。結果數組從方法中返回,你傳遞給它的數組保持不變。

示例見以下代碼:

var arr = [1, 2, 3, 3, 4, 5];
var ret = _.reject(arr, function(e) {
    return e === 3;
});
console.log(arr);
console.log(ret);

// Output:
// [ 1, 2, 3, 3, 4, 5 ]
// [ 1, 2, 4, 5 ]

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

同樣,就像 Lodash 的 remove 方法,reject 方法最適合更複雜的情況,例如刪除對像或元素組。

支持 Internet Explorer

如果您的項目要求您支持舊版本的 Internet Explorer,在這種情況下特別是 IE 8,那麼 indexOf() 該方法不適合您,因為此版本的 IE 不支持該方法。

為了解決這個問題,一種解決方案是填充該方法,如 Stack Overflow 答案所示:

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

根據SO帖子,這是 indexOf 的實現 來自 MDN,用於 Firefox/SpiderMonkey。

另一種選擇是使用 jQuery 的 $.inArray() 方法:

var arr = [1, 2, 3, 3, 4, 5];
var idx = $.inArray(3, arr);
console.log(idx);

// Output:
// 2

這大致相當於 indexOf ,然後可用於編寫 removeElement 方法如本文第一節所示。


Tutorial JavaScript 教程
  1. 為 JavaScript 開發設置工作站

  2. 使用 HTML、CSS 和 Javascript 的簡單手風琴菜單

  3. 使用 Firebase 對用戶進行身份驗證

  4. 使用 React 和 Ink 構建的漂亮 Git 日誌

  5. 支架並將儀表板部署到 Netlify

  6. JAVASCRIPT 傳播運算符

  7. Angular中的def接口和dto inerface有什麼區別?

  1. 開發者對二十十七主題的介紹

  2. NodeJS 開發時需要注意的 10 件事

  3. 在 react-native 中使用 axios 的 URLSearchParams

  4. 類似於 Python range() 的 JavaScript 函數

  5. 我創建了 Flexbox Playground

  6. 如何使用 Webhook 在您的服務器應用程序中創建單例記錄器

  7. 帶有 2 個命令的 REST API nodejs、express、mongo。

  1. 使用 Kentico Kontent CLI 遷移模型更改

  2. 使用 Kendo UI 在 Vue.js 中構建氣候檢查 UI 組件

  3. 使用 Vitest 測試 React 應用程序

  4. 調試 TypeScript 代碼庫