📜  Javascript数组filter()

📅  最后修改于: 2020-09-27 05:40:57             🧑  作者: Mango

JavaScript Array 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' ]

在这里, elementquery都被转换为小写,并且indexOf()方法用于检查element中是否存在查询 。那些未通过此测试的元素将被过滤掉。


推荐读物: JavaScript Array map()