js如何在數組中查找某個元素

有時候我們想以某種條件來查找一個數組中是否有滿足改條件的元素，然后返回該元素，或者該元素的索引值。Javascript 給我們提供了多種方法，主要分為按值查找和某種條件查找，下面開始介紹這些方法📄。

1. Array.prototype.includes()

includes() 方法用來判斷一個數組是否包含一個指定的值，如果包含則返回 true，否則返回 false。

該方法支持兩個參數valueToFind，fromIndex（可選），第一個參數是‘需要查找的元素值’,第二個參數是‘從哪個索引處開始查找’，第二個參數如果為負數，則會按升序從 array.length + fromIndex 的索引開始查找（即使從末尾開始往前跳 fromIndex 的絕對值個索引，然后往后搜尋）。

var a = [1,2,3,4,5,6]

a.includes(2)  // true a.includes(2,3) // false a.includes(5,-2) // true a.includes(5,-1) // false 復制代碼

2. Array.prototype.indexOf()

indexOf() 方法返回指定元素在數組中的第一個索引，如果不存在，則返回-1。

該方法支持兩個參數searchElement，fromIndex （可選），第一個參數是‘要查找的元素’，第二個參數是‘開始查找的索引位置’，如果該索引值大於或等於數組長度，意味着不會在數組里查找，返回-1。如果參數中提供的索引值是一個負值，則將其作為數組末尾的一個抵消，即-1表示從最后一個元素開始查找，-2表示從倒數第二個元素開始查找 ，以此類推。 注意：如果參數中提供的索引值是一個負值，並不改變其查找順序，查找順序仍然是從前向后查詢數組。如果抵消后的索引值仍小於0，則整個數組都將會被查詢。其默認值為0。

var array = [2, 5, 9];

array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
復制代碼

3. Array.prototype.lastIndexOf()

lastIndexOf() 方法返回指定元素在數組中的最后一個的索引，如果不存在則返回 -1。從數組的后面向前查找，從 fromIndex 處開始。

該方法支持兩個參數 searchElement，fromIndex（可選），第一個參數是‘被查找的元素’。第二個參數是‘從此位置開始逆向查找’，默認為數組的長度減 1(arr.length - 1)，即整個數組都被查找。如果該值大於或等於數組的長度，則整個數組會被查找。如果為負值，將其視為從數組末尾向前的偏移。即使該值為負，數組仍然會被從后向前查找。如果該值為負時，其絕對值大於數組長度，則方法返回 -1，即數組不會被查找。

var array = [2, 5, 9, 2];

array.lastIndexOf(2);      // 3
array.lastIndexOf(7);      // -1
array.lastIndexOf(2, 3);   // 3
array.lastIndexOf(2, 2);   // 0
array.lastIndexOf(2, -2);  // 0
array.lastIndexOf(2, -1);  // 3
復制代碼

4. Array.prototype.some()

some() 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個 Boolean 類型的值。

❝

語法：arr.some(callback(element[, index[, array]])[, thisArg])

❞

「參數」：

callback：用來測試每個元素的函數，接受三個參數：

• element 數組中正在處理的元素。
• index 可選，數組中正在處理的元素的索引值。
• array 可選，被遍歷的數組本身。

thisArg： 可選，執行 callback 時使用的 this 值。

下面的例子檢測在數組中是否有元素大於 10。

function isBiggerThan10(element, index, array) { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true 復制代碼

還可以使用箭頭函數實現相同的效果。

[2, 5, 8, 1, 4].some(x => x > 10);  // false [12, 5, 8, 1, 4].some(x => x > 10); // true 復制代碼

5. Array.prototype.every()

every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。

❝

該方法的參數與 Array.prototype.some() 方法一樣，這里就不再介紹了。它們兩不同的是，some()只要數組中有一個元素滿足條件就為真，every()要全部滿足條件才為真。

❞

檢測數組中的所有元素是否都大於 10。

function isBigEnough(element, index, array) { return element >= 10; } [12, 5, 8, 130, 44].every(isBigEnough); // false [12, 54, 18, 130, 44].every(isBigEnough); // true 復制代碼

6. Array.prototype.filter()

filter() 方法創建一個新數組, 包含通過所提供函數實現的測試的所有元素。

該方法的參數與 some(),every()相同，callback 用來測試數組的每個元素的函數。返回 true 表示該元素通過測試，保留該元素，false 則不保留。

下例使用 filter 創建了一個新數組，該數組的元素由原數組中值大於 10 的元素組成。

function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 35].filter(isBigEnough); // filtered is [12, 130, 35] 復制代碼

7. Array.prototype.find()

find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。

❝

該方法的參數與 some(),every(),filter()相同。

❞

用對象的屬性查找數組里的對象。

var inventory = [
    {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'orange', quantity: 5} ]; function findOranges(fruit) { return fruit.name === 'orange'; } console.log(inventory.find(findOrange)); // { name: 'orange', quantity: 5 } 復制代碼

8. Array.prototype.findIndex()

findIndex() 方法返回數組中滿足提供的測試函數的第一個元素的索引。若沒有找到對應元素則返回-1。

❝

該方法參數與 find() 相同，只是一個返回該元素，一個返回該元素在數組中的索引值。

❞

查找 name 為 orange 的對象在數組中的的索引。

var inventory = [
    {name: 'apple', quantity: 2}, {name: 'banana', quantity: 0}, {name: 'orange', quantity: 5} ]; function findOrange(fruit) { return fruit.name === 'orange'; } console.log(inventory.findIndex(findOrange)); // { name: 'orange', quantity: 5 } 復制代碼

總結

為了方便查找和記憶，我將這些方法總結成了一張表格📝。

方法名	參數	描述	返回值
includes	searchElement，fromIndex	判斷數組中是否包含指定的值	布爾值
indexOf	searchElement，fromIndex	查找元素在數組中首次出現的索引值	索引值，或者-1
lastIndexOf	searchElement，fromIndex	查找元素在數組中最后一次出現的索引值	索引值，或者-1
some	callback[, thisArg]	判斷數組中是否有符合條件的元素	布爾值
every	callback[, thisArg]	判斷數組中是否每個元素都符合條件	布爾值
filter	callback[, thisArg]	返回符合條件的所有元素組成的數組	數組
find	callback[, thisArg]	返回數組中符合條件的第一個元素	數組中的元素，或者undefined
findIndex	callback[, thisArg]	返回符合條件的第一個元素的索引	索引值，或者-1