数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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) {
// condition to filter values
});
在上述语法中，我们创建了数组并通过引用数组调用 filter 方法。
参数
callback_func − 它是一个包含过滤数组值的条件的函数。回调函数的条件根据当前元素是否匹配条件返回布尔值。
element − 它是一个数组元素。
index − 它是一个元素的索引。
array − 它是一个我们应用 filter() 方法的当前数组。
示例 1
在下面的示例中，我们创建了一个数字数组。我们希望过滤数组中所有能被 10 整除的值。在 filter 方法中，我们传递了箭头函数作为回调，如果当前元素能被 10 整除则返回 true。否则，返回 false。
结果数组将包含回调函数条件为 true 的所有元素，用户可以在输出中观察到。
let array: Array<number> = [10, 20, 30, 54, 43, 32, 90, 80];
// Filter the all values which are divisible by 10.
let result: Array<number> = array.filter(
// arrow function as a callback function
(element, index, array) => {
// If element is divided by 10, return true else return 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];
// Filter the all values which are divisible by 10.
var result = array.filter(
// arrow function as a callback function
function (element, index, array) {
// If element is divided by 10, return true else return 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++”的对象。
// Array of objects containing the name, and programming language
let tutors: Array<{ name: string; language: string }> = [];
// Push some records to the array
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" });
// Filter all the CPP tutors.
const Cpptutors = tutors.filter((tutor, index) => {
return tutor.language == "C++";
});
// Printe the name of all CPP tutors.
for (let tutor of Cpptutors) {
console.log(tutor.name + " is a CPP tutor.");
}
编译后，它将生成以下 JavaScript 代码：
// Array of objects containing the name, and programming language
var tutors = [];
// Push some records to the array
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" });
// Filter all the CPP tutors.
var Cpptutors = tutors.filter(function (tutor, index) {
return tutor.language == "C++";
});
// Printe the name of all CPP tutors.
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.
自定义算法过滤数组值
在这种方法中，我们将简单地遍历数组的每个元素。对于每个元素，我们将检查该元素是否满足过滤条件，如果满足，我们将将其推入过滤数组。
语法
用户可以按照以下语法使用自定义算法过滤数组值。
// Iterate through every element of the array.
for (let i = 0; i < array.length; i++) {
// condition to filter values.
if () {
// if the condition meets, push the element to filteredValues array.
filteredValues.push(array[i]);
}
}
算法
用户可以按照以下算法执行上述语法。
步骤 1 − 创建数组以存储过滤后的值。
步骤 2 − 使用 for 循环遍历每个数组元素。
步骤 3 − 如果过滤条件满足元素，则将其推入过滤数组。
步骤 4 − 过滤后的数组包含满足过滤条件的每个值。
示例
在下面的示例中，我们创建了一个年龄数组。简单来说，我们应用了上述算法来过滤所有大于 18 岁的年龄。
// Array of ages
let ages: Array<number> = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32];
// array to store all ages above 18
let above18: Array<number> = [];
// Iterate through ages and filter all ages above 18.
for (let i = 0; i < ages.length; i++) {
if (ages[i] > 18) {
// push all ages, which are above 18 to above18 array.
above18.push(ages[i]);
}
}
// Print all ages above 18.
console.log("All ages above 18.");
console.log(above18);
编译后，它将生成以下 JavaScript 代码：
// Array of ages
var ages = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32];
// array to store all ages above 18
var above18 = [];
// Iterate through ages and filter all ages above 18.
for (var i = 0; i < ages.length; i++) {
if (ages[i] > 18) {
// push all ages, which are above 18 to above18 array.
above18.push(ages[i]);
}
}
// Print all ages above 18.
console.log("All ages above 18.");
console.log(above18);
输出
以上代码将产生以下输出：
All ages above 18. [ 32, 34, 54, 65, 76, 21, 34, 32 ]
在本教程中，用户学习了如何在 Typescript 中过滤值。在第一个示例中，用户学习了如何使用 filter 方法过滤数组中的值。此外，用户还学习了如何使用 filter 方法根据成员值过滤对象。
最后，我们创建了自定义算法来过滤值，这也展示了 filter() 方法如何在 Array 类中实现。
11K+ 浏览量
