배열이란 무엇입니까? - 2부



배열.필터()



The.filter() 메서드는 자주 사용되는 배열 메서드입니다. 주어진 조건에 대한 응답으로 이 메서드는 원래 배열의 일부 요소가 포함된 다른 배열을 반환합니다.

let ages = [15, 20, 22, 25, 49]

let agesAboveTwentyOne = ages.filter(function(age) {
    return age > 21;
});
console.log(agesAboveTwentyOne); // [22, 25, 49]


조건을 충족하는 항목을 포함하는 새 배열을 받은 방법에 주목하십시오. 조건은 21세 이상입니다.

Array.filter(콜백)


.filter() 메서드의 첫 번째 인수는 콜백입니다.

예시:

function(age) {
  return age > 21;
}


Javascript는 배열의 각 단일 항목에 대한 콜백을 호출합니다. 숫자 배열에는 5개의 항목이 포함되어 있으므로 5번 호출됩니다. 이 함수를 호출할 때마다 콜백 내에서 지정한 숫자 매개변수에 값을 할당합니다.

콜백 함수가 true를 반환하면 항목이 .filter()에서 반환된 최종 배열에 추가됩니다. 콜백 함수가 false를 반환하면 항목이 최종 배열에서 제거됩니다.

배열.찾기()



배열에서 .find(callback) 메서드를 호출하면 지정된 기준과 일치하는 첫 번째 요소를 검색합니다. 항목을 찾을 수 없으면 undefined를 반환합니다.

예를 들어:

let myFurBabies = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];

let babies = myFurBabies.find(function(myFurBaby) {
    return myFurBaby === 'Monty';
});
console.log(babies); // 'Monty'


따라서 콜백 중 하나가 true를 반환할 때까지 .fine(callback) 메서드는 배열의 각 항목에 대해 지정한 콜백을 호출합니다. 그런 다음 다른 콜백 호출을 중지하고 콜백이 true를 반환한 항목을 제공합니다.

function(myFurBaby) {
  return myFurBaby === 'Monty';
}

'Dutches'myFurBaby가 (배열의 첫 번째 항목) 호출하는 명령입니다. myFurBaby === 'Dutches' 따라서 콜백은 false를 반환합니다. 따라서 콜백은 다음 name 값으로 반복됩니다. 콜백은 이름의 다음 값으로 다시 호출됩니다. 이번에 이름 = 'Monty' . myFurBaby === 'Monty'(콜백의 조건)이 true를 반환하기 때문에 콜백은 true를 반환합니다. 따라서 .find() 메서드는 중지하고 'Monty' 를 반환합니다.

.filter() 대 .fine()


.filter().find()의 차이점은 무엇입니까?

차이점은 이 두 메서드의 반환 유형과 관련이 있습니다.

이 두 가지 접근 방식은 서로 다른 반환 유형을 제공합니다.
  • filter() 메서드는 항상 배열을 반환합니다.
  • find() 메서드는 조건 또는 정의되지 않은 것과 일치하는 첫 번째 요소를 반환합니다.

  • 예:

    let ages = [15, 20, 22, 25, 49];
    
    // .filter() ALWAYS returns an array 
    ages.filter(function(age) {
       return age >= 40;
    }); // [49]
    
    // .filter() ALWAYS return an array (even if it's empty)
    ages.filter(function(age) {
        return age =< 12;
    }); // []
    
    // .find() returns the first match or undefined(even if there are 3 numbers that satisfy the condition)
    ages.find(function(age) {
       return age >= 21;
    }); // 22
    
    ages.find(function(age) {
       return age <= 14;
    }); // undefined
    

    filter() 메서드는 빈 배열이거나 조건과 일치하는 1개 항목인 경우에도 배열을 반환합니다. 반면에 find() 메서드는 조건과 일치하는 첫 번째 요소를 반환합니다.

    좋은 웹페이지 즐겨찾기