快捷導(dǎo)航

JavaScript查找數(shù)組中指定元素的索引的方法小結(jié)

更新時(shí)間：2026年01月19日 09:21:36 作者：Never_Satisfied

這篇文章主要介紹了JavaScript中查找數(shù)組元素索引的五種方法：indexOf()、lastIndexOf()、findIndex()、findLastIndex()和手動(dòng)循環(huán),每種方法都有其適用場(chǎng)景和返回值,手動(dòng)循環(huán)在性能上可能更優(yōu),選擇時(shí)應(yīng)考慮具體需求和數(shù)組大小,需要的朋友可以參考下

1. indexOf() - 查找簡(jiǎn)單值

const arr = ['apple', 'banana', 'orange', 'banana'];

// 查找第一個(gè)匹配項(xiàng)的索引
console.log(arr.indexOf('banana')); // 1

// 查找不存在的元素
console.log(arr.indexOf('grape')); // -1

// 從指定位置開始查找
console.log(arr.indexOf('banana', 2)); // 3

2. lastIndexOf() - 從后往前查找

const arr = ['apple', 'banana', 'orange', 'banana'];

console.log(arr.lastIndexOf('banana')); // 3
console.log(arr.lastIndexOf('banana', 2)); // 1

3. findIndex() - 使用回調(diào)函數(shù)查找

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// 查找第一個(gè)滿足條件的元素索引
const index = users.findIndex(user => user.name === 'Bob');
console.log(index); // 1

// 查找年齡大于25的用戶索引
const ages = [18, 22, 30, 45];
const ageIndex = ages.findIndex(age => age > 25);
console.log(ageIndex); // 2

4. findLastIndex() - 從后往前使用回調(diào)函數(shù)查找

const numbers = [1, 2, 3, 4, 3, 5];

// 從后往前查找第一個(gè)滿足條件的元素索引
const lastIndex = numbers.findLastIndex(num => num === 3);
console.log(lastIndex); // 4

5. 手動(dòng)循環(huán)實(shí)現(xiàn)

function findIndexCustom(arr, value) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === value) {
      return i;
    }
  }
  return -1;
}

const arr = ['a', 'b', 'c'];
console.log(findIndexCustom(arr, 'b')); // 1
console.log(findIndexCustom(arr, 'd')); // -1

實(shí)際應(yīng)用示例

// 查找對(duì)象數(shù)組中的特定元素
const products = [
  { id: 1, name: 'Laptop', price: 1000 },
  { id: 2, name: 'Phone', price: 500 },
  { id: 3, name: 'Tablet', price: 300 }
];

// 查找價(jià)格低于400的產(chǎn)品索引
const cheapProductIndex = products.findIndex(product => product.price < 400);
console.log(cheapProductIndex); // 2

// 查找所有匹配項(xiàng)的索引
function findAllIndexes(arr, value) {
  const indexes = [];
  let currentIndex = -1;
  
  while ((currentIndex = arr.indexOf(value, currentIndex + 1)) !== -1) {
    indexes.push(currentIndex);
  }
  
  return indexes;
}

const fruits = ['apple', 'banana', 'apple', 'orange', 'apple'];
console.log(findAllIndexes(fruits, 'apple')); // [0, 2, 4]

總結(jié)

簡(jiǎn)單值查找：使用 indexOf() 或 lastIndexOf()
復(fù)雜條件查找：使用 findIndex() 或 findLastIndex()
返回值：所有方法在未找到時(shí)都返回 -1
性能考慮：對(duì)于大型數(shù)組，indexOf() 通常比手動(dòng)循環(huán)更快

根據(jù)具體需求選擇合適的方法！

到此這篇關(guān)于JavaScript查找數(shù)組中指定元素的索引的方法小結(jié)的文章就介紹到這了,更多相關(guān)JS查找數(shù)組中指定元素的索引內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: