자바스크립트 Array.filter() 메소드

때로는 배열이 있지만 배열에서 선택한 몇 가지 항목만 반환하려고 합니다. 예를 들어 array.filter() 메서드를 사용하여 사람 배열을 필터링하여 배열의 여성 캐릭터만 찾을 수 있습니다.

const people = [
  { name: 'Debbie', gender: 'female' },
  { name: 'Josh', gender: 'male' }
]

필터 방법 작동 방식

filter() 메소드는 배열의 각 요소에 대해 한 번씩 콜백 함수를 호출하고 이 콜백 함수에서 제공되는 테스트를 통과하는 모든 값에 대해 새 배열을 구성합니다.

이 함수는 3개의 인수를 취합니다.

현재 값, 즉 우리가 반복하고 있는 현재 값

색인, 우리가 있는 반복

필터가 호출된 원래 배열

여성 값 반환

people.filter(function (currentValue, index, originalArray) {
  //decide who should be returned
  return currentValue.gender === 'female'
})

원래 배열 제외

사용하지 않는 경우 콜백 함수에서 원래 배열을 제외할 수 있습니다. 무엇을 반환할지 테스트하기 전에 배열에 무언가를 푸시하는 데 사용할 수 있지만 그렇지 않은 경우 간단히 제거할 수 있습니다.

people.filter(function (currentValue, index) {
  //decide who should be returned
  return currentValue.gender === 'female'
})

현재 값 이름 지정

일반적으로 우리는 currentValue의 이름을 배열의 단수로 지정하므로 이 경우 이름을 person으로 지정해야 합니다.

people.filter(function (person, index) {
  return person.gender === 'female'
})

화살표 기능 사용

대신 화살표 기능을 사용할 수도 있습니다.

people.filter((person, index) => {
  return person.gender === 'female'
})

색인 및 괄호 제거

인덱스를 사용하지 않기 때문에 제거할 수 있습니다. 화살표 함수에 인수가 하나만 있는 경우 필요하지 않으므로 괄호를 제거할 수도 있습니다.

people.filter(person => {
  return person.gender === 'female'
})

대괄호 및 return 키워드 제거

그리고 우리가 반환하는 것은 단지 한 줄이므로 반환과 중괄호를 제거하고 모든 것을 한 줄에 배치하여 매우 짧게 유지할 수 있습니다. 이전 예제만큼 읽기 쉽지 않기 때문에 익숙해지는 데 약간의 시간이 걸릴 수 있지만 많은 사람들이 이 형식을 사용할 것입니다.

사람들의 배열이 모든 사람을 필터링하고 성별이 여성인 사람을 반환한다고 생각하십시오.

people.filter(person => person.gender === 'female')

예시

필터의 가장 큰 장점은 원래 배열을 변경하지 않는다는 것입니다. 따라서 console.log(people) 필터가 새 배열을 생성하므로 여전히 people 배열에서 모든 people을 가져옵니다. 따라서 새 필터를 const에 저장할 수 있습니다.

const people = [
  { name: 'Debbie', gender: 'female' },
  { name: 'Josh', gender: 'male' }
]
const women = people.filter(person => person.gender === 'female')
console.log(people) // [{ name: 'Debbie', gender: 'female' },{ name: 'Josh', gender: 'male' }]
console.log(women) // [{ name: 'Debbie', gender: 'female' }]

콘솔에 붙여넣어 직접 확인하고 값을 가지고 놀거나 내가 만든 codepen을 확인하십시오.

더 알아보기

이 기사는 Jake Dohm's video에서 영감을 얻었으므로 확인해 보시기 바랍니다.

자세한 내용은 Array.prototype.filter()

에 대한 MDn 문서를 확인하십시오.

에서 내 게시물을 확인하세요.

에서 내 게시물을 확인하세요.