如何在 TypeScript 中过滤数组中的值?
在本教程中，用户将学习如何在 TypeScript 中过滤数组中的值。过滤器是处理从数据库获取的数据的重要操作。
例如，每个人都在 Amazon、Flipkart 等网站上看到过过滤器，可以根据不同的标准过滤产品。要创建类似的东西，我们可以直接从数据库中获取过滤后的数据，也可以从产品数组中获取整个数据并在前端进行过滤，这取决于一些标准，例如数据库大小、性能等。
使用 Array.filter() 方法
数组的 filter() 方法允许我们根据某些单个或多个条件从数组中过滤不同的值。它将回调函数作为参数。用户可以在回调函数中为每个数组元素执行某些条件。如果回调函数对某个元素返回 true，则 filter() 方法会在结果数组中包含该元素。
语法
用户可以按照以下语法使用 filter() 方法过滤数组中的值。
let array: Array<number> = [10, 20, 30, 54, 43, 32, 90, 80];
let result: Array<number> = array.filter(callback_func(element, index, array) {
// 条件来过滤值
});
在上面的语法中，我们创建了数组并通过引用数组来调用过滤方法。
参数
callback_func − 它是一个包含条件来过滤数组值的函数。回调函数的条件根据当前元素是否符合条件返回布尔值。
element − 它是数组的一个元素。
index − 它是元素的索引。
array − 它是我们应用 filter() 方法的当前数组。
示例 1
在下面的示例中，我们创建了一个数字数组。我们希望从数组中过滤出所有能被 10 整除的值。在 filter 方法中，我们将箭头函数作为回调函数传递，如果当前元素能被 10 整除，则返回 true。否则，返回 false。
结果数组将包含所有满足回调函数条件的元素，用户可以在输出中观察到这些元素。
let array: Array<number> = [10, 20, 30, 54, 43, 32, 90, 80];
// 过滤出所有能被 10 整除的值。
let result: Array<number> = array.filter(
// 箭头函数作为回调函数
(element, index, array) => {
// 如果元素除以 10，则返回 true，否则返回 false。
if (element % 10 == 0) {
return true;
}
return false;
}
);
console.log("All filtered values are " + result);
编译后，它将生成以下 JavaScript 代码 -
var array = [10, 20, 30, 54, 43, 32, 90, 80];
// 过滤所有能被 10 整除的值。
var result = array.filter(
// 箭头函数作为回调函数
function (element, index, array) {
// 如果元素能被 10 整除，则返回 true，否则返回 false。
if (element % 10 == 0) {
return true;
}
return false;
});
console.log("All filtered values are " + result);
输出
上述代码将产生以下输出 -
All filtered values are 10,20,30,90,80
示例 2
在下面的示例中，我们创建了一个对象数组，其中包含名称和编程语言作为成员。之后，我们使用 filter 方法从数组中过滤对象，其中包含"c++"作为编程语言。
接下来，我们遍历"CppTutors"数组以打印所有包含"c++"语言的对象。
// 包含名称和编程语言的对象数组
let tutors: Array<{ name: string; language: string }> = [];
// 将一些记录推送到数组
tutors.push({ name: "Jems", language: "C++" });
tutors.push({ name: "Bond", language: "Python" });
tutors.push({ name: "Trump", language: "C++" });
tutors.push({ name: "Alice", language: "Java" });
tutors.push({ name: "Nerd", language: "C" });
// 过滤所有 CPP 导师。
const Cpptutors = tutors.filter((tutor, index) => {
return tutor.language == "C++";
});
// 打印所有 CPP 导师的姓名。
for (let tutor of Cpptutors) {
console.log(tutor.name + " is a CPP tutor.");
}
编译后，它将生成以下 JavaScript 代码 -
// 包含名称和编程语言的对象数组
var tutors = [];
// 将一些记录推送到数组
tutors.push({ name: "Jems", language: "C++" });
tutors.push({ name: "Bond", language: "Python" });
tutors.push({ name: "Trump", language: "C++" });
tutors.push({ name: "Alice", language: "Java" });
tutors.push({ name: "Nerd", language: "C" });
// 过滤所有 CPP 导师。
var Cpptutors = tutors.filter(function (tutor, index) {
return tutor.language == "C++";
});
// 打印所有 CPP 导师的姓名。
for (var _i = 0, Cpptutors_1 = Cpptutors; _i < Cpptutors_1.length; _i++) {
var tutor = Cpptutors_1[_i];
console.log(tutor.name + " is a CPP tutor.");
}
输出
上述代码将产生以下输出 -
Jems is a CPP tutor. Trump is a CPP tutor.
自定义算法过滤数组值
在此方法中，我们将简单地遍历数组的每个元素。对于每个元素，我们将检查该元素是否满足过滤条件，然后将其推送到过滤器数组。
语法
用户可以按照以下语法使用自定义算法过滤数组值。
// 遍历数组的每个元素。
for (let i = 0; i < array.length; i++) {
// 条件来过滤值。
if () {
// 如果条件满足，则将元素推送到filteredValues数组。
filteredValues.push(array[i]);
}
}
算法
用户可以按照以下算法实现上述语法。
步骤 1 - 创建数组来存储过滤后的值。
步骤 2 - 使用 for 循环遍历每个数组元素。
步骤 3 - 如果过滤条件满足元素，则将其推送到过滤数组。
步骤 4 - 过滤后的数组包含满足过滤条件的每个值。
示例
在下面的示例中，我们创建了一个年龄数组。简单来说，我们应用上述算法过滤所有年龄在 18 岁以上的年龄。
// 年龄数组
let ages: Array<number> = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32];
// 存储所有 18 岁以上年龄的数组
let above18: Array<number> = [];
// 遍历年龄并过滤所有 18 岁以上的年龄。
for (let i = 0; i < ages.length; i++) {
if (ages[i] > 18) {
// 将所有年龄在 18 岁以上的推送到 above18 数组。
above18.push(ages[i]);
}
}
// 打印所有 18 岁以上的年龄。
console.log("所有年龄 18 岁以上。");
console.log(above18);
编译后，它将生成以下 JavaScript 代码 -
// 年龄数组
var ages = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32];
// 存储所有 18 岁以上年龄的数组
var above18 = [];
// 遍历年龄并过滤所有 18 岁以上的年龄。
for (var i = 0; i < ages.length; i++) {
if (ages[i] > 18) {
// 将所有年龄在 18 岁以上的推送到 above18 数组。
above18.push(ages[i]);
}
}
// 打印所有 18 岁以上的年龄。
console.log("所有年龄 18 岁以上。");
console.log(above18);
输出
上述代码将产生以下输出 -
所有年龄 18 岁以上。 [ 32, 34, 54, 65, 76, 21, 34, 32 ]
在本教程中，用户学习了如何在 Typescript 中过滤值。在第一个示例中，用户学习了如何使用 filter 方法从数组中过滤值。此外，用户还学习了如何使用 filter 方法根据成员值过滤对象。
最后，我们创建了自定义算法来过滤值，这也代表了如何在 Array 类中实现 filter() 方法。
