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

今天本文的主要內(nèi)容是：遍歷數(shù)組，檢測(cè)數(shù)組中元素是否滿(mǎn)足指定條件，返回滿(mǎn)足條件的首個(gè)數(shù)組元素。簡(jiǎn)單來(lái)說(shuō)：就是根據(jù)指定條件過(guò)濾數(shù)組元素，返回符號(hào)條件的第一個(gè)數(shù)組元素的值。

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

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

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

下面通過(guò)實(shí)例來(lái)具體了解一下：

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

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兩個(gè)，但18在20前，因此滿(mǎn)足添加的第一個(gè)元素為18。因此輸出結(jié)果為：

示例2：輸出數(shù)組中第一個(gè)非數(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ù)組中的每個(gè)元素都調(diào)用一次函數(shù)，在回調(diào)函數(shù)內(nèi)利用給定添加過(guò)濾元素，返回第一個(gè)通過(guò)檢測(cè)的元素。

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

• 如果沒(méi)有符合條件的元素返回 undefined

語(yǔ)法：

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

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

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

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

• array：當(dāng)前元素屬于的數(shù)組對(duì)象。

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

下面通過(guò)實(shí)例來(lái)具體了解一下：

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

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

輸出結(jié)果：

18

示例2：輸出數(shù)組中第一個(gè)非數(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ù)組中的每個(gè)元素都調(diào)用一次函數(shù)，在回調(diào)函數(shù)內(nèi)利用給定添加過(guò)濾元素，返回第一個(gè)通過(guò)檢測(cè)的元素的索引位置。

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

• 如果沒(méi)有符合條件的元素返回 -1

語(yǔ)法：

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

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

下面通過(guò)實(shí)例來(lái)具體了解一下：

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

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() 方法可以返回第一個(gè)滿(mǎn)足條件的元素索引，根據(jù)該索引，使用“數(shù)組名[索引]”的形式就可以獲取到元素值。因此輸出結(jié)果為：

示例2：輸出數(shù)組中第一個(gè)非數(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é)果為：

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