티스토리 뷰
728x90
반응형
reduce 활용
1. 합산
const sum = [0, 1, 2, 3].reduce((acc, cur) => acc + cur);
console.log("sum=", sum); // sum = 6
//initVal - 이 초기값에 따라 누적값에 대한 처리가 달라진다.
//initVal - 숫자대입시 숫자 누적연산이 가능하고 배열 대입시 배열 연산처리
//initVal - 초기값이 없다면 배열의 첫번째 요소 호출
//initVal - 초기값이 설정되지 않고 배열 내부에 오브젝트로 되어 있을시엔 첫번째 오브젝트를 기준으로
// 누적연산되기에 오브젝트에 관련된 메서드등은 처리가 되지만 산술연산등은 성립되지 않으니 주의.
let initVal = 0;
let objToSum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce((acc, cur, index) => {
return acc + cur.x;
}, initVal);
console.log("objToSum=", objToSum); // objToSum= 6
2. 배열 조작 ( 평탄화 )
//중첩 1차 배열 평탄화
let flattened = [
[0, 1],
[2, 3],
[4, 5]
].reduce((acc, cur) => acc.concat(cur), []);
console.log(flattened); //[0, 1, 2, 3, 4, 5]
3. 중복 값 수치화
let names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
let countedNames = names.reduce((allNames, name) => {
if (name in allNames) {
allNames[name]++;
} else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
4. 객체 분류
let people = [
{ name: "Alice", age: 21 },
{ name: "Max", age: 20 },
{ name: "Jane", age: 20 }
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedPeople = groupBy(people, "age");
console.log(groupedPeople);
/*{
20: [{name: "Max", age: 20}, {name: "Jane", age: 20}],
21: [{name: "Alice", age: 21}]
}*/
5. 중복 항목 제거
let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((acc, cur) => {
const length = acc.length;
// acc 는 초기에는 [] 빈값 - acc 는 cur의 연산처리 및 콜백 반환값을 누적한값
// console.log( acc, cur );
if (length === 0 || acc[length - 1] !== cur) {
// console.log(acc, cur);
acc.push(cur);
}
return acc;
}, []);
// console.log(result); //[1,2,3,4,5]
728x90
반응형
'Programming language > javascript' 카테고리의 다른 글
[javascript] null, undefined, ’‘, 0 을 손쉽게 체크하기 (0) | 2023.04.27 |
---|---|
[Dom script] Element.matches() 이벤트 핸들러에서 자주 사용 (0) | 2022.12.07 |
forEach ( javascript 반복문 ) (0) | 2022.06.23 |
for of 구문 (0) | 2022.06.22 |
count rolling motion (0) | 2021.01.10 |
댓글
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 자바스크립트
- Vue3
- svg모션
- git checkout -b
- react
- 아이콘 폰트 만들기
- for of 구문
- IntrinsicElements
- interceptors
- 코도바
- vue-router
- JsDoc
- React.StrictMode
- 태그
- Angular
- Aptana
- 내장요소
- Intrinsic
- RefreshToken
- 반복문
- git
- cordova
- svg icon font
- anime.js
- react-router-dom
- 앵귤러
- svg 폰트
- CSS
- 리프래시토큰
- icon font
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함