JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中從數組中刪除重複項

簡介

在使用 API 或從數組中檢索數據時,您可能會遇到重複的數據,但您只想選擇唯一值。

例如,假設您有一個表示餐廳菜單的數組,如下所示。您可能需要從該數組中檢索可用的類別 - 在這種情況下,您需要過濾數組以僅獲取一次類別,避免重複:

const menu = [
    {
        name: "buttermilk pancakes",
        category: "breakfast"
    },
    {
        name: "diner double",
        category: "lunch"
    },
    {
        name: "godzilla milkshake",
        category: "dinner"
    },
    {
        name: "country delight",
        category: "breakfast"
    },
    {
        name: "egg attack",
        category: "lunch"
    }
];

最佳解決方案:使用 Set() 構造函數

一個集合 是唯一的項目的集合,意味著沒有元素可以重複。假設我們有一個學校科目數組,我們想從中刪除所有重複項:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

JavaScript 為我們提供了一個方便的構造函數來創建集合 - Set() .它可以接受一個數組作為它的參數。在這種情況下,它會創建一個集合併用傳遞數組中的唯一值填充它。這種方法的問題是 Set() 構造函數創建一個集合,而不是一個數組(我們需要)。

我們將通過使用 spread operator 繞過不受歡迎的行為 - 也稱為 三點運算符 (... )。與一組組合時(使用 Set() 生成 構造函數),擴展運算符可以將設置的值傳播到一個數組中:

let uniqueSubjects = [...new Set(subjects)];

console.log(uniqueSubjects); // ["mathematics", "french", "english"]

我們也可以對 對像數組 執行此操作 ,讓我們以 menu的例子來說明 數組:

let categories = [...new Set( menu.map((menu) => menu.category))];

console.log(categories); // ["breakfast","lunch","dinner"]

注意: 使用 Set() 從數組中刪除重複項 構造函數需要線性時間 - O(n) (n 是原始數組中的元素數)。所有其他刪除重複項的方法都採用 O(n²) 時間。因此,我們強烈建議您使用 Set() 在任何情況下都可以構造函數。

使用 filter()indexOf() 方法

filter() 方法用於遍歷一個數組並返回一個新數組,該數組僅由滿足給定條件的元素組成,而 indexOf() 方法用於返回元素在數組中第一次出現的索引。

例如,假設我們有一個主題數組,並且我們想要檢查每個元素的索引:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let subjectsIndex = [];
subjects.map((subject) => {
    subjectsIndex.push(subjects.indexOf(subject));
});

console.log(subjectsIndex); // [0,1,2,1,0]

因為我們知道 filter 方法會根據給定的條件返回一個新數組,所以我們現在可以使用它來僅包含索引與其 indexOf() 匹配的元素 價值觀:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = subjects.filter((subject, index) => {
    return subjects.indexOf(subject) === index;
});

console.log(uniqueSubjects); // ["mathematics","french","english"]

假設我們要使用 menu 數組,我們首先必須遍歷數組以將類別存儲在一個新數組中,然後現在使用 filter()indexOf() 方法:

let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = categoriesArray.filter((category, index) => {
    return categoriesArray.indexOf(category) === index;
});

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

使用 reduce()包括() 方法

Reduce 總是有點難以掌握,但它執行了一個非常強大的歸約操作,它是從函數式編程中藉來的。 reduce() 方法用於減少數組的元素並根據您傳入的一些減少函數將它們組合成最終數組,而 includes() 如果元素在數組中,則該方法返回 true,否則返回 false。

下面的示例遍歷數組的元素並檢查特定元素是否在結果中,否則我們添加它:

免費電子書:Git Essentials

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

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = subjects.reduce((result, subject) => {
    return result.includes(subject) ? result : [...result, subject];
}, []);

console.log(uniqueSubjects); // ["mathematics","french","english"]

假設我們要使用菜單數組,我們首先必須遍歷數組以將類別存儲在數組中,然後使用 reduce()includes() 方法如前所述:

let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = categoriesArray.reduce((result, category) => {
    return result.includes(category) ? result : [...result, category];
}, []);

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

注意: 請注意我們在本節中如何使用擴展運算符。

使用 forEach()包括() 方法

這幾乎就像使用 filter()includes() 方法。我們只是使用 forEach() 方法來遍歷數組,然後只將不存在的元素添加到新數組中:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = [];
subjects.forEach((subject) => {
    if (!uniqueSubjects.includes(subject)) {
        uniqueSubjects.push(subject);
    }
});

console.log(uniqueSubjects); // ["mathematics","french","english"]

假設我們要使用 menu 數組,我們首先必須遍歷數組以將類別存儲在數組中,然後現在使用 forEach()includes() 方法如前所述:

let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = [];
categoriesArray.forEach((category) => {
    if (!uniqueCategories.includes(category)) {
        uniqueCategories.push(category);
    }
});

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

結論

在本文中,我們已經看到了四種從數組中刪除重複項的不同方法。 Set()的介紹 在 ES6 中,這變得更加容易和高效。使用 Set() 從數組中刪除重複項 構造函數需要線性時間 - O(n) (n 是原始數組中的元素數)。所有其他刪除重複項的方法都採用 O(n²) 時間。因此,我們強烈建議您使用 Set() 在任何情況下都可以構造函數。


Tutorial JavaScript 教程
  1. iframe中的內容提交後需要跳出iframe

  2. #100DaysOfCode 的第 8 天!

  3. 使用 React 生成 SVG

  4. 像老闆一樣自動完成!

  5. 使用 JavaScript 從字符串中刪除逗號

  6. 呈現從服務器接收到的 HTML 標記文本

  7. 如何從 Mongoose 的集合中排除一個特定字段?

  1. 使用 React useState 鉤子管理表單狀態🪝。

  2. 原生 javascript 中的 jQuery index()

  3. 酷(在線)的地方

  4. 使用 Next.js 和 ESLint 設置 Google Maps API 時的 4 個陷阱

  5. 設置 React Native 組件庫

  6. TypeScripts 未知數據類型

  7. Leetcode 日記:179. 最大數

  1. 上下文掛鉤

  2. JavaScript 中的線性搜索 |必須知道的初學者算法

  3. 10 個最佳 AngularJS 面試問題和答案

  4. 創建一個 JavaScript 庫。添加回調