JavaScript array filter

JavaScript 数组过滤器教程展示了如何在 JavaScript 中过滤数组。 filter 函数创建一个新数组，其中包含所有通过 predicate 函数的元素。

数组是许多值的集合。数组项称为数组的元素。

谓词

一般意义上的谓词是关于某事为真或假的陈述。在编程中，谓词表示返回布尔值的单参数函数。

JS过滤函数

filter 函数创建一个新数组，其中包含满足给定谓词的所有元素。

filter(predicate, [ctx])

filter 函数将谓词作为其第一个参数。第二个参数是可选的；它是一个辅助上下文对象。在谓词内部，我们可以使用this 关键字访问上下文对象的属性。

JS 数组过滤器示例

在第一个示例中，我们过滤数组中的数字。

let nums = [4, -5, 3, 2, -1, 7, -6, 8, 9];

let pos_nums = nums.filter((e) => e > 0);
console.log(pos_nums);

我们有一个数字数组。使用 filter 函数，我们创建了一个仅包含正数的新数组。

let pos_nums = nums.filter((e) => e > 0);

在这种情况下，谓词是一个匿名函数，它为大于零的值返回 true。

$ node positive.js 
[ 4, 3, 2, 7, 8, 9 ]

JS数组过滤上下文

在下一个示例中，我们在过滤中使用上下文对象。

function isInRange(val) {

    return val >= this.lower && val <= this.upper;
}

let range = {
    lower: 1,
    upper: 10
};

let data = [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let res = data.filter(isInRange, range);
console.log(res);

我们有一组值。我们在上下文对象中指定过滤的下限和上限。

function isInRange(val) {

    return val >= this.lower && val <= this.upper;
}

我们通过this 关键字访问上下文的属性。

let range = {
    lower: 1,
    upper: 10
};

这是上下文对象。

let res = data.filter(isInRange, range);

我们将上下文作为第二个参数传递。

$ node filter_range.js 
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

JS数组过滤数据类型

typeof 运算符返回一个字符串，指示操作数的类型。

function isNumber(value) {

    if (typeof value === 'number') {
        return true;
    }
}

let data = [10, null, "30", 1.4, 'falcon', undefined, true, 17];

let res = data.filter(isNumber);
console.log(res);

例子中，data数组有各种数据类型的元素，我们过滤掉所有数字。

function isNumber(value) {

    if (typeof value === 'number') {
        return true;
    }
}

在isNumber 谓词中，我们使用typeof 运算符检查数值。

$ node filter_datatype.js 
[ 10, 1.4, 17 ]

JS数组过滤对象

我们有一个对象数组。我们根据对象属性过滤数组。

const users = [
  { name: 'John', city: 'London', born: '2001-04-01' },
  { name: 'Lenny', city: 'New York', born: '1997-12-11' },
  { name: 'Andrew', city: 'Boston', born: '1987-02-22' },
  { name: 'Peter', city: 'Prague', born: '1936-03-24' },
  { name: 'Anna', city: 'Bratislava', born: '1973-11-18' },
  { name: 'Albert', city: 'Bratislava', born: '1940-12-11' },
  { name: 'Adam', city: 'Trnava', born: '1983-12-01' },
  { name: 'Robert', city: 'Bratislava', born: '1935-05-15' },
  { name: 'Robert', city: 'Prague', born: '1998-03-14' }
];


let res = users.filter(user => user.city === 'Bratislava');
console.log(res);

该示例过滤掉居住在布拉迪斯拉发的所有用户。

$ node filter_by_city
[
  { name: 'Anna', city: 'Bratislava', born: '1973-11-18' },
  { name: 'Albert', city: 'Bratislava', born: '1940-12-11' },
  { name: 'Robert', city: 'Bratislava', born: '1935-05-15' }
]

我们可以通过多个属性过滤对象。

const users = [
  { name: 'John', city: 'London', born: '2001-04-01' },
  { name: 'Lenny', city: 'New York', born: '1997-12-11' },
  { name: 'Andrew', city: 'Boston', born: '1987-02-22' },
  { name: 'Peter', city: 'Prague', born: '1936-03-24' },
  { name: 'Anna', city: 'Bratislava', born: '1973-11-18' },
  { name: 'Albert', city: 'Bratislava', born: '1940-12-11' },
  { name: 'Adam', city: 'Trnava', born: '1983-12-01' },
  { name: 'Robert', city: 'Bratislava', born: '1935-05-15' },
  { name: 'Robert', city: 'Prague', born: '1998-03-14' }
];

let res = users.filter(user => user.city === 'Bratislava' && user.name.startsWith('A'));
console.log(res);

我们过滤所有居住在布拉迪斯拉发且名字以“A”开头的用户。

$ node filter_by_city_name.js 
[
  { name: 'Anna', city: 'Bratislava', born: '1973-11-18' },
  { name: 'Albert', city: 'Bratislava', born: '1940-12-11' }
]

在下一个示例中，我们将按年龄进行过滤。为此，我们需要 moment 库。

$ nmp i moment

我们安装moment库。

const moment = require('moment');

const users = [
  { name: 'John', city: 'London', born: '2001-04-01' },
  { name: 'Lenny', city: 'New York', born: '1997-12-11' },
  { name: 'Andrew', city: 'Boston', born: '1987-02-22' },
  { name: 'Peter', city: 'Prague', born: '1936-03-24' },
  { name: 'Anna', city: 'Bratislava', born: '1973-11-18' },
  { name: 'Albert', city: 'Bratislava', born: '1940-12-11' },
  { name: 'Adam', city: 'Trnava', born: '1983-12-01' },
  { name: 'Robert', city: 'Bratislava', born: '1935-05-15' },
  { name: 'Robert', city: 'Prague', born: '1998-03-14' }
];

let res = users.filter(user => getAge(user.born) > 40);

console.log(res);


function getAge(dt) {

    return moment.duration(moment() - moment(dt, 'YYYY-MM-DD', true)).years();
}

该示例过滤掉所有 40 岁以上的用户。

$ node filter_by_age.js 
[
  { name: 'Peter', city: 'Prague', born: '1936-03-24' },
  { name: 'Anna', city: 'Bratislava', born: '1973-11-18' },
  { name: 'Albert', city: 'Bratislava', born: '1940-12-11' },
  { name: 'Robert', city: 'Bratislava', born: '1935-05-15' }
]

在本文中，我们介绍了 JavaScript 数组的过滤。

列出所有 JavaScript 教程。