JavaScript에서 filter() 배열 메서드를 사용하는 방법

소개

filter() 배열 메서드는 기존 배열에서 지정된 기준에 해당하는 요소로 새 배열을 만듭니다.

이 기사에서는 filter() Array 메서드에 대해 알아봅니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

• JavaScript 배열에 대한 약간의 지식.
• JavaScript 함수에 대한 약간의 지식.

숫자 배열에 filter() 사용

filter()의 구문은 다음과 유사합니다.

var newArray = array.filter(function(item) {
  return condition;
});

item 인수는 filter()가 조건에 대해 검사할 때 배열의 현재 요소에 대한 참조입니다. 이는 개체의 경우 속성에 액세스하는 데 유용합니다.

현재 항목이 조건을 통과하면 새 배열로 반환됩니다.

이 예제 숫자 배열을 고려하십시오.

var numbers = [1, 3, 6, 8, 11];

그런 다음 filter()를 적용하여 7보다 큰 모든 숫자를 반환합니다.

var greaterThanSeven = numbers.filter(function(number) {
  return number > 7;
});

console.log(greaterThanSeven);

이 코드는 필터링된 새 배열을 생성합니다.

output
[8, 11]

7보다 큰 값이 두 개 있는 배열이 반환됩니다.

객체 배열에서 filter() 사용

filter()의 일반적인 사용 사례는 해당 속성을 통해 개체 배열을 사용하는 것입니다.

creature 개체의 다음 예제 배열을 고려하십시오.

var creatures = [
  {name: "Shark", habitat: "Ocean"},
  {name: "Whale", habitat: "Ocean"},
  {name: "Lion", habitat: "Savanna"},
  {name: "Monkey", habitat: "Jungle"}
];

그런 다음 filter()를 적용하여 Ocean과 동일한 서식지가 있는 모든 생물을 반환합니다.

var aquaticCreatures =  creatures.filter(function(creature) {
  return creature.habitat == "Ocean";
});

console.log(aquaticCreatures);

이 코드는 필터링된 새 배열을 생성합니다.

Output
[ {name: "Shark", habitat: "Ocean"}, {name: "Whale", habitat: "Ocean"} ]

"Ocean\에 서식처가 있는 두 생물의 배열이 반환됩니다.

결론

이 기사에서는 filter() Array 메서드에 대해 배웠습니다.

자세한 내용은 filter()에 대한 MDN 참조를 참조하십시오.

필터는 JavaScript의 배열에 대한 여러 반복 방법 중 하나일 뿐입니다. map() 및 reduce()와 같은 다른 방법에 대해 알아보려면 JavaScript에서 배열 반복 방법을 사용하는 방법을 읽어보세요. .