JavaScript Array filter()用法及代碼示例

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// function to check even numbers
function checkEven(number) {
  if (number % 2 == 0)
    return true;
  else
    return false;
}

// create a new array by filter even numbers from the numbers array
let evenNumbers = numbers.filter(checkEven);
console.log(evenNumbers);

// Output: [ 2, 4, 6, 8, 10 ]

filter() 語法

用法:

arr.filter(callback(element), thisArg)

這裏，arr 是一個數組。

參數：

filter() 方法包含：

• callback- 對每個數組元素執行的測試函數；返回true如果元素通過測試，否則false.它包含：
  • element - 從數組傳遞的當前元素。
• thisArg(可選)- 執行 callback 時用作 this 的值。默認情況下，它是 undefined 。

返回：

• 返回一個僅包含通過測試的元素的新數組。

示例 1：從 Array 中過濾掉值

const prices = [1800, 2000, null, 3000, 5000, "Thousand", 500, 8000]

function checkPrice(element) {
  return element > 2000 && !Number.isNaN(element);
}

let filteredPrices = prices.filter(checkPrice);
console.log(filteredPrices); // [ 3000, 5000, 8000 ]

// using arrow function
let newPrices = prices.filter((price) => (price > 2000 && !Number.isNaN(price)));
console.log(newPrices); // [ 3000, 5000, 8000 ]

輸出

[ 3000, 5000, 8000 ]
[ 3000, 5000, 8000 ]

在這裏，所有小於或等於 2000 的數字，以及所有非數字值都被過濾掉。

示例 2：在數組中搜索

const languages = ["JavaScript", "Python", "Ruby", "C", "C++", "Swift", "PHP", "Java"];

function searchFor(arr, query) {
    function condition(element) {
        return element.toLowerCase().indexOf(query.toLowerCase()) !== -1;
    }
    return arr.filter(condition);
}

let newArr = searchFor(languages, "ja");
console.log(newArr); // [ 'JavaScript', 'Java' ]

// using arrow function
const searchArr = (arr, query) => arr.filter(element => element.toLowerCase().indexOf(query.toLowerCase()) !== -1);

let newLanguages = searchArr(languages, "p");
console.log(newLanguages); // [ 'JavaScript', 'Python', 'PHP' ]

輸出

[ 'JavaScript', 'Java' ]
[ 'JavaScript', 'Python', 'PHP' ]

在這裏，element 和 query 都被轉換為小寫，並且 indexOf() 方法用於檢查 query 是否存在於 element 中。

那些未通過此測試的元素將被過濾掉。