|
|
|
|
|
|
JS數組元素定位方法使用區別：indexOf()、find()和findIndex()
作者:admin 時間:2022-7-11 16:41:47 瀏覽:本文主要討論JavaScript中的數組元素定位和查找方法，indexOf()、find()、findIndex()，介紹這幾種方法的使用區別。
定位元素：indexOf()
要查找數組中元素的位置，請使用indexOf()方法。此方法返回要查找的元素第一次出現的索引，如果未找到該元素，則返回 -1。
下面是indexOf()方法的語法。
Array.indexOf(searchElement, fromIndex)
indexOf()方法接受兩個命名參數。
- searchElement 參數是要在數組中找到的元素。
- fromIndex 是函數開始搜索的數組索引。
fromIndex 參數可以是正整數或負整數。如果fromIndex 參數為負，則indexOf()方法從數組的長度加 fromIndex 開始搜索
如果省略 fromIndex 參數，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
console.log(scores.indexOf(20,-1)); // 5 (fromIndex = 6+ (-1) = 5)
console.log(scores.indexOf(20,-5)); // 1 (fromIndex = 6+ (-5) = 1)
查找元素：find()
在 ES5 中，要在數組中查找元素，可以使用indexOf()或lastIndexOf()方法。但是，這些方法非常有限，因為它們只返回第一個匹配元素的索引。
ES6 引入了一種新方法，稱為find()添加到Array.prototype對象。
該find()方法返回數組中滿足所提供函數的第一個元素。
下面顯示了該find()方法的語法：
find(callback(element[, index[, array]])[, thisArg])
參數
find()接受兩個參數：一個callback和一個用于callback內部this的可選值。
1) callback
callback是在數組的每個元素上執行的回調函數。它需要三個參數：
element是當前元素。index當前元素的索引。array find()被調用的數組。
2) thisArg
thisArg是callback內部用作this的對象。
返回值
find()對數組中的每個元素執行callback函數，直到callback返回一個真值。
如果回調返回真值，則find()立即返回元素并停止搜索。否則，它返回undefined。
如果要查找找到的元素的索引，可以使用findIndex()方法。
find()示例
以下示例使用find()方法在數字數組中搜索第一個偶數：
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.find(e => e % 2 == 0));
輸出
2
假設我們有一個客戶對象列表，其name屬性credit如下：
let customers = [{
name: 'ABC Inc',
credit: 100
}, {
name: 'ACME Corp',
credit: 200
}, {
name: 'IoT AG',
credit: 300
}];以下代碼使用find()方法查找信用大于 100 的第一個客戶。
console.log(customers.find(c => c.credit > 100));
輸出
{ name: 'ACME Corp', credit: 200 }
查找元素的索引：findIndex()
ES6 對Array.prototype添加了一個名為findIndex()的新方法，它允許你在數組中找到滿足提供的測試功能的第一個元素。
findIndex()方法返回滿足測試函數的元素的索引，如果沒有元素通過測試，則返回 -1。
下面說明了findIndex()方法的語法：
findIndex(testFn(element[, index[, array]])[, thisArg])
findIndex()需要兩個參數：
1) testFn
testFn是一個對數組中的每個元素執行的函數，直到該函數返回true，表示已找到該元素。
testFn需要三個參數：
element是正在處理的數組中的當前元素。index是正在處理的當前元素的索引。array是findIndex()調用的數組。
2) thisArg
thisArg是執行callback時使用this的可選對象。如果省略thisArg參數，則findIndex()函數使用undefined。
findIndex()對數組中的每個元素執行testFn ，直到找到testFn返回真值的元素，該值是強制轉換為true的值。
一旦findIndex()找到這樣的元素，它會立即返回元素的索引。
findIndex() 示例
一些使用 findIndex() 方法的例子。
1) 以下示例返回ranks數組中第一次出現數字 7 的索引：
let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex(rank => rank === 7);
console.log(index);
輸出
2
2) 此示例使用 findIndex() 方法獲取ranks數組中索引 2 之后第一次出現的數字 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()方法查找價格大于 1000 的第一個產品的索引：
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
總結
本文介紹了JS數組元素定位方法：indexOf()、find()和findIndex()，介紹了這幾種方法的使用區別。indexOf()是ES5開始對數組添加的方法，而find()和findIndex()是ES6對數組添加的新方法。
相關文章
