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

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

javascript代码的数组遍历问题，又有了新的答案，这就是.reduce。本文中将讲述这个.reduce的使用方法。本文中的代码实验用例来自网络，略有改编。

苏南大叔的程序如此灵动博客，记录苏南大叔的代码理解。本文测试环境：node@16.14.2。

原型

函数原型是：

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

如果传递了初始值initialValue的话，第一次循环的时候，total就是initialValue。否则就是arr[0]。

相关文章：

• https://newsn.net/say/js-array-map.html

基本使用姿势

下面的例子，都是合并字符串。基本的使用姿势如下：

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 }

数组去重（利用set的天然去重特性也可以实现这个需求）

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

顺序执行promise函数：

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 

模拟.map()：

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' ]

结束语

来看看更多苏南大叔的javascript的经验文章吧：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。