來源 | https://www.fly63.com

前言

有時(shí)候我們想以某種條件來查找一個(gè)數(shù)組中是否有滿足改條件的元素，然后返回該元素，或者該元素的索引值。

JavaScript 給我們提供了多種方法，主要分為按值查找和某種條件查找，下面開始介紹這些方法。

1、Array.prototype.includes()

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

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

var a = [1,2,3,4,5,6]
a.includes(2)  // truea.includes(2,3)  // falsea.includes(5,-2)  // truea.includes(5,-1)  // false

2、 Array.prototype.indexOf()

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

該方法支持兩個(gè)參數(shù)searchElement，fromIndex （可選），第一個(gè)參數(shù)是‘要查找的元素’，第二個(gè)參數(shù)是‘開始查找的索引位置’，如果該索引值大于或等于數(shù)組長(zhǎng)度，意味著不會(huì)在數(shù)組里查找，返回-1。

如果參數(shù)中提供的索引值是一個(gè)負(fù)值，則將其作為數(shù)組末尾的一個(gè)抵消，即-1表示從最后一個(gè)元素開始查找，-2表示從倒數(shù)第二個(gè)元素開始查找 ，以此類推。

注意：如果參數(shù)中提供的索引值是一個(gè)負(fù)值，并不改變其查找順序，查找順序仍然是從前向后查詢數(shù)組。如果抵消后的索引值仍小于0，則整個(gè)數(shù)組都將會(huì)被查詢。其默認(rèn)值為0。

var array = [2, 5, 9];
array.indexOf(2);     // 0array.indexOf(7);     // -1array.indexOf(9, 2);  // 2array.indexOf(2, -1); // -1array.indexOf(2, -3); // 0

3、Array.prototype.lastIndexOf()

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

該方法支持兩個(gè)參數(shù) searchElement，fromIndex（可選），第一個(gè)參數(shù)是‘被查找的元素’。第二個(gè)參數(shù)是‘從此位置開始逆向查找’，默認(rèn)為數(shù)組的長(zhǎng)度減 1(arr.length - 1)，即整個(gè)數(shù)組都被查找。

如果該值大于或等于數(shù)組的長(zhǎng)度，則整個(gè)數(shù)組會(huì)被查找。

如果為負(fù)值，將其視為從數(shù)組末尾向前的偏移。即使該值為負(fù)，數(shù)組仍然會(huì)被從后向前查找。

如果該值為負(fù)時(shí)，其絕對(duì)值大于數(shù)組長(zhǎng)度，則方法返回 -1，即數(shù)組不會(huì)被查找。

var array = [2, 5, 9, 2];
array.lastIndexOf(2);      // 3array.lastIndexOf(7);      // -1array.lastIndexOf(2, 3);   // 3array.lastIndexOf(2, 2);   // 0array.lastIndexOf(2, -2);  // 0array.lastIndexOf(2, -1);  // 3

4、Array.prototype.some()

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

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

「參數(shù)」：

callback：用來測(cè)試每個(gè)元素的函數(shù)，接受三個(gè)參數(shù)：

• element 數(shù)組中正在處理的元素。

• index 可選，數(shù)組中正在處理的元素的索引值。

• array 可選，被遍歷的數(shù)組本身。

thisArg：可選，執(zhí)行 callback 時(shí)使用的 this 值。

下面的例子檢測(cè)在數(shù)組中是否有元素大于 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

還可以使用箭頭函數(shù)實(shí)現(xiàn)相同的效果。

[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() 方法測(cè)試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過某個(gè)指定函數(shù)的測(cè)試。它返回一個(gè)布爾值。

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

檢測(cè)數(shù)組中的所有元素是否都大于 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() 方法創(chuàng)建一個(gè)新數(shù)組, 包含通過所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

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

下例使用 filter 創(chuàng)建了一個(gè)新數(shù)組，該數(shù)組的元素由原數(shù)組中值大于 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() 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined。

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

用對(duì)象的屬性查找數(shù)組里的對(duì)象。

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() 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。若沒有找到對(duì)應(yīng)元素則返回-1。

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

查找 name 為 orange 的對(duì)象在數(shù)組中的的索引。

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 }

總結(jié)

為了方便查找和記憶，我將這些方法總結(jié)成了一張表格

本文完~

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)