JS의 배열 반복자 메서드 이해: 필터링, 매핑 및 축소

JavaScript에는 배열 변환을 위한 반복 방법이 내장되어 있습니다. filter(), map(), Reduce()와 이들의 사용 조건을 분석해 보겠습니다.

Array.filter()

제공된 함수로 구현된 테스트를 통과한 모든 요소로 새 배열을 생성합니다. 배열의 각 요소에 대해 제공된 콜백 함수를 한 번씩 호출하고 콜백 함수가 true를 반환하는 모든 값의 새 배열을 반환합니다.

구문

filter(callbackFn)
filter(callbackFn, thisArg)

다음과 같이 평가됩니다: Array.filter((element, index, array) => { ... } )

콜백Fn은 배열의 각 요소에 대해 실행되는 함수로, 결과 배열의 요소를 유지하려면 참 값을 반환하고 그렇지 않으면 거짓 값을 반환해야 합니다. 이 함수는 현재 요소, 인덱스, 배열 자체라는 세 가지 인수를 사용합니다.

아래 예에서 숫자 배열이 주어지고 짝수를 찾을 것으로 예상되면 다음과 같이 filter() 메서드를 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

Array.map()

map() 메서드는 현재 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다. 값이 할당된 배열 인덱스에 대해서만 콜백 함수를 호출하고 빈 슬롯에 대해서는 호출하지 않습니다.

구문

map(callbackFn)
map(callbackFn, thisArg)

간단히 다음과 같이 해석됩니다: Arrays.map((element, index, array) => { ... })

callbackFn은 배열의 각 요소에 대해 실행되는 함수이며 반환 값은 새 배열의 단일 요소로 추가됩니다.
이 함수는 현재 요소, 인덱스, 배열 자체라는 세 가지 인수를 사용합니다.

숫자 배열이 주어지고 사각형을 반환할 것으로 예상되는 경우 아래와 같이 map() 메서드가 가장 효과적입니다.

const numbers = [1, 2, 3, 4, 5];
const squareNumbers = numbers.map(number => number ** 2);
console.log(squareNumbers); // Output: [1, 4, 9, 16, 25]

한 배열의 값을 다른 배열에 매핑하고 있습니다.

Array.reduce()
Reduce() 메서드는 배열의 각 요소에 대해 콜백 함수 감소기를 인덱스 오름차순으로 실행하여 이전 요소 계산의 반환 값을 전달합니다. 모든 배열 요소에 걸쳐 리듀서를 실행한 최종 결과는 단일 값입니다.

초기값이 제공되면 콜백의 첫 번째 호출에서 첫 번째 인수로 사용됩니다. 초기값이 제공되지 않으면 배열의 첫 번째 요소가 초기값으로 사용되며 두 번째 요소부터 반복이 시작됩니다.

구문

reduce(callbackFn)
reduce(callbackFn, initialValue)

callbackFn은 배열의 각 요소에 대해 실행되는 함수입니다. 반환 값은 다음에 콜백을 호출할 때 accumulator 매개 변수의 값이 됩니다. 마지막 호출의 경우 반환 값은 Reduce() 함수의 반환 값이 됩니다.
다음 인수를 사용합니다: 누산기, currentValue, currentIndex 및 호출된 배열.

숫자 배열을 사용하고 그 합을 구하는 작업을 수행하면 Reduce() 메소드는 아래와 같이 쉽게 평가할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15

결론
filter(), map() 및 Reduce() 메소드는 배열 반복 및 조작에 필수적입니다.

• filter()는 주어진 배열에서 콜백 함수 기준을 충족하는 모든 요소를 ​​찾는 데 가장 적합합니다.

• map()은 주어진 배열의 데이터를 조작하고 반환 값을 기대하는 데 가장 적합한 비파괴적 배열 방법입니다.

• reduce()는 리듀서 함수를 기반으로 배열 요소를 단일 값으로 집계하는 데 유용합니다.

참고자료

• Array.prototype.filter의 MDN 웹 문서

• Array.prototype.map의 MDN 웹 문서

• Array.prototype.reduce의 MDN 웹 문서

위 내용은 JS의 배열 반복자 메서드 이해: 필터링, 매핑 및 축소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!