JavaScript 数组 filter
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何在 JavaScript 中过滤数组。filter 函数创建一个新数组，其中包含通过谓词函数的所有元素。
数组是一系列值的集合。数组项称为数组的元素。
谓词
谓词通常的含义是关于某事的陈述，该陈述为真或假。在编程中，谓词表示返回布尔值的单参数函数。
JS filter 函数
filter 函数创建一个新数组，其中包含满足给定谓词的所有元素。
filter(predicate, [ctx])
filter 函数将谓词作为其第一个参数。第二个参数是可选的；它是一个帮助上下文对象。在谓词内部，我们可以使用 this 关键字访问上下文对象的属性。
JS 数组 filter 示例
在第一个示例中，我们过滤数组中的数字。
positive.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 数组 filter 上下文
在下一个示例中，我们在过滤中使用上下文对象。
filter_range.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 数组 filter 数据类型
typeof 运算符返回一个字符串，指示操作数的类型。
filter_datatype.js
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 数组 filter 对象
我们有一个对象数组。我们根据对象属性过滤数组。
filter_by_city.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' }
]
我们可以按多个属性过滤对象。
filter_by_city_name.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' && 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 库。
filter_by_age.js
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 数组的过滤。