Explicación detallada de la función de reducción en ES6

Formato de sintaxis de la función de reducción

arr.reduce(callback,[initialValue])
/* callback （执行数组中每个值的函数，包含四个参数）

        1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
        2、currentValue （数组中当前被处理的元素）
        3、index （当前元素在数组中的索引）
        4、array （调用 reduce 的数组）

        initialValue （作为第一次调用 callback 的第一个参数（初始previousValue）。）*/

El siguiente código es mejor para entender

//数组求和
var arr = [1, 2, 3, 4];

 var sum = arr.reduce(function(prev, cur, index, arr) {
    
    
 //调试，实在不明白可以单步调试一下
// debugger
     console.log(prev, cur, index,arr);
     return prev + cur;
     //下面的指定pre的初始值为0
 },0)
 console.log(arr, sum);

La esencia de esta función es recorrer la matriz. Cur e index se moverán desde el principio hasta el final de la matriz. El valor de retorno de la función se usa como el valor previo de la siguiente llamada a la función (si el recorrido es completado, será el valor de retorno de reduce)
La primera llamada a la función: pre = 0, cur = 1, index = 0, arr = [1,2,3,4] devuelve (el siguiente pre) 1; la
segunda llamada a la función: pre = 1, cur = 2, index = 1, arr = [1,2,3,4] devuelve (el siguiente pre) 3; la
tercera llamada a la función: pre = 3, cur = 3, index = 2, arr = [1,2,3,4] devuelve (el siguiente Pre) 6; la
cuarta llamada a la función: pre = 6, cur = 4, index = 3, arr = [1, 2,3,4] devuelve el valor de retorno de la función de reducción 10;

Mire el siguiente demonio (uso avanzado de reducir) para profundizar su comprensión

//reduce函数的高级用法，求数组中元素的出现次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur,index)=>{
    
    
    console.log(pre,cur,index)
    if(cur in pre){
    
    
        pre[cur]++
    }else{
    
    
        pre[cur] = 1
    }
    console.log(pre,cur,index)
    return pre
},
    //这里设置pre初始值是空对象
    {
    
    })
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

//数组的去重
    let arr = [1,2,3,4,5,1,3,7,2,1,3,4,8,5,5,7]
    newarr = arr.reduce((pre,curr,index,arr)=>{
    
    
       // debugger
        console.log(pre,curr)
        //console.log(typeof pre,typeof curr)
        //不可以写成curr in pre  原因往下看
        if (pre.includes(curr)) console.log(curr+"已经包含在对象中了");
        else pre.push(curr)
        return pre
    },[])
    console.log(arr)
    console.log(newarr)*/

En los dos ejemplos anteriores, el primero puede usar la palabra clave in para determinar si un atributo está en el objeto.
Pero hay un problema, ¿por qué el siguiente juez si el elemento está en la matriz no se puede usar en? Esto implica la diferencia entre en e incluye, consulte el siguiente blog

La diferencia entre ES6 en e incluye
Si hay algún error en el artículo, puede criticarlo y corregirlo.