在之前的文章《JS數(shù)組學(xué)習(xí)之返回滿足給定條件的全部元素》中，我們介紹了過濾數(shù)組元素，獲取滿足給定條件的全部元素的方法。這次我們繼續(xù)聊聊過濾元素，介紹一下獲取第一個滿足給定條件元素的方法，有需要的朋友可以學(xué)習(xí)了解一下~

今天本文的主要內(nèi)容是：遍歷數(shù)組，檢測數(shù)組中元素是否滿足指定條件，返回滿足條件的首個數(shù)組元素。簡單來說：就是根據(jù)指定條件過濾數(shù)組元素，返回符號條件的第一個數(shù)組元素的值。

下面我們來介紹3種方法，先從熟悉的for循環(huán)開始，然后介紹2種內(nèi)置函數(shù)–看看這兩個函數(shù)能怎么過濾數(shù)組元素，獲取第一個符合條件的元素。

方法1：利用for循環(huán)

實現(xiàn)思想：利用for語句來遍歷數(shù)組，在每次循環(huán)中判斷數(shù)組元素是否符合條件；當有第一個元素滿足條件，就立馬輸出，然后使用break語句退出整個循環(huán)。

下面通過實例來具體了解一下：

示例1：輸出數(shù)組中年齡大于等于 18 的第一個元素

var ages = [3, 10, 18, 20]; for(var i=0;i<ages.length;i++){ 	if (ages[i] >= 18) { 		console.log(ages[i]); 		break; 	} }

ages數(shù)組中大于等于 18的元素有 18和20兩個，但18在20前，因此滿足添加的第一個元素為18。因此輸出結(jié)果為：

示例2：輸出數(shù)組中第一個非數(shù)字的元素

var a = [1,"php中文網(wǎng)", 10, "red", 20,"22"]; for(var i=0;i<a.length;i++){ 	var re = /^[0-9]+.?[0-9]*/;//判斷字符串是否為數(shù)字  //判斷正整數(shù)/[1?9]+[0?9]?]?/  　　if (!re.test(a[i])) {  　　　　console.log(a[i]); 		break; 　　}  }

輸出結(jié)果：

方法2：利用 find() 方法

find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)，在回調(diào)函數(shù)內(nèi)利用給定添加過濾元素，返回第一個通過檢測的元素。

• 當數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。

• 如果沒有符合條件的元素返回 undefined

語法：

array.find(function callbackfn(Value,index,array),thisValue)

function callbackfn(Value,index,array)：一個回調(diào)函數(shù)，不可省略，最多可接受三個參數(shù)：

• value：當前數(shù)組元素的值，不可省略。

• index：當前數(shù)組元素的數(shù)字索引。

• array：當前元素屬于的數(shù)組對象。

返回值：返回符合測試條件的第一個數(shù)組元素值，如果沒有符合條件的則返回 undefined。

下面通過實例來具體了解一下：

示例1：輸出數(shù)組中年齡大于等于 18 的第一個元素

function checkAdult(age) {     return age >= 18; } var ages = [3, 10, 18, 20]; var age=ages.find(checkAdult); console.log(age);

輸出結(jié)果：

18

示例2：輸出數(shù)組中第一個非數(shù)字的元素

function checkAdult(num) { 	var re = /^[0-9]+.?[0-9]*/;//判斷字符串是否為數(shù)字  //判斷正整數(shù)/[1?9]+[0?9]?]?/      return !re.test(num); }  var a = [1,"php中文網(wǎng)", 10, "red", 20,"22"]; console.log(a.find(checkAdult));

輸出結(jié)果：

方法3：利用 findIndex() 方法

findIndex() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)，在回調(diào)函數(shù)內(nèi)利用給定添加過濾元素，返回第一個通過檢測的元素的索引位置。

• 當數(shù)組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調(diào)用執(zhí)行函數(shù)。

• 如果沒有符合條件的元素返回 -1

語法：

array.findIndex(function callbackfn(Value,index,array),thisValue)

該方法的語法和 find()類似，參數(shù)取值可以參數(shù)find()方法。

下面通過實例來具體了解一下：

示例1：輸出數(shù)組中年齡大于等于 18 的第一個元素

function checkAdult(age) {     return age >= 18; } var ages = [3, 10, 18, 20]; var age=ages.findIndex(checkAdult); console.log(age); console.log(ages[age]);

findIndex() 方法可以返回第一個滿足條件的元素索引，根據(jù)該索引，使用“數(shù)組名[索引]”的形式就可以獲取到元素值。因此輸出結(jié)果為：

示例2：輸出數(shù)組中第一個非數(shù)字的元素

function checkAdult(num) { 	var re = /^[0-9]+.?[0-9]*/;//判斷字符串是否為數(shù)字  //判斷正整數(shù)/[1?9]+[0?9]?]?/      return !re.test(num); }  var a = [1,"php中文網(wǎng)", 10, "red", 20,"22"]; var index=a.findIndex(checkAdult); console.log(index); console.log(a[index]);

輸出結(jié)果為：

好了，就說到這里了，有需要的可以看：javascript視頻教程