JS 배열 학습은 주어진 조건을 충족하는 첫 번째 요소를 반환합니다.

이전 글 "JS 배열 학습: 주어진 조건을 만족하는 모든 요소 반환"에서는 배열 요소를 필터링하여 주어진 조건에 맞는 모든 요소를 ​​얻는 방법을 소개했습니다. 이번에는 계속해서 요소 필터링에 대해 이야기하고 주어진 조건을 충족하는 첫 번째 요소를 얻는 방법을 소개합니다. 도움이 필요한 친구들은 이에 대해 배울 수 있습니다~

오늘 기사의 주요 내용은 배열을 순회하여 요소가 있는지 감지하는 것입니다. 배열에서 만족 조건을 지정하고 조건을 만족하는 첫 번째 배열 요소를 반환합니다. 간단히 말하면, 지정된 조건에 따라 배열 요소를 필터링하고 기호 조건의 첫 번째 배열 요소 값을 반환합니다.

익숙한 for 루프부터 시작하여 2개의 내장 함수를 소개하는 3가지 방법을 아래에 소개하겠습니다. 이 두 함수가 어떻게 배열 요소를 필터링하고 조건을 충족하는 첫 번째 요소를 얻는지 살펴보세요.

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

나이 배열에서 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()는 조건에 맞는 요소를 반환하며, 이후 값에 대해서는 실행 함수가 호출되지 않습니다.

• 조건에 맞는 요소가 없으면 undefine을 반환

구문:

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

function callbackfn(Value, index, array): 생략할 수 없는 콜백 함수 , 최대 3개의 매개변수를 허용할 수 있습니다. 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() 方法可以返回第一个满足条件的元素索引，根据该索引，使用“数组名[索引]

값: 현재 배열 요소의 값이며 생략할 수 없습니다.

index: 현재 배열 요소의 숫자 인덱스입니다.

array: 현재 요소가 속한 배열 객체입니다.

반환값: 테스트 조건을 충족하는 첫 번째 배열 요소 값을 반환합니다. 조건을 충족하는 항목이 없으면 정의되지 않음을 반환합니다.

예제를 통해 자세히 알아보겠습니다. 🎜🎜🎜예제 1: 배열에서 나이가 18보다 크거나 같은 첫 번째 요소를 출력합니다.🎜🎜

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

🎜출력 결과: 🎜rrreee🎜🎜예제 2: 첫 번째 비 요소를 출력합니다. -배열 요소의 숫자 🎜🎜rrreee🎜 출력 결과: 🎜🎜🎜🎜🎜🎜방법 3: findIndex() 메서드🎜🎜🎜🎜findIndex() 메서드를 사용하여 배열의 각 요소에 대해 함수를 한 번씩 호출하고, 제공된 메서드를 사용하여 필터 요소를 추가합니다. 콜백 함수에서 테스트를 통과한 첫 번째 요소의 인덱스 위치를 반환합니다. 🎜🎜🎜🎜조건 테스트 시 배열의 요소가 true를 반환하면 findIndex()는 조건에 맞는 요소의 인덱스 위치를 반환하고, 이후 값에 대해서는 실행 함수가 호출되지 않습니다. 🎜🎜🎜🎜조건에 맞는 요소가 없으면 -1이 반환됩니다🎜🎜🎜🎜구문: ​​🎜rrreee🎜 이 메소드의 구문은 find()와 유사하며 매개변수 값은 find( ) 방법. 🎜🎜예제를 통해 자세히 알아보겠습니다. 🎜🎜🎜예제 1: 배열에서 나이가 18보다 크거나 같은 첫 번째 요소를 출력합니다.🎜🎜rrreee🎜 findIndex() 메서드는 첫 번째 요소의 인덱스를 반환할 수 있습니다. 조건을 충족하면 index 에 따라 "배열 이름[index]" 형식을 사용하여 요소 값을 얻을 수 있습니다. 따라서 출력 결과는 다음과 같습니다. 🎜🎜🎜🎜🎜🎜 예 2: 배열에서 숫자가 아닌 첫 번째 요소를 출력합니다. 🎜🎜rrreee🎜출력 결과는 다음과 같습니다. 🎜🎜🎜🎜🎜좋아요, 지금은 그게 전부입니다. 시청할 수 있습니다: 🎜javascript 비디오 튜토리얼🎜🎜

위 내용은 JS 배열 학습은 주어진 조건을 충족하는 첫 번째 요소를 반환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!