過濾具有多個條件/值的 JavaScript 數組 [示例]

本文將向您展示如何使用多個條件過濾數組，以返回多個值。提供了示例代碼。

我們已經大致介紹了過濾數組——本文具體介紹瞭如何使用 Array.filter() 方法。

Array.filter() 方法

filter() 方法適用於 JavaScript 中的所有數組。它創建一個新數組，其中僅包含原始數組中的項，該數組通過提供的函數中的所有條件。

filter() 方法語法

數組的語法 filter() 方法如下：

ARRAY.filter(ELEMENT => FUNCTION)

請注意：

• 陣列 是任何數組變量
• 元素 是您希望為變量使用的名稱，它在測試時引用數組中的每個項目
• 功能 是測試每個 ELEMENT 的函數
  • 它應該為每個元素返回 TRUE 或 FALSE 以決定它是否會出現在結果數組中
• filter() 方法返回一個數組，該數組僅包含原始 ARRAY 中的項目 與 FUNCTION 中的條件匹配

使用多個條件過濾數組

決定原始數組中的一項是否應包含在結果數組中的函數可以包含任意數量的條件——事實上，它是一個標準的 JavaScript 函數，所以你幾乎可以做任何你想做的事情想要在其中 - 只要您在最後為您希望看到的項目返回一個布爾 TRUE 值。

示例：使用多個條件過濾數字

下面定義了一個數字數組，然後根據多個條件進行過濾：

let numbers = [5, 7, 14, 29, 50, 16, 19];

let numbersFiltered = numbers.filter(function (currentElement) {
    return currentElement > 10 && currentElement < 20;
});

numbersFiltered 數組將僅包含原始數組中大於 10 且小於 20 的條目

可以添加更多條件 - 下面的函數將結果過濾為僅 10 到 20 之間的偶數：

let numbersFiltered = numbers.filter(function (currentElement) {
    return currentElement > 10 && currentElement < 20 && currentElement % 2 == 0;
});

上面的例子使用了 % 運算符，它返回它前面的數字除以它後面的數字時的餘數。如果餘數除以 2 是 0 , 是偶數。

示例：使用多個條件過濾字符串

下面，使用多個條件定義和過濾字符串數組：

let strings = ['dog', 'cat', 'bird', 'pig', 'giraffe', 'fox', 'bat'];
let stringsFiltered = strings.filter(function (currentElement) {
    return currentElement.startsWith('b') || currentElement.length > 4;
});

stringsFilteredArray 將僅包含原始數組中以“b”或開頭的項目 字符數大於 4 的那些 - 導致：

[ "bird", "giraffe", "bat" ]

示例：使用多個條件過濾對象

下面，使用多個條件定義和過濾對像數組：

let cars = [
    {make: 'Ford', year: 1997, colour: 'yellow'},
    {make: 'GM', year: 1967, colour: 'red'},
    {make: 'Honda', year: 1988, colour: 'blue'},
    {make: 'Ford', year: 1985, colour: 'pink'},
];
let carsFiltered = cars.filter(function (currentElement) {
    let result = currentElement.year > 1980 && currentElement.year < 1990;
    result = result && currentElement.make == 'Ford';
    return result;
});

通過將第一個檢查（年份在 1980 年和 1990 年之間）分配給一個變量，然後執行附加檢查（是否是福特）並更新變量以反映所有檢查是否已通過，然後返回它來拆分條件。