자바스크립트: 줄이기
array.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue);
const reduceArr = [1,2,3,4];
reduceArr.reduce((total, currentValue) => total+currentValue);
> 10
reduceArr //Doesn't mutate original array
> [1, 2, 3, 4]
reduceArr.reduce((total, currentValue) => total+currentValue, 10); // 10 is Initial value
> 20
previousValue:
callBackFn에 대한 이전 호출의 결과 값입니다. 첫 번째 호출 시 initialValue
달리 지정되지 않은 경우 array[0]
.currentValue:
현재 요소의 값입니다. 첫 번째 호출에서 initialValue
가 그렇지 않으면 array[1]
지정된 경우 array[0]의 값입니다.currentIndex:
currentValue 인덱스. 첫 번째 호출에서 initialValue
가 그렇지 않으면 1로 지정된 경우 0입니다.const array = [10, 20, 30, 40];
function reducer(previousValue, currentValue, index, array) {
const result = previousValue + currentValue;
console.log(`previous: ${previousValue}, current:${currentValue}, index: ${index}, array: ${array}`);
return result;
}
array.reduce(reducer);
> previous: 10, current: 20, index: 1, array: 10,20,30,40
> previous: 30, current: 30, index: 2, array: 10,20,30,40
> previous: 60, current: 40, index: 3, array: 10,20,30,40
> 100
예:
1. 축소를 사용하여 배열을 평평하게 합니다.
[[1,2],[3,4],[4,5]].reduce((p,n) => p.concat(n));
> [1, 2, 3, 4, 4, 5]
2. 배열에서 값의 인스턴스를 찾습니다.
['first', 'second', 'third', 'first', 'fourth', 'second'].reduce((list, name) => {
if(name in list) {
list[name]++;
} else {
list[name] = 1;
}
return list;
}, {});
> {first: 2, second: 2, third: 1, fourth: 1}
3.속성별로 개체를 그룹화합니다.
const obj = [
{name: 'Alex',age: 30},
{name: 'Max', age: 30},
{name: 'sony', age: 20},
{name: 'molly', age: 20}
];
function groupByProperty(array, prop) {
return array.reduce((list, current) => {
let key = current[prop];
if(!list[key]) {
list[key] = [];
}
list[key].push(current);
return list;
}, {})};
groupByProperty(obj, 'age');
> {
"20": [
{
"name": "sony",
"age": 20
},
{
"name": "molly",
"age": 20
}
],
"30": [
{
"name": "Alex",
"age": 30
},
{
"name": "Max",
"age": 30
}
]
}
4.중복 항목을 제거하십시오.
['a', 'b', 'c', 'a', 'b','c'].reduce((previous, current) => {
if(previous.indexOf(current) === -1) {
previous.push(current);
}
return previous;
}, []);
> ['a', 'b', 'c']
5. 기능적 구성.
const double = x => x+x;
const triple = x => 3 * x;
const pipe = (...functions) => input => functions.reduce((acc, fn, index) => {
console.log(`iteration: ${index}, accValue: ${acc}`);
return fn(acc)},input);
const multiply6 = pipe(double, triple);
multiply6(6);
> iteration: 0, accValue: 6
> iteration: 1, accValue: 12
> 36
여기에서 나를 팔로우할 수 있습니다.
Reference
이 문제에 관하여(자바스크립트: 줄이기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/urstrulyvishwak/javascript-reduce-2b6d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)