반응형
1) reduce
: 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환
누적 값과 현재의 값을 이용하여 여러 기능을 구현할 수 있는 유용한 함수
* reduce는 callback 함수에 acc(누산기), cur(현재값), idx(현재 인덱스), src(원본 배열)의 네 개의 인자를 가지고 있음
구문
arr.reduce(callback[, initialValue])
예1) 합산
const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
결과 : 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
결과: 15
예2) 값(value)이 동일한 것 개수 세기
var arr = ['a', 'a', 'a', 'c', 'c', 'd', 'e'];
var reducer = (acc, cur, index) => {
// 누적된 값과 현재값이 일치하지 않으면
if (!acc[cur]) {
acc[cur] = 1;
} else {
// 누적된 값과 현재값이 일치하면
acc[cur] = acc[cur] + 1;
}
return acc;
};
var sorting = arr.reduce(reducer, {});
console.log(sorting);
결과 : { a: 3, c: 2, d: 1, e: 1 }
3) 배열의 숫자중 짝수의 값을 찾아서 * 2를 한후 새로운 배열에 넣어준다.
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 16, 20];
var reducer = (acc, cur, index) => {
if (cur % 2 === 0) acc.push(cur * 2);
return acc;
};
var double = arr.reduce(reducer, []);
console.log(arr);
결과 : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 16, 20]
console.log(double);
결과 : [4, 8, 12, 16, 20, 32, 40]
4) 배열의 일부 키값중에 중복된 데이타를 제외하여 가져옴
const input = [
{
title: '태극기휘날리며',
year: '2005',
cast: ['장동건', '원빈', '공형진', '김수로']
},
{
title: '주유소습격사건',
year: '2013',
cast: ['차승원', '김수로', '유해진', '유오성']
},
{
title: '하녀',
year: '1997',
cast: []
}
];
const key = 'cast';
const flatReducer = (acc, cur) => {
cur[key].reduce((acc2, cur2) => {
if (acc2.indexOf(cur2) === -1) acc2.push(cur2);
return acc2;
}, acc);
return acc;
};
const flatten = input.reduce(flatReducer, []);
console.log(flatten); // 배열의 일부값
결과 : ['장동건', '원빈', '공형진', '김수로', '차승원', '유해진', '유오성']
반응형
'개발 > javascript' 카테고리의 다른 글
간단한 자바스크립트 코딩 테스트 몇가지(1) (0) | 2022.04.26 |
---|---|
자바스크립트 event(이벤트) (0) | 2022.04.19 |
자바스크립트 배열 내장 함수(3) (0) | 2021.12.07 |
자바스크립트 배열 내장 함수(2) (0) | 2021.12.07 |
자바스크립트 배열 내장 함수(1) (0) | 2021.12.07 |