JavaScript 查找数组中的项的最佳方法

在JavaScript中，数组是可以保存不同数据类型的元素的集合。有多种方法可以检查特定项是否在数组中。在本文中，我们将看到在JavaScript中查找给定数组中的项的可能技术。

最常用的方法是查找JavaScript数组中的项的方法有：

使用includes()方法
使用indexOf()方法
使用find()方法

方法1：使用includes()方法

includes()方法检查数组是否包含某个值，并根据情况返回布尔值true或false。

语法：

array.includes(value)

示例 1： 在这个示例中，我们有一个包含三种水果的数组。我们使用includes()方法来检查香蕉是否在数组中，返回true。我们还检查葡萄是否在数组中，返回false。

JavaScript

const fruits = ['apple', 'banana', 'orange']; 
console.log(fruits.includes('banana')); // Output: true 
console.log(fruits.includes('grapes')); // Output: false

输出：

true
false

示例2: 在这个示例中，使用if-else语句来确定数组中是否存在’cat’。如果在数组中找到’cat’，则会在控制台上打印消息“Cat is in the array!”。如果在数组中找不到’cat’，则会打印消息“Cat is not in the array.”。

JavaScript

const animals = ['dog', 'cat', 'bird', 'rabbit']; 
  
// Check if 'cat' is in the array using includes() 
if (animals.includes('cat')) { 
    console.log('Cat is present in the array!'); 
} else { 
    console.log('Cat is not present in the array.'); 
};

输出：

Cat is present in the array!

方法2：使用indexOf()方法

indexOf()方法 返回数组中指定值的第一次出现的索引，如果未找到则返回-1。

语法：

array.indexOf(value)

示例1: 在这个示例中，我们有一个包含三个水果的数组。我们使用indexOf()方法来检查数组中是否包含香蕉，返回的是索引1（因为香蕉是数组中的第二个元素）。我们还检查了数组中是否包含葡萄，返回的是-1（因为葡萄在数组中未被找到）。

JavaScript

const fruits = ['apple', 'banana', 'orange']; 
console.log(fruits.indexOf('banana')); // Output: 1 
console.log(fruits.indexOf('grapes')); // Output: -1

输出结果:

1
-1

示例2： 在这个示例中，使用indexOf()方法来检查”hamster”是否在动物数组中。如果该方法返回-1，则表示”hamster”不在数组中，代码将输出”Hamster is not in the array.”。如果该方法返回除-1之外的值，则表示”hamster”在数组中，代码将输出”Hamster is in the array!”。

Javascript

const animals = ['dog', 'cat', 'bird', 'rabbit']; 
  
// Check if 'hamster' is in the array using indexOf() 
if (animals.indexOf('hamster') !== -1) { 
    console.log('Hamster is in the array!'); 
} else { 
    console.log('Hamster is not in the array.'); 
};

输出：

Hamster is not in the array.

方式3：使用find()方法

find()方法返回数组中满足提供的测试函数的第一个元素的值，如果没有满足的元素，则返回undefined。

语法：

array.find(callback)

参数： 此方法接受一个数组作为数组的名称，还有一个回调函数表示测试函数。

示例1： 在这个例子中，使用find()方法调用fruits数组，并将回调函数作为参数传入。回调函数以数组的每个元素作为参数，并返回一个布尔值，表示该元素是否与所需条件匹配。

Javascript

const fruits = ['apple', 'banana', 'orange']; 
const result = fruits.find(fruit => fruit === 'banana'); 
if (result) { 
    console.log("banana is present in the array"); 
} else { 
    console.log("banana is not present in the array"); 
};

输出：

banana is present in the array

示例2： 在这个示例中，我们有一个包含四个对象的人员数组，每个对象代表一个拥有姓名和年龄的人。我们使用find()方法在数组中搜索第一个满足提供的测试函数person => person.age > 30的对象，该函数检查当前人的年龄是否大于30。

Javascript

const people = [ 
    { name: 'John', age: 28 }, 
    { name: 'Jane', age: 32 }, 
    { name: 'Mary', age: 25 }, 
    { name: 'Mark', age: 36 }, 
]; 
  
// Find the first person in the array  
// who is over 30 years old 
const result = people.find(person => person.age > 30); 
  
if (result) { 
    console.log(`The first person over 30 is ${result.name}.`); 
} else { 
    console.log('No people over 30 found in the array.'); 
};

输出: 由于Jane和Mark都超过了30岁，测试函数对他们两人都返回true，但是find()方法只返回满足测试函数的第一个元素，也就是代表Jane的对象。结果被赋值给变量result，它保存的是对象{name:’Jane’, age: 32}。最后，代码打印出了一条消息，即第一个超过30岁的人是Jane。