reduce () 방법 - 배열 의 무 게 를 줄 이 고 대상 의 구 화 등

arr.reduce(callback,[initialValue])

 

    1、previousValue （           ，         （initialValue））
    2、currentValue （           ）
    3、index （           ）
    4、array （   reduce    ）

2. 인 스 턴 스 분석 initialValue 파라미터
먼저 첫 번 째 예 를 보십시오.
 

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

인쇄 결과: 1, 2, 1, 3, 3, 2, 6, 4 [1, 2, 3, 4] 10
여기 서 알 수 있 듯 이 위의 예 index 는 1 에서 시 작 된 것 이 고 첫 번 째 prev 의 값 은 배열 의 첫 번 째 값 이다.배열 길 이 는 4 이지 만 reduce 함 수 는 3 회 순환 합 니 다.
두 번 째 예 를 보 자.
 

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //          
console.log(arr, sum);

인쇄 결과: 0 1 0 1 2 1 3 2 6 4 3 [1, 2, 3, 4] 10
이 예 index 는 0 에서 시작 되 었 습 니 다. 첫 번 째 prev 의 값 은 우리 가 설정 한 초기 값 0 입 니 다. 배열 의 길 이 는 4 이 고 reduce 함수 가 4 번 순환 합 니 다.
결론: initialValue，reduce 1 callback ， 。 initialValue， 0 。주의: 이 배열 이 비어 있 으 면 reduce 를 사용 하 는 것 은 어떤 상황 입 니까?
 

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
//  ，"TypeError: Reduce of empty array with no initial value"

그러나 우리 가 초기 값 을 설정 하면 틀 리 지 않 습 니 다. 다음 과 같 습 니 다.
 

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)
console.log(arr, sum); // [] 0

그래서 일반적으로 우 리 는 초기 값 을 제공 하 는 것 이 더 안전 하 다.
3. reduce 의 간단 한 용법
물론 가장 간단 한 것 은 우리 가 자주 사용 하 는 배열 의 구 화, 곱 하기 이다.
 

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //  ，10
console.log( mul ); //   ，24

4. reduce 의 고급 용법
(1) 배열 의 모든 요소 가 나타 나 는 횟수 를 계산한다.
 

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}



const arraySum = (arr, val) => arr.reduce((acc, cur) => {
    return cur == val ? acc + 1 : acc + 0
}, 0);

let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ]
console.log(arraySum(arr, 0)) //   arr  0         3

(2) 배열 재 활용
 

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

(3) 2 차원 배열 을 1 차원 으로 전환한다.
 

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

(3) 다 차원 배열 을 1 차원 으로 전환한다.
 

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

(4) 、 대상 의 속성 구 화
 

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

 
마지막 재조합 배열

var data = [
					{id:1,name:'A',parentId: 0},
					{id:2,name:'B',parentId: 0},
					{id:3,name:'C',parentId: 1},
					{id:4,name:'D',parentId: 1},
					{id:5,name:'E',parentId: 2},
					{id:6,name:'F',parentId: 3},
					{id:7,name:'G',parentId: 2},
					{id:8,name:'H',parentId: 4},
				]
function convert(list) {
				const res = []
				const map = list.reduce((res,v) => (res[v.id] = v, res), {})
				for(const item of list) {
					if(item.parentId === 0) {
						res.push(item)
						continue
					}
					if(item.parentId in map) {
						const parent = map[item.parentId]
						parent.children = parent.children || []
						parent.children.push(item)
					}
				}
				console.log(res)
			},