如何在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步–定义current变量来跟踪数组的当前索引，并将其初始化为0。

• 第2步 – 定义searchElement变量，并用搜索元素对其进行初始化。

• 第3步 – 使用for-of循环来迭代thenum_array。

• 第4步 – 在for-of循环中，使用if语句来检查当前索引的元素是否与searchElement相匹配。

• 第5步 – 在for-of循环的每一次迭代后，将电流增加1。

示例

在这个例子中，我们创建了 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);

// 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()方法将回调函数作为一个参数。回调函数根据某个条件返回真或假。

当回调函数第一次返回真时，查找方法会返回该元素。

语法

用户可以按照下面的语法，使用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的每个元素调用的函数。它返回真或假。

返回值

它返回第一个元素，这满足了回调函数的条件声明。

示例

在下面的例子中，我们已经创建了包含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);

// 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
);

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()方法在对象的数组中搜索一个特定的对象。