資料結構
網路
關係資料庫管理系統
作業系統
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+ 瀏覽量
