如何在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()方法根据特定对象属性在对象的数组中搜索特定对象。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP