js代码，如何理解JavaScript数组遍历的reduce方法？

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

let arr = ["s", "u", "n", "a", "n"];

let sum = arr.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue
}, "hi ")
console.log(sum)  // hi sunan

let sum2 = arr.reduce(
    (previousValue, currentValue) => previousValue + currentValue,
    "hola "
)
console.log(sum2) // hola sunan

let sum3 = arr.reduce(function (previousValue, currentValue, currentIndex, array) {
    console.log(previousValue, currentValue, currentIndex, array);
    /*
    s u 1 [ 's', 'u', 'n', 'a', 'n' ]
    su n 2 [ 's', 'u', 'n', 'a', 'n' ]
    sun a 3 [ 's', 'u', 'n', 'a', 'n' ]
    suna n 4 [ 's', 'u', 'n', 'a', 'n' ]
    */
    return previousValue + currentValue
})
console.log(sum3) // sunan

let arr = ["s", "u", "n", "a", "n"];
let counted_ = arr.reduce(function (_all, item) {
    if (item in _all) {
        _all[item]++
    }
    else {
        _all[item] = 1
    }
    return _all
}, {})
console.log(counted_)   //  { s: 1, u: 1, n: 2, a: 1 }

let arr2 = arr.reduce(function (previousValue, currentValue) {
    if (previousValue.indexOf(currentValue) === -1) {
        previousValue.push(currentValue)
    }
    return previousValue
}, [])
console.log(arr2)   // [ 's', 'u', 'n', 'a' ]
let arr3 = Array.from(new Set(arr))
console.log(arr3)  //  [ 's', 'u', 'n', 'a' ]

let people = [
    { item: 'sunan', age: 18 },
    { item: '苏南', age: 20 },
    { item: 'sunan大叔', age: 18 },
    { item: '苏南大叔', age: 20 }
];
function groupBy(arr, prop) {
    return arr.reduce(function (result, current) {
        let key = current[prop]
        if (!result[key]) {
            result[key] = []
        }
        result[key].push(current)
        return result
    }, {})
}
console.log(groupBy(people, 'age'));
/*
{
  '18': [ { item: 'sunan', age: 18 }, { item: 'sunan大叔', age: 18 } ],
  '20': [ { item: '苏南', age: 20 }, { item: '苏南大叔', age: 20 } ]
}
*/

const double = x => x + x;
const triple = x => x * 3;
const pipe = (...functions) => initialValue => functions.reduce(
    (result, fn) => fn(result),
    initialValue
)
console.log(pipe(double, triple)(6))     // 36

function runPromise(arr, input) {
    return arr.reduce(
        (promiseChain, currentFunction) => promiseChain.then(currentFunction),
        Promise.resolve(input)
    )
}
function f1(x) {
    return new Promise((resolve, reject) => {
        resolve(x+x)
    })
}
function f2(x) {
    // will be wrapped in a resolved promise by .then()
    return x * 3
}
// promise返回值返回结果的时机不一定
runPromise([f1, f2], 10).then(console.log)   // 30 

if (!Array.prototype.map2) {
    Array.prototype.map2 = function (callback, initialValue) {
        return this.reduce(function (mappedArray, currentValue, currentIndex, array) {
            mappedArray[currentIndex] = callback.call(initialValue, currentValue, currentIndex, array)
            return mappedArray
        }, [])
    }
}
let arr = ["s", "u", "n", "a", "n"];
console.log(arr.map2((currentValue, currentIndex, array) => currentValue))  // [ 's', 'u', 'n', 'a', 'n' ]