在先前的文章《JS數組學習之返回滿足給定條件的全部元素》中，我們介紹了過濾數組元素，獲取滿足給定條件的全部元素的方法。這次我們繼續聊聊過濾元素，介紹一下獲取第一個滿足給定條件元素的方法，有需要的朋友可以學習了解一下~
今天本文的主要內容是：遍歷數組，檢測數組中元素是否滿足指定條件，傳回滿足條件的首個陣列元素。簡單來說：就是根據指定條件過濾陣列元素，傳回符號條件的第一個陣列元素的值。
下面我們來介紹3種方法，先從熟悉的for迴圈開始，然後介紹2種內建函數--看看這兩個函數能怎麼過濾陣列元素，取得第一個符合條件的元素。
方法1：利用for迴圈
實作想法：利用for語句來遍歷數組，在每次迴圈中判斷數組元素是否符合條件；當有第一個元素滿足條件，就立刻輸出，然後使用break語句退出整個迴圈。
下面透過實例來具體了解：
範例1：輸出數組中年齡大於等於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數組中大於等於18的元素有18和20兩個，但18在20前，因此滿足添加的第一個元素為18。因此輸出結果為：
範例2：輸出陣列中第一個非數字的元素
var a = [1,"php中文网", 10, "red", 20,"22"];
for(var i=0;i<a.length;i++){
var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字 //判断正整数/[1−9]+[0−9]∗]∗/
if (!re.test(a[i])) {
console.log(a[i]);
break;
}
}輸出結果：
方法2：利用find() 方法
find() 方法為數組中的每個元素都呼叫一次函數，在回調函數內利用給定添加過濾元素，傳回第一個通過檢測的元素。
當陣列中的元素在測試條件時傳回 true 時, find() 傳回符合條件的元素，之後的值就不會再呼叫執行函數。
如果沒有符合條件的元素回傳undefined
#語法：
array.find(function callbackfn(Value,index,array),thisValue)
function callbackfn(Value,index ,array)：一個回呼函數，不可省略，最多可接受三個參數：
value：目前陣列元素的值，不可省略。
index：目前陣列元素的數字索引。
array：目前元素屬於的陣列物件。
傳回值：傳回符合測試條件的第一個陣列元素值，如果沒有符合條件的則回傳 undefined。
下面透過實例來具體了解：
範例1：輸出陣列中年齡大於等於18 的第一個元素
function checkAdult(age) {
return age >= 18;
}
var ages = [3, 10, 18, 20];
var age=ages.find(checkAdult);
console.log(age);輸出結果：
18
範例2：輸出陣列中第一個非數字的元素
function checkAdult(num) {
var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字 //判断正整数/[1−9]+[0−9]∗]∗/
return !re.test(num);
}
var a = [1,"php中文网", 10, "red", 20,"22"];
console.log(a.find(checkAdult));輸出結果：
方法3：利用findIndex() 方法
findIndex() 方法為陣列中的每個元素都呼叫一次函數，在回呼函數內利用給定新增過濾元素，傳回第一個通過偵測的元素的索引位置。
當陣列中的元素在測試條件時傳回 true 時, findIndex() 傳回符合條件的元素的索引位置，之後的值不會再呼叫執行函數。
如果沒有符合條件的元素回傳-1
語法：
array.findIndex(function callbackfn(Value,index,array),thisValue)
該方法的語法和find()類似，參數取值可以參數find()方法。
下面透過實例來具體了解：
範例1：輸出陣列中年齡大於等於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( ) 方法可以傳回第一個符合條件的元素索引，根據該索引，使用「陣列名[索引]」的形式就可以取得到元素值。因此輸出結果為：
#範例2：輸出陣列中第一個非數字的元素
function checkAdult(num) {
var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字 //判断正整数/[1−9]+[0−9]∗]∗/
return !re.test(num);
}
var a = [1,"php中文网", 10, "red", 20,"22"];
var index=a.findIndex(checkAdult);
console.log(index);
console.log(a[index]);輸出結果為：
好了，就說到這裡了，有需要的可以看：javascript影片教學
#以上是JS數組學習之傳回滿足給定條件的首個元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
