卡卡網(wǎng)

本文主要討論JavaScript中的數(shù)組元素定位和查找方法，indexOf()、find()、findIndex()，介紹這幾種方法的使用區(qū)別。

定位元素：indexOf()

要查找數(shù)組中元素的位置，請(qǐng)使用indexOf()方法。此方法返回要查找的元素第一次出現(xiàn)的索引，如果未找到該元素，則返回 -1。

下面是indexOf()方法的語(yǔ)法。

Array.indexOf(searchElement, fromIndex)

indexOf()方法接受兩個(gè)命名參數(shù)。

• searchElement 參數(shù)是要在數(shù)組中找到的元素。
• fromIndex 是函數(shù)開(kāi)始搜索的數(shù)組索引。

fromIndex 參數(shù)可以是正整數(shù)或負(fù)整數(shù)。如果fromIndex 參數(shù)為負(fù)，則indexOf()方法從數(shù)組的長(zhǎng)度加 fromIndex 開(kāi)始搜索

如果省略 fromIndex 參數(shù)，indexOf()方法將從字符串的開(kāi)頭開(kāi)始搜索。

示例

假設(shè)有一個(gè)由六個(gè)數(shù)字組成的數(shù)組scores，如下所示：

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

以下示例使用indexOf()方法查找scores數(shù)組中的元素：

console.log(scores.indexOf(10)); // 0
console.log(scores.indexOf(30)); // 2
console.log(scores.indexOf(50)); // -1
console.log(scores.indexOf(20)); // 1
console.log(scores.indexOf(20,-1)); // 5 (fromIndex = 6+ (-1) = 5)
console.log(scores.indexOf(20,-5)); // 1 (fromIndex = 6+ (-5) = 1)

demodownload

查找元素：find()

在 ES5 中，要在數(shù)組中查找元素，可以使用indexOf()或lastIndexOf()方法。但是，這些方法非常有限，因?yàn)樗鼈冎环祷氐谝粋€(gè)匹配元素的索引。

ES6 引入了一種新方法，稱為find()添加到Array.prototype對(duì)象。

該find()方法返回?cái)?shù)組中滿足所提供函數(shù)的第一個(gè)元素。

下面顯示了該find()方法的語(yǔ)法：

find(callback(element[, index[, array]])[, thisArg])

參數(shù)

find()接受兩個(gè)參數(shù)：一個(gè)callback和一個(gè)用于callback內(nèi)部this的可選值。

1) callback

callback是在數(shù)組的每個(gè)元素上執(zhí)行的回調(diào)函數(shù)。它需要三個(gè)參數(shù)：

• element 是當(dāng)前元素。
• index 當(dāng)前元素的索引。
• array find()  被調(diào)用的數(shù)組。

2) thisArg

thisArg是callback內(nèi)部用作this的對(duì)象。

返回值

find()對(duì)數(shù)組中的每個(gè)元素執(zhí)行callback函數(shù)，直到callback返回一個(gè)真值。

如果回調(diào)返回真值，則find()立即返回元素并停止搜索。否則，它返回undefined。

如果要查找找到的元素的索引，可以使用findIndex()方法。

find()示例

以下示例使用find()方法在數(shù)字?jǐn)?shù)組中搜索第一個(gè)偶數(shù)：

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

console.log(numbers.find(e => e % 2 == 0));

輸出

2

假設(shè)我們有一個(gè)客戶對(duì)象列表，其name屬性credit如下：

let customers = [{
    name: 'ABC Inc',
    credit: 100
}, {
    name: 'ACME Corp',
    credit: 200
}, {
    name: 'IoT AG',
    credit: 300
}];

以下代碼使用find()方法查找信用大于 100 的第一個(gè)客戶。

console.log(customers.find(c => c.credit > 100));

輸出

{ name: 'ACME Corp', credit: 200 }

查找元素的索引：findIndex()

ES6 對(duì)Array.prototype添加了一個(gè)名為findIndex()的新方法，它允許你在數(shù)組中找到滿足提供的測(cè)試功能的第一個(gè)元素。

findIndex()方法返回滿足測(cè)試函數(shù)的元素的索引，如果沒(méi)有元素通過(guò)測(cè)試，則返回 -1。

下面說(shuō)明了findIndex()方法的語(yǔ)法：

findIndex(testFn(element[, index[, array]])[, thisArg])

findIndex()需要兩個(gè)參數(shù)：

1) testFn

testFn是一個(gè)對(duì)數(shù)組中的每個(gè)元素執(zhí)行的函數(shù)，直到該函數(shù)返回true，表示已找到該元素。

testFn需要三個(gè)參數(shù)：

• element是正在處理的數(shù)組中的當(dāng)前元素。
• index是正在處理的當(dāng)前元素的索引。
• array是findIndex()調(diào)用的數(shù)組。

2) thisArg

thisArg是執(zhí)行callback時(shí)使用this的可選對(duì)象。如果省略thisArg參數(shù)，則findIndex()函數(shù)使用undefined。

findIndex()對(duì)數(shù)組中的每個(gè)元素執(zhí)行testFn ，直到找到testFn返回真值的元素，該值是強(qiáng)制轉(zhuǎn)換為true的值。

一旦findIndex()找到這樣的元素，它會(huì)立即返回元素的索引。

findIndex() 示例

一些使用  findIndex() 方法的例子。

1) 以下示例返回ranks數(shù)組中第一次出現(xiàn)數(shù)字 7 的索引：

let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex(rank => rank === 7);
console.log(index);

輸出

2

2) 此示例使用 findIndex() 方法獲取ranks數(shù)組中索引 2 之后第一次出現(xiàn)的數(shù)字 7 的索引：

let ranks = [1, 5, 7, 8, 10, 7];

let index = ranks.findIndex(
    (rank, index) => rank === 7 && index > 2
);

console.log(index);

輸出

5

3) 以下示例使用 findIndex()方法查找價(jià)格大于 1000 的第一個(gè)產(chǎn)品的索引：

const products = [
  { name: 'Phone', price: 999 },
  { name: 'Computer', price: 1999 },
  { name: 'Tablet', price: 995 },
];

const index = products.findIndex(product => product.price > 1000);

console.log(index); // 1

總結(jié)

本文介紹了JS數(shù)組元素定位方法：indexOf()、find()和findIndex()，介紹了這幾種方法的使用區(qū)別。indexOf()是ES5開(kāi)始對(duì)數(shù)組添加的方法，而find()和findIndex()是ES6對(duì)數(shù)組添加的新方法。

相關(guān)文章

• JavaScript中獲取數(shù)組中項(xiàng)目索引的兩種方法
• JavaScript中findIndex與indexOf 的區(qū)別
• jQuery find("#id")與find(".class")實(shí)例分析與比較

標(biāo)簽: indexOf  findIndex  find方法