JavaScript를 사용하여 배열에서 맵과 필터를 모두 사용하는 방법은 무엇입니까?

filter() 메서드는 배열의 값을 필터링하는 데 사용되며 map() 메서드는 이전 배열의 각 값을 기반으로 새 값을 다른 배열에 매핑하는 데 사용됩니다.

때로는 filter()와 map() 메서드를 동시에 사용해야 하는 경우가 있습니다. 예를 들어, 배열에서 모든 양수를 필터링하고 해당 로그 값을 새 배열에 매핑하려고 합니다

이 튜토리얼을 시작하기 전에 filter() 및 map() 메서드에 대한 소개를 살펴보겠습니다. 이 튜토리얼에서는 JavaScript를 사용하여 배열에 매핑 및 필터링 방법을 모두 사용하는 방법을 알아봅니다.

array.filter() 메소드의 구문

사용자는 다음 구문에 따라 JavaScript filter() 메서드를 사용할 수 있습니다.

으아악

위 구문에서는 콜백 함수를 filter() 메서드의 매개 변수로 전달하고 있습니다.

array.map() 메서드 구문

사용자는 다음 구문에 따라 JavaScript map() 메서드를 사용할 수 있습니다.

으아악

위 구문에서는 map() 메서드의 콜백 함수에서 배열 요소를 반환해야 합니다.

매개변수

• element - filter() 메서드를 사용하여 배열을 반복할 때 배열의 현재 요소입니다.

• index – 배열에 있는 요소의 인덱스입니다.

• self - 그 자체가 배열입니다.

array.map() 및 array.filter() 메서드를 모두 사용하세요

이 섹션에서는 단일 배열에서 filter() 및 map() 메서드를 함께 사용하는 방법을 설명합니다.

문법

사용자는 다음 구문에 따라 map() 및 filter() 메서드를 함께 사용할 수 있습니다.

으아악

위 구문에서는 먼저 배열에 filter() 메서드를 사용한 다음 map() 메서드를 사용했습니다.

예 1

아래 예에서는 배열에 양수와 음수가 포함되어 있습니다. 배열을 참조로 사용하고 배열의 filter() 메서드를 호출하여 배열의 모든 양수 값을 필터링합니다. filter() 메서드의 콜백 함수에서는 숫자가 0보다 크면 true를 반환하고, 그렇지 않으면 오류를 반환합니다.

그런 다음 map() 메서드를 사용하고 필터링된 각 요소의 로그를 반환합니다. 필터링된 배열에서 음수 값을 모두 제거했기 때문에 사용자는 logarithmic_values ​​배열에 6개의 값만 포함되어 있음을 알 수 있습니다.

으아악

예 2

아래 예에서는 객체 배열을 생성합니다. 배열의 각 객체에는 직원 ID, 근속 연수 및 급여가 포함됩니다.

이후에는 filter() 메소드를 사용하여 경력 3년 이상의 직원을 모두 필터링합니다. 다음으로, map() 메소드를 사용하여 모든 직원의 급여를 50% 인상하고 새 급여를 new_salaries 배열에 저장합니다.

출력에서 사용자는 처음에 증가 후 총 급여를 관찰할 수 있습니다.

으아악

사용자들은 다양한 예제를 통해 filter()와 map() 메소드를 함께 사용하는 방법을 배웠습니다. 첫 번째 예에서는 숫자 배열과 함께 filter() 및 map() 메서드를 사용합니다. 두 번째 예에서는 객체 배열과 함께 filter() 및 map() 메서드를 사용하는 방법도 배웠습니다.

위 내용은 JavaScript를 사용하여 배열에서 맵과 필터를 모두 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!