Javascript数组filter()

filter()方法的语法为：

arr.filter(callback(element), thisArg)

在这里， arr是一个数组。

filter()参数

filter()方法采用：

callback-在每个数组元素上执行的测试函数；如果element通过测试，则返回true ，否则返回false 。它包含：
- 元件 -当前元件从所述阵列被通过。
thisArg (可选)-执行callback时用作this值。默认情况下，它是undefined 。

从filter()返回值

返回仅包含通过测试的元素的新数组。

注意事项 ：

filter()不会更改原始数组。
filter()不会对没有值的数组元素执行callback 。

示例1：从数组中筛选出值

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()方法用于检查element中是否存在查询 。那些未通过此测试的元素将被过滤掉。

推荐读物： JavaScript Array map()

JavaScript Array filter()方法返回一个新数组，其中包含所有通过给定函数定义的测试的元素。

filter()参数

从filter()返回值

示例1：从数组中筛选出值

示例2：在数组中搜索