首页 > web前端 > js教程 > 正文

js 如何用indexOf查找数组中元素的索引

星降
发布: 2025-08-21 14:11:01
原创
318人浏览过

在javascript中查找数组元素索引最常用的方法是indexof(),它返回指定元素首次出现的索引,若未找到则返回-1;2. indexof()使用严格相等(===)比较,因此类型和值都必须匹配;3. 该方法可接受第二个参数fromindex,用于指定查找起始位置,若该值大于等于数组长度则直接返回-1;4. indexof()无法查找nan,因为nan不等于自身,此时应使用findindex()结合isnan()或includes()方法;5. 对于对象数组或复杂条件查找,应使用findindex(),因为它接受回调函数并可自定义匹配逻辑;6. 要查找某元素所有匹配的索引,需通过循环结合indexof()的fromindex参数反复查找,每次从上一个匹配位置的后一位开始;7. indexof()能正常查找undefined和null,但在处理特殊值和复杂数据结构时需注意其局限性。

js 如何用indexOf查找数组中元素的索引

在 JavaScript 里,要查找数组中元素的索引,最直接也最常用的方法就是使用数组自带的

indexOf()
登录后复制
方法。它会返回你要找的那个元素在数组里第一次出现的位置(也就是索引值),如果数组里根本没有这个元素,它就会给你返回
-1
登录后复制

解决方案

indexOf()
登录后复制
方法的用法其实挺简单的,它接受两个参数:你要查找的元素,以及一个可选的参数,表示从哪个索引位置开始查找。

它的基本语法是这样的:

arr.indexOf(searchElement[, fromIndex])
登录后复制

  • searchElement
    登录后复制
    :这是你想要在数组中查找的那个值。
  • fromIndex
    登录后复制
    (可选):一个整数,表示从数组的哪个索引位置开始向后查找。如果你省略了这个参数,或者给它传了个小于 0 的值,查找就会从数组的开头(索引 0)开始。如果传的值大于或等于数组的长度,那么
    indexOf
    登录后复制
    就不会执行任何搜索,直接返回
    -1
    登录后复制

让我们看几个例子,这会让你对它的行为模式有个更清晰的认识:

const fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];

// 查找 'banana' 的索引
const bananaIndex = fruits.indexOf('banana');
console.log(bananaIndex); // 输出: 1

// 查找 'apple' 的索引,注意它只返回第一个匹配的
const firstAppleIndex = fruits.indexOf('apple');
console.log(firstAppleIndex); // 输出: 0

// 查找一个不存在的元素
const kiwiIndex = fruits.indexOf('kiwi');
console.log(kiwiIndex); // 输出: -1

// 从特定索引开始查找
// 查找从索引 2('orange')开始的 'apple'
const secondAppleIndex = fruits.indexOf('apple', 2);
console.log(secondAppleIndex); // 输出: 3

// 数组中没有的元素,即使指定了起始索引也一样
const noSuchElement = fruits.indexOf('mango', 0);
console.log(noSuchElement); // 输出: -1

// fromIndex 大于等于数组长度,直接返回 -1
const fromTooFar = fruits.indexOf('apple', 10);
console.log(fromTooFar); // 输出: -1
登录后复制

indexOf()
登录后复制
在查找时使用的是严格相等(
===
登录后复制
)比较。这意味着它不仅比较值,还会比较类型。比如,数字
5
登录后复制
和字符串
'5'
登录后复制
indexOf()
登录后复制
看来是完全不同的。

const mixedArray = [1, '2', 3, '4'];
console.log(mixedArray.indexOf(1));   // 输出: 0
console.log(mixedArray.indexOf('2'));  // 输出: 1
console.log(mixedArray.indexOf(2));    // 输出: -1 (数字 2 不存在,只有字符串 '2')
登录后复制

indexOf 和 findIndex 有什么区别

这是个经常被问到的问题,因为它们听起来功能很相似,但实际应用场景却大相径庭。简单来说,

indexOf
登录后复制
专注于查找值的索引,而
findIndex
登录后复制
则专注于查找满足某个条件的元素的索引

  • indexOf()
    登录后复制
    : 就像我们上面说的,它用严格相等 (
    ===
    登录后复制
    ) 来比较你提供的
    searchElement
    登录后复制
    和数组中的每一个元素。它最适合用来查找原始类型(字符串、数字、布尔值、
    null
    登录后复制
    undefined
    登录后复制
    )在数组中的位置。它无法直接用来查找对象或数组(除非它们是同一个内存地址的引用)。

    const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
    const targetUser = { id: 1, name: 'Alice' };
    
    // 这会返回 -1,因为 targetUser 和数组中的第一个对象虽然内容一样,但不是同一个对象引用
    console.log(users.indexOf(targetUser)); // 输出: -1
    登录后复制
  • findIndex()
    登录后复制
    : 这个方法强大得多,因为它接受一个回调函数作为参数。这个回调函数会为数组中的每个元素执行一次,当回调函数返回
    true
    登录后复制
    时,
    findIndex
    登录后复制
    就会返回当前元素的索引,然后停止遍历。如果没有任何元素让回调函数返回
    true
    登录后复制
    ,它就返回
    -1
    登录后复制
    。这让
    findIndex
    登录后复制
    在处理复杂数据结构时非常灵活,比如查找对象数组中某个特定属性值的对象。

    const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
    
    // 查找 id 为 2 的用户的索引
    const bobIndex = users.findIndex(user => user.id === 2);
    console.log(bobIndex); // 输出: 1
    
    // 查找 name 包含 'ice' 的用户的索引
    const aliceIndex = users.findIndex(user => user.name.includes('ice'));
    console.log(aliceIndex); // 输出: 0
    
    // 查找一个不存在的条件
    const charlieIndex = users.findIndex(user => user.name === 'Charlie');
    console.log(charlieIndex); // 输出: -1
    登录后复制

所以,当你只需要找到一个精确匹配的原始值时,用

indexOf
登录后复制
既简洁又高效。但如果你的查找条件更复杂,或者你正在处理对象数组,那么
findIndex
登录后复制
几乎总是更好的选择。

如何用 indexOf 查找所有匹配元素的索引?

indexOf()
登录后复制
的一个“缺点”是它只会返回第一个找到的元素的索引。如果你想找出某个元素在数组中所有出现的位置,光靠
indexOf()
登录后复制
是不够的,你需要结合循环来反复调用它,并巧妙地利用它的
fromIndex
登录后复制
参数。

纳米搜索
纳米搜索

纳米搜索:360推出的新一代AI搜索引擎

纳米搜索30
查看详情 纳米搜索

思路是这样的:先找到第一个,然后从第一个的下一个位置开始继续找,直到找不到为止。

下面是一个实现这个逻辑的例子:

function findAllIndices(arr, searchElement) {
    const indices = [];
    let currentIndex = arr.indexOf(searchElement); // 首次查找

    while (currentIndex !== -1) {
        indices.push(currentIndex); // 找到了,记录下来
        // 从当前找到的索引的下一个位置开始继续查找
        currentIndex = arr.indexOf(searchElement, currentIndex + 1);
    }
    return indices;
}

const numbers = [1, 2, 3, 2, 4, 2, 5];
const allTwoIndices = findAllIndices(numbers, 2);
console.log(allTwoIndices); // 输出: [1, 3, 5]

const allOneIndices = findAllIndices(numbers, 1);
console.log(allOneIndices); // 输出: [0]

const allSixIndices = findAllIndices(numbers, 6);
console.log(allSixIndices); // 输出: []
登录后复制

这个

while
登录后复制
循环的模式非常经典且实用,它能有效地遍历数组中所有符合条件的元素。每次找到一个,我们就把它的索引存起来,然后把下一次
indexOf
登录后复制
的起始位置设置到当前找到的索引的后一位,这样就能避免重复找到同一个元素,并确保能找到所有后续的匹配项。

indexOf 在处理特殊值(如 NaN 或 undefined)时有什么需要注意的?

在 JavaScript 中,一些特殊的值在比较行为上会有一些“怪异”的地方,这也会影响到

indexOf()
登录后复制
的表现。了解这些能帮助你避免一些潜在的坑。

  • NaN
    登录后复制
    (Not-a-Number): 这是最需要注意的一个。
    indexOf()
    登录后复制
    无法找到
    NaN
    登录后复制
    。这是因为
    NaN
    登录后复制
    在 JavaScript 中有一个独特的性质:它不等于任何值,包括它自己 (
    NaN === NaN
    登录后复制
    的结果是
    false
    登录后复制
    )。因此,
    indexOf
    登录后复制
    依赖的严格相等比较对
    NaN
    登录后复制
    是无效的。

    const weirdNumbers = [1, 2, NaN, 3];
    console.log(weirdNumbers.indexOf(NaN)); // 输出: -1
    登录后复制

    如果你需要查找数组中是否存在

    NaN
    登录后复制
    ,或者找到
    NaN
    登录后复制
    的索引,你不能用
    indexOf()
    登录后复制
    。这时,
    findIndex()
    登录后复制
    就能派上用场,你可以结合
    isNaN()
    登录后复制
    函数来判断:

    console.log(weirdNumbers.findIndex(item => isNaN(item))); // 输出: 2
    登录后复制

    或者,如果你只是想知道数组中是否包含

    NaN
    登录后复制
    Array.prototype.includes()
    登录后复制
    是一个更好的选择,因为它能正确处理
    NaN
    登录后复制

    console.log(weirdNumbers.includes(NaN)); // 输出: true
    登录后复制
  • undefined
    登录后复制
    :
    indexOf()
    登录后复制
    可以正常找到
    undefined
    登录后复制

    const mixedValues = [1, undefined, 3, null];
    console.log(mixedValues.indexOf(undefined)); // 输出: 1
    登录后复制
  • null
    登录后复制
    :
    indexOf()
    登录后复制
    同样可以正常找到
    null
    登录后复制

    const mixedValues = [1, undefined, 3, null];
    console.log(mixedValues.indexOf(null)); // 输出: 3
    登录后复制

总之,

indexOf()
登录后复制
是一个非常实用的数组方法,尤其适用于查找原始类型的值。但在处理对象、复杂查找逻辑或
NaN
登录后复制
这样的特殊值时,了解它的局限性并知道何时转向
findIndex()
登录后复制
或其他方法,是写出健壮且高效 JavaScript 代码的关键。

以上就是js 如何用indexOf查找数组中元素的索引的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号