如何在TypeScript中搜索陣列元素?
在TypeScript中,處理陣列時,我們經常需要搜尋特定元素。要搜尋元素,我們可以使用for迴圈的樸素方法,或者使用一些內建方法,例如find()或indexOf()方法。
此外,我們將學習如何根據物件屬性查詢陣列中的特定物件。
使用for-of迴圈在陣列中搜索特定元素
搜尋元素的樸素方法是使用線性搜尋。線上性搜尋中,我們需要使用for迴圈迭代陣列,並檢查每個元素是否與搜尋元素匹配。
語法
使用者可以按照以下語法使用線性搜尋在陣列中搜索特定元素。
let num_array: Array<number> = [ 23, 756, 232, 67, 099, 32, 1, 54, 87, 98, 321, 1, 12, 55, 6, 5, ]; let current: number = 0; let searchElement: number = 6; for (let num of num_array) { if (num === searchElement) { // element found } current++; }
演算法
步驟1 − 定義當前變數以跟蹤陣列的當前索引,並將其初始化為零。
步驟2 − 定義searchElement變數,並將其初始化為搜尋元素。
步驟3 − 使用for-of迴圈迭代num_array。
步驟4 − 在for-of迴圈內,使用if語句檢查當前索引處的元素是否與searchElement匹配。
步驟5 − 在for-of迴圈的每次迭代後,將current加一。
示例
在這個例子中,我們建立了searchInArray()函式來搜尋陣列中的元素。在searchInArray()函式內,我們實現了上述線性搜尋演算法。
// Array of various numbers let num_array: Array<number> = [ 23, 6, 232, 6, 099, 32, 1, 54, 87, 98, 321, 1, 12, 55, 6, 5, ]; // current variable to keep track of the current index let current: number = 0; // element to search in the array let searchElement: number = 6; function searchInArray(searchElement: number) { // for-of loop to iterate through the array for (let num of num_array) { // if searchElement matches to the current element, print the index if (num === searchElement) { console.log("The " + searchElement + " is found at index " + current); } // increase the current by 1. current++; } } // calling the searchInArray function. searchInArray(searchElement); searchInArray(55);
編譯後,它將生成以下JavaScript程式碼:
// Array of various numbers var num_array = [ 23, 6, 232, 6, 099, 32, 1, 54, 87, 98, 321, 1, 12, 55, 6, 5, ]; // current variable to keep track of the current index var current = 0; // element to search in the array var searchElement = 6; function searchInArray(searchElement) { // for-of loop to iterate through the array for (var _i = 0, num_array_1 = num_array; _i < num_array_1.length; _i++) { var num = num_array_1[_i]; // if searchElement matches to the current element, print the index if (num === searchElement) { console.log("The " + searchElement + " is found at index " + current); } // increase the current by 1. current++; } } // calling the searchInArray function. searchInArray(searchElement); searchInArray(55);
輸出
以上程式碼將產生以下輸出:
The 6 is found at index 1 The 6 is found at index 3 The 6 is found at index 14 The 55 is found at index 29
使用find()方法在陣列中搜索元素
find()方法是TypeScript中的內建庫方法,我們可以用它在陣列中查詢元素。find()方法將回調函式作為引數。回撥函式根據特定條件返回true或false。
當回撥函式第一次返回true時,find方法返回該元素。
語法
使用者可以按照以下語法使用find()方法從陣列中查詢元素。
ref_array.find(callback_func); function callback_func(element){ // return true or false based on the value of the element }
引數
callback_func − 這是一個為ref_array的每個元素呼叫的函式。它返回true或false。
返回值
它返回第一個滿足回撥函式條件語句的元素。
示例
在下面的示例中,我們建立了一個包含chir_id、chair_color和chair_wheel的物件陣列。我們使用find()方法搜尋綠色椅子。find()方法的回撥函式根據物件的chair_color屬性返回true或false。
// Creating the interface for the object interface Obj { chair_id: number; chair_color: string; chird_wheel: number; } // creating the array of objects let array_obj: Array<Obj> = [ { chair_id: 1, chair_color: "blue", chird_wheel: 6 }, { chair_id: 2, chair_color: "black", chird_wheel: 5 }, { chair_id: 3, chair_color: "green", chird_wheel: 4 }, { chair_id: 4, chair_color: "red", chird_wheel: 5 }, { chair_id: 5, chair_color: "blue", chird_wheel: 6 }, ]; // store searched object, returned from the find() method let searched_obj: Obj | undefined = array_obj.find(callback_func); // callback function returning the boolean value function callback_func(object: Obj): boolean { // if the object color is green, return true; otherwise, return false for a particular object element if (object.chair_color == "green") { return true; } return false; } // Print the id of the searched object console.log("The searched object is " + searched_obj.chair_id);
編譯後,它將生成以下JavaScript程式碼:
// creating the array of objects var array_obj = [ { chair_id: 1, chair_color: "blue", chird_wheel: 6 }, { chair_id: 2, chair_color: "black", chird_wheel: 5 }, { chair_id: 3, chair_color: "green", chird_wheel: 4 }, { chair_id: 4, chair_color: "red", chird_wheel: 5 }, { chair_id: 5, chair_color: "blue", chird_wheel: 6 }, ]; // store searched object, returned from the find() method var searched_obj = array_obj.find(callback_func); // callback function returning the boolean value function callback_func(object) { // if the object color is green, return true; otherwise, return false for a particular object element if (object.chair_color == "green") { return true; } return false; } // Print the id of the searched object console.log("The searched object is " + searched_obj.chair_id);
輸出
以上程式碼將產生以下輸出:
The searched object is 3
使用indexOf()方法在陣列中搜索元素
indexOf()方法接受陣列元素作為引數,而不是回撥函式。它返回元素在陣列中第一次出現的索引。
語法
使用者可以按照以下語法使用indexOf()方法在陣列中搜索元素。
let elementIndex: number = array.indexOf(element, startIndex);
引數
element − 這是要在陣列中搜索的元素。
startIndex − 這是一個可選引數,表示在陣列中搜索元素的起始索引。
返回值
它返回元素在陣列中第一次出現的索引值,如果找不到元素則返回-1。
示例
下面的例子演示瞭如何使用indexOf()方法查詢陣列中特定元素的第一次出現。我們建立了一個字串陣列,並使用indexOf()方法在陣列中查詢特定字串。
let str_array: Array<string> = [ "TutorialsPoint", "Hello", "TypeScript", "!", ".", ]; // using the indexOf() method. let searched_index: number = str_array.indexOf("!"); console.log( "The first occurrence of the ! in the str_array is at index " + searched_index );
編譯後,它將生成以下JavaScript程式碼:
var str_array = [ "TutorialsPoint", "Hello", "TypeScript", "!", ".", ]; // using the indexOf() method. var searched_index = str_array.indexOf("!"); console.log("The first occurrence of the ! in the str_array is at index " + searched_index);
輸出
以上程式碼將產生以下輸出:
The first occurrence of the ! in the str_array is at index 3
我們學習了在陣列中搜索元素的不同方法。此外,我們還學習瞭如何使用find()方法根據特定物件屬性在物件的陣列中搜索特定物件。