JS數組學習之傳回滿足給定條件的首個元素

在先前的文章《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中文網其他相關文章！