JS array learning returns the first element that meets the given conditions

In the previous article "JS Array Learning: Returning All Elements That Meet Given Conditions", we introduced the method of filtering array elements to obtain all elements that meet given conditions. This time we continue to talk about filtering elements and introduce the method of obtaining the first element that meets the given conditions. Friends in need can learn about it~

The main content of today’s article is: traversing arrays and detecting arrays Whether the elements in the array satisfy the specified condition, return the first array element that satisfies the condition. To put it simply: it filters the array elements according to the specified condition and returns the value of the first array element of the symbolic condition.

Let’s introduce 3 methods, starting with the familiar for loop, and then introducing 2 built-in functions-see how these two functions can filter array elements and obtain the first element that meets the conditions .

Method 1: Use for loop

Implementation idea: use for statement to traverse the array, and determine whether the array elements match in each loop Condition; when the first element meets the condition, it will be output immediately, and then use the break statement to exit the entire loop.

Let’s learn more about it through examples:

Example 1: Output the first element in the array whose age is greater than or equal to 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 array There are two elements that are greater than or equal to 18, 18 and 20, but 18 is before 20, so the first element added is 18. Therefore the output result is:

Example 2: Output the first non-numeric element in the array

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;
　　} 
}

Output result:

Method 2: Use the find() method

find() method is in the array The function is called once for each element, and the given filter element is added within the callback function, and the first element that passes the test is returned.

• When an element in the array returns true when testing the condition, find() returns the element that meets the condition, and the execution function will not be called for subsequent values.

• If there is no element that meets the conditions, return undefined

Syntax:

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

function callbackfn(Value,index ,array): A callback function, which cannot be omitted, and can accept up to three parameters:

• value: The value of the current array element, which cannot be omitted.

• index: The numeric index of the current array element.

• array: The array object to which the current element belongs.

Return value: Returns the first array element value that meets the test conditions. If there is no one that meets the conditions, undefined is returned.

Let’s learn more about it through examples:

Example 1: Output the first element in the array whose age is greater than or equal to 18

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

Output results ：

18

Example 2: Output the first non-numeric element in the array

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));

Output result:

Method 3: Use the findIndex() method

The findIndex() method calls the function once for each element in the array, and uses the Definitely add a filter element and return the index position of the first element that passes the test.

• When an element in the array returns true when testing a condition, findIndex() returns the index position of the element that meets the condition, and subsequent values ​​will not call the execution function.

• If there is no element that meets the conditions, return -1

Syntax:

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

The syntax of this method and find() Similarly, parameter values ​​can be passed to the find() method.

Let’s learn more about it through examples:

Example 1: Output the first element in the array whose age is greater than or equal to 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( ) method can return the index of the first element that meets the condition. According to this index, the element value can be obtained using the form of "array name[index]". Therefore, the output result is:

Example 2: Output the first non-numeric element in the array

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]);

The output result is:

Okay, that’s all. If you need it, you can watch it: javascript video tutorial

The above is the detailed content of JS array learning returns the first element that meets the given conditions. For more information, please follow other related articles on the PHP Chinese website!