8種在JavaScript數組中查找指定元素的方法

​

前言

有時候我們想以某種條件來查找一個數組中是否有滿足改條件的元素，然後傳回該元素，或者該元素的索引值。

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

本文完~