자바스크립트: 줄이기

  • 단일 값을 반환합니다.
  • 원래 배열을 변경하지 않습니다.
  • 빈 배열 요소에 대해 함수를 실행하지 않습니다.
  • 구문: 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
    


    여기에서 나를 팔로우할 수 있습니다.

    좋은 웹페이지 즐겨찾기