JavaScript 배열 Filter() 메서드 안내

JavaScript에서 filter() 메서드는 배열의 각 요소에 대해 한 번씩 콜백 함수를 호출하는 반복 메서드입니다. 콜백 함수가 true를 반환하면 반환 배열에 해당 요소가 포함됩니다. filter() 메서드는 원래 배열의 요소와 동일한 요소를 포함하는 배열의 얕은 복사본을 반환하기 때문에 복사 메서드라고도 합니다.

JavaScript 배열 filter() 메서드를 사용하면 배열을 필터링하여 지정된 조건을 충족하는 요소만 볼 수 있습니다. 콜백 함수를 사용하여 배열의 각 요소를 반복하고 지정된 조건을 충족하는 요소만 반환합니다.

JavaScript filter() 메서드는 배열 내의 데이터를 조작하기 위한 추가 옵션을 제공하는 매개 변수를 허용한다는 점을 제외하면 다른 메서드와 유사합니다.

filter() 메서드는 콜백 함수와 선택적 개체라는 두 가지 명명된 인수를 허용합니다. 콜백 함수는 세 가지 인수를 사용합니다.

배열 인수의 인덱스는 선택 사항입니다.

filter() 메서드는 모든 요소가 포함된 새 배열을 만듭니다. filter() 메서드의 구문을 작성하는 방법에는 세 가지가 있습니다. 구문은 다음과 같습니다.

callbackFn은 배열의 각 요소를 실행합니다. 요소를 배열에 유지하기 위해 실제 값을 반환합니다. callbackFn은 다음 인수를 사용하여 호출됩니다.

JavaScript에 대한 추가 정보 JavaScript에서 배열 슬라이스를 사용하는 3가지 방법

JavaScript에서 filter() 메서드를 사용하려면 다음 네 단계를 수행해야 합니다.

다음은 문자 "B"로 시작하는 자동차 브랜드에 대한 검색 기준에 따라 배열을 필터링하기 위해 filter() 메서드를 사용하는 예입니다.

이 예에서는 문자 "B"로 시작하는 자동차 브랜드만 반환하기 위해 자동차 배열에서 filter() 메서드가 호출됩니다. filterItems 함수는 arr과 query라는 두 개의 매개변수를 사용합니다. 쿼리 값과 일치하는 새 배열을 반환합니다. filterItem 메서드 내부filter() 메서드는 쿼리를 기반으로 배열을 필터링하는 cars 배열에서 호출됩니다.

filter() 메서드는 배열을 순회하고 각 요소를 테스트하여 쿼리와 일치하는지 확인합니다. Bentley, BMW 및 Bertone의 세 가지 브랜드가 포함된 새로운 어레이를 반환합니다.

filter() 메서드는 원래 배열을 수정하지 않고 대신 함수 내에서 테스트를 통과한 요소만 포함된 새 배열을 반환합니다.

다음은 숫자 배열을 필터링하고 짝수 요소만으로 새 배열을 만드는 코드입니다. 숫자 배열에 filter()를 사용하는 단계는 다음과 같습니다.

다음은 프로그램을 보여주는 예입니다.

위의 코드에서는 숫자 Arr의 배열을 정의했습니다. 우리는 NumberArr에 filter() 메소드를 사용했고 숫자가 2로 나누어지는지 확인하기 위해 모듈로 연산자 %를 사용하여 각 요소가 짝수인지 결정하는 함수를 전달했습니다. 숫자가 짝수이면 함수는 true를 반환하고 요소는 새 배열 evenNumbers에 포함됩니다. 숫자가 홀수이면 함수는 false를 반환하고 해당 숫자는 새 배열에서 제외됩니다.

다음은 객체 배열을 필터링하고 실제 요소만으로 새 배열을 만드는 코드입니다. 객체 배열에 filter()를 사용하는 단계는 다음과 같습니다.

다음은 프로그램을 보여주는 예제 코드 조각입니다.

위의 코드에서 우리는 프리랜서 객체의 배열을 정의했습니다. freelancers 배열에 filter() 메서드를 사용하고 각 프리랜서가 JavaScript에 능숙한지 확인하는 함수를 전달했습니다. 스킬이 조건과 일치하면 해당 개체가 새로운 배열 filter_freelancers에 포함되었습니다. 스킬이 일치하지 않으면 함수는 false를 반환하고 해당 개체는 새 배열에서 제외됩니다. 결과는 JavaScript에 능숙한 두 명의 프리랜서 Harry와 David가 포함된 새 배열을 반환합니다.

다음은 배열의 모든 소수를 필터링하고 소수만으로 새 배열을 만드는 코드입니다. filter()를 사용하는 단계는 다음과 같습니다.

다음은 예제를 보여주는 예제 코드 조각입니다.