JavaScript >> Javascript 文檔 >  >> Tags >> Arrays

如何在 JavaScript 中過濾數組,帶有示例

我們已經介紹了數組 在 LinuxScrew 上相當廣泛地使用 JavaScript。本文將向您展示如何使用過濾器 方法——帶有易於理解的示例。

JavaScript 數組

數組是一種包含其他值或變量列表的變量。它們是計算機編程的基礎之一。

這些列表包含位置上的項目(稱為索引 )。這些項目可以是任何東西——數字、字符串、複雜對象——任何你想存儲的東西。

數組非常有用。您可以使用它們將行存儲在表格中以進行計算,或者您可以使用它們來保存對視頻遊戲中所有壞人的引用,以便您可以快速找到它們並更新它們在遊戲中的狀態。

過濾數組

在 JavaScript 數組的上下文中,過濾意味著獲取原始數組,刪除數組中不符合給定條件的項目 – 並返回刪除了這些項目的原始數組的副本。

例如,您的遊戲中可能有一系列壞人——有些壞人是紅色的,有些壞人是藍色的。你可以編寫一個過濾器來獲取一個只包含藍色壞人的新數組。

JavaScript 數組 filter() 方法

filter() 數組上可用的方法提供了一種方便的方法來執行此過濾。您可以為其提供任何條件,它會返回一個僅包含符合這些條件的項目的數組。

array.filter(item => filter_function);

注意:

  • 數組 可以是任何數組變量
  • 項目 是將分配給 filter_function 內數組中每個項目的變量名稱
  • filter_function 是一個應該返回 boolean 的函數或語句 (真或假)值

過濾器函數只需要返回一個 TRUE 或 FALSE 布爾值(手動或作為使用比較器的結果)——如果該值不為 TRUE,則該項目將從結果數組中刪除。

示例

它在行動中:

var furniture = ['chair', 'bed', 'couch', 'table'];
var startsWithC = furniture.filter(item => item[0]  == 'c'); // [ "chair", "couch" ]

上面,我們定義了一個家具物品數組。

然後,我們創建一個 包含來自第一個數組的過濾值的數組,在本例中檢查家具項目名稱中的第一個字符是字母“c”。

這是通過箭頭函數表達式完成的 – 一種編寫單行函數的簡短方法。數組中的每個項目都被賦予了變量名稱 item , 用於過濾的單行函數放在箭頭 (=> )。

可以通過使用較長形式的箭頭函數表達式來編寫具有多個條件的更複雜的過濾器,其中從花括號 ({} 包裹的代碼中返回更複雜的表達式 ):

var furniture = ['chair', 'bed', 'couch', 'table'];
var filteredItems = furniture.filter(item => {
    console.log('Checking item: ' + item)
    if (item[0]  == 'c'){
        return true;
    } else if(item.length < 4){
        return true;
    }
    else {
        return false;
    }
}); // [ "chair", "bed", "couch" ]

上面,在過濾器功能中採取了幾個動作。該項目被打印到控制台,然後根據兩個條件檢查它是否以 c 開頭 或少於 3 個字母。

看看這些你可以用 JavaScript 數組做的其他有用的事情:

  • 如何通過示例比較 JavaScript 中的數組
  • 使用 JavaScript forEach() 循環遍歷數組,並附上示例
  • JavaScript 中的數組 slice() 方法及示例
  • 用示例檢查數組是否包含 JavaScript 中的值
  • 使用示例從 JavaScript 中的數組中刪除元素

Tutorial JavaScript 教程
  1. 使用 PHP 的簡單動態表單驗證函數

  2. 彩色頭像泡泡

  3. 簡而言之 JavaScript 數據類型

  4. 再見,Moment.js!

  5. 2019 年的 Vue 開發:你需要知道的

  6. 使用 Cloudflare 工作人員進行緩存

  7. 您需要這些 Visual Studio Code 擴展!

  1. 使用 Redux、express-session 和 Apollo 在 React 中處理會話

  2. Supabase Schema Visualizer - 無需安裝/登錄

  3. 更換 UI 框架的(大部分)無痛指南

  4. 使用 NEXT.js 設置 Tailwind 的簡單方法

  5. 使用 React JS 創建無限滾動! ♾️

  6. JavaScript 註釋:好的部分。第 1 至 10 頁

  7. 你如何獲得文本區域中的光標位置?

  1. ✏️ 和我一起學習 ES6:第一部分

  2. 使用 Fastify 構建 CRUD API

  3. Svelte 需要一個虛擬 DOM

  4. 無需編寫單個 SQL 查詢即可創建後端 API - 面向前端開發人員的 Postgres 和 Prisma 簡介