flatMap()map()의 기능을 flat()단일 메서드로 결합하는 JavaScript 및 TypeScript의 고차 배열 메서드입니다 .
이 map()메서드는 제공된 콜백 함수를 기반으로 배열의 각 요소를 변환하고 변환된 요소가 포함된 새 배열을 반환합니다. flat()반면에 이 방법은 중첩된 배열을 단일 수준 배열로 병합합니다.
이 메서드는 배열의 각 요소에 함수를 flatMap()적용한 다음 결과 배열을 단일 수준 배열로 평면화합니다. map()제공된 콜백 함수를 사용하여 각 요소를 0개 이상의 요소 배열로 변환한 다음 해당 배열을 단일 수준 배열로 연결하여 이를 수행합니다.
const arr = [1, 2, 3];
const mapped = arr.map(x => [x, x * 2]);
console.log(mapped); // Output: [[1, 2], [2, 4], [3, 6]]
const flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]
flatMap()을 사용한 경우
const arr = [1, 2, 3];
const pairs = arr.flatMap(x => [x, x * 2]);
console.log(pairs); // Output: [1, 2, 2, 4, 3, 6]
map()을 사용한 경우
const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
console.log(doubled); // Output: [2, 4, 6]
이 예에서 함수는 배열 의 각 요소에 flatMap()콜백 함수를 적용하여 배열의 배열을 생성합니다 . 그런 다음 이 배열을 단일 수준 배열로 평면화합니다 .x => [x, x * 2]arr[[1, 2], [2, 4], [3, 6]][1, 2, 2, 4, 3, 6]
map()따라서 and 사이의 주요 차이점은 항상 원래 배열과 동일한 길이의 배열을 반환하고 반면 콜백 함수의 출력에 따라 다른 길이의 배열을 반환할 수 있다는 flatMap()것입니다.
'개발 > Web' 카테고리의 다른 글
[React] React 프로젝트 생성 및 환경 설정 (0) | 2023.04.09 |
---|---|
[React] useEffect (0) | 2023.04.06 |
[React] CSS 분기 꿀팁 (0) | 2021.11.26 |
[Git] git@github.com: Permission denied (publickey). 해결 (0) | 2021.05.01 |
[js] HTML element 비활성화, 활성화 (0) | 2021.02.04 |