【JavaScript 教程】第六章 数组07— index() ：在数组中定位一个元素

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节，我们学习了JavaScript 数组 slice() 方法的实际用途，错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组06— slice() ：复制数组元素》进行学习。

那么，在今天的教程中，我们一起来学习如何使用 JavaScript 数组 indexOf() 和 lastIndexOf() 方法来查找数组中元素的位置。

JavaScript 数组 indexOf() 方法介绍

要查找数组中元素的位置，请使用 indexOf() 方法。此方法返回要查找的元素第一次出现的索引，如果未找到该元素，则返回 -1。

下面说明了 indexOf() 方法的语法。

Array.indexOf(searchElement, fromIndex)

如上所示， indexOf() 方法接受两个命名参数。

• searchElement 参数是您要在数组中查找的元素。

• fromIndex 是函数开始搜索的数组索引。

fromIndex 参数可以是正整数或负整数。如果 fromIndex 参数为负，则 indexOf() 方法开始搜索数组的长度加上 fromIndex。

如果省略 fromIndex 参数，indexOf() 方法将从字符串的开头开始搜索。

请注意，在将 searchElement 与数组中的元素进行比较时，indexOf() 方法使用类似于三重等号运算符 (===) 的严格相等比较算法。

JavaScript 数组 indexOf() 方法示例

假设您有一个scores数组，由六个数字组成，如下所示：

var scores = [10, 20, 30, 10, 40, 20];

以下示例使用 indexOf() 方法来查找scores数组中的元素：

console.log(scores.indexOf(10)); // 0
console.log(scores.indexOf(30)); // 2
console.log(scores.indexOf(50)); // -1
console.log(scores.indexOf(20)); // 1

以下示例使用 fromIndex() 和负值：

console.log(scores.indexOf(20,-1)); // 5 (fromIndex = 6+ (-1) = 5)
console.log(scores.indexOf(20,-5)); // 1 (fromIndex = 6+ (-5) = 1)

假设您有以下对象数组，其中每个对象都有两个属性：name和age。

var guests = [
    {name: 'John Doe', age: 30},
    {name: 'Lily Bush', age: 20},
    {name: 'William Gate', age: 25}
];

即使guests数组的第一个元素和 searchElement 在 name 和 age 属性中具有相同的值，以下语句也返回 -1。这是因为它们是两个不同的对象。

console.log(guests.indexOf({
    name: 'John Doe',
    age: 30
})); // -1

有时，您想查找数组中某个元素所有出现的索引。以下 find() 函数使用 indexOf() 方法来执行此操作。

function find(needle, haystack) {
    var results = [];
    var idx = haystack.indexOf(needle);
    while (idx != -1) {
        results.push(idx);
        idx = haystack.indexOf(needle, idx + 1);
    }
    return results;
}

以下示例使用上面的 find() 函数返回scores数组中数字 10 的位置数组。

console.log(find(10,scores)); // [0, 3]

JavaScript 数组 lastIndexOf() 方法

Array 类型有另一个称为 lastIndexOf() 的方法，它提供与 indexOf() 方法类似的功能。

下面说明了 lastIndexOf() 方法的语法：

Array.lastIndexOf(searchElement[, fromIndex = Array.length - 1])

该lastIndexOf()方法返回searchElement数组中最后一次出现的索引。-1如果找不到元素，则返回。

与indexOf()方法不同，该lastIndexOf()方法向后搜索元素，从fromIndex.

以下语句返回scores数组中数字 10 和 20 的最后一个索引。

lastIndexOf() 方法返回数组中最后一次出现 searchElement 的索引。如果找不到该元素，则返回 -1。

与 indexOf() 方法不同，lastIndexOf() 方法从 fromIndex 开始向后搜索元素。

以下语句返回scores数组中数字 10 和 20 的最后一个索引。

console.log(scores.lastIndexOf(10));// 3
console.log(scores.lastIndexOf(20));// 5

由于数字 50 不在scores数组中，因此以下语句返回 -1。

console.log(scores.lastIndexOf(50));// -1

总结

在今天的本教程中，我们一起学习了如何使用 JavaScript 数组 indexOf() 和 lastIndexOf() 方法来定位数组中的元素。

今天的内容就到这里了。

如果您还想学习更多关于数组的内容，请点击下文链接进行学习。

【JavaScript 教程】第六章 数组06— slice() ：复制数组元素

【JavaScript 教程】第六章 数组05— splice()：删除、插入和替换

【JavaScript 教程】第六章 数组04— JavaScript 队列

【JavaScript 教程】第六章 数组03— Stack ：使用 Array 的push()和pop()方法实现堆栈数据结构

【JavaScript 教程】第六章 数组02— Array Length：如何有效地使用数组的长度属性

【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型

学习更多技能

请点击下方公众号