JS怎么返回滿足給定條件的首個元素

這篇文章主要介紹“JS怎么返回滿足給定條件的首個元素”，在日常操作中，相信很多人在JS怎么返回滿足給定條件的首個元素問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS怎么返回滿足給定條件的首個元素”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

方法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,"億速云", 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,"億速云", 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,"億速云", 10, "red", 20,"22"];
var index=a.findIndex(checkAdult);
console.log(index);
console.log(a[index]);

輸出結果為：

到此，關于“JS怎么返回滿足給定條件的首個元素”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！