JavaScript array 原生 reduce 方法的模拟实现

在讨论这段 JavaScript 代码之前，我们需要了解 JavaScript 中的 Array.prototype.reduce() 方法的功能与使用方式。reduce() 方法对数组中的每个元素执行一个由用户提供的 reducer 函数（在这个例子中是 fn 函数），将其结果汇总为单个返回值。

代码段的详细解析如下：

var a = [1,2,3,4];

这行代码声明了一个名为 a 的变量，并将其初始化为一个包含四个元素的数组 [1, 2, 3, 4]。这个数组是 reduce() 方法的调用者。

function fn(pre, cur, index, arr) {
    console.log(`previous: ${pre}, cur: ${cur},
        index: ${index}, whole arr: ${arr}`);
    return pre + cur;
}

这里定义了一个名为 fn 的函数，它接受四个参数：

• pre：上一次调用回调函数返回的值，或者是提供的初始值（在第一次调用时）。
• cur：数组中正在处理的当前元素。
• index：数组中正在处理的当前元素的索引。
• arr：调用 reduce 方法的数组本身。

在这个函数体内，首先通过 console.log 输出了这四个参数的值。这对于调试和理解 reduce 方法的执行流程非常有帮助。之后，函数返回了 pre 和 cur 两个参数的和。这个返回值会作为下一次调用 fn 函数时的 pre 参数。

console.log(a.reduce(fn, 0));

最后这行代码中，reduce() 方法被调用。这里 fn 是 reduce 方法中的回调函数，而 0 是传给 reduce 的一个初始值，即第一次执行 fn 时 pre 参数的值。

在这个特定的例子中，reduce 方法的执行过程可以这样描述：

1. 第一次调用 fn 函数时，pre 的值为 0（初始值），cur 的值为 1（数组的第一个元素），index 为 0。
2. fn 函数返回 1（0 + 1），这成为第二次调用 fn 函数时的 pre 值。
3. 第二次调用 fn 函数时，pre 的值为 1，cur 的值为 2，index 为 1。
4. fn 函数返回 3（1 + 2），这成为第三次调用 fn 函数时的 pre 值。
5. 第三次调用 fn 函数时，pre 的值为 3，cur 的值为 3，index 为 2。
6. fn 函数返回 6（3 + 3），这成为第四次调用 fn 函数时的 pre 值。
7. 第四次调用 fn 函数时，pre 的值为 6，cur 的值为 4，index 为 3。
8. fn 函数返回 10（6 + 4），并且由于数组中没有更多元素，reduce 方法结束，并返回这个值。

最终，reduce() 方法返回的值 10 被 console.log() 输出。这个值是数组中所有元素的总和，加上了最初的 0。

这段代码虽然简短，但却很好地展示了 reduce() 方法的强大功能，特别是在数组累计或计算总和时的应用。通过 reduce() 方法，我们可以非常灵活地处理数组数据，执行复杂的计算或数据转换任务。此外，通过提供初始值，我们可以确保 reduce 方法正常工作，即使是在空数组上调用也不会出错。