JavaScript reduce los detalles de uso

1. Introducción a la gramática reducida

array.reduce((prev, item, index, arr)=> {
    
    
    /***/
}, initialValue)

Parámetros:
función de devolución de llamada del parámetro uno, que contiene cuatro parámetros:

anterior	Si se proporciona initialValue, lo es; si se proporciona initialValue, es el primer elemento de la matriz
artículo	El elemento de matriz que está siendo procesado actualmente por el bucle de matriz
índice	el índice del valor actual actual
formación	La matriz en la que realizar la operación de reducción.

El segundo parámetro initialValue es el valor inicial, el valor inicial se puede proporcionar o no. Proporcione un valor inicial, el elemento comienza desde el primer elemento de la matriz, si no se proporciona un valor inicial, el elemento comienza a ejecutarse desde el segundo elemento y el primer anterior correspondiente es el valor del primer elemento de la matriz Valor de retorno
:

Devuelve el resultado de la última ejecución.

Dos, análisis de ejemplo

let arr = ['h','i','n','a']
let str = arr.reduce((prev, item, index, arr)=> {
    
    
    console.log(prev, item, index, arr)
    return prev + item
}, 'C')
console.log(str) // China

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
    
    
  console.log(prev, cur, index);
  return prev + cur;
});
console.log(arr, sum);

resultado de impresión

1 2 1
3 3 2
6 4 3
[ 1, 2, 3, 4 ] 10

3. Asuntos que requieren atención

1. reduce es un método para acumular operaciones en matrices, y se debe agregar return para devolver los datos de la operación de acumulación. De esta manera, prev puede obtener el resultado de la última ejecución, de lo contrario, no está definido

2. Cuando la operación de reducción se realiza en una matriz vacía y no se proporciona el valor inicial, la reducción informará un error. El mensaje de error es el siguiente:
   

4. Uso específico

1. Deduplicación de matrices

let arr = [1, 2, 2, 2, 3, 3, 4, undefined, undefined, null]
arr.reduce((prev, item) => {
    
    
    return prev.includes(item) ? prev : prev.concat(item);
}, [])
 
// [1, 2, 3, 4, undefined, null]

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    
    
    if(!pre.includes(cur)){
    
    
      return pre.concat(cur)
    }else{
    
    
      return pre
    }
},[])
console.log(newArr);

2. Reducción de la dimensionalidad de la matriz de aplanamiento de matriz multidimensional a unidimensional

let arr = [0,[1],[2, 3],[4, [5, 6, 7]]];
let reduceArray = function (arr) {
    
    
    return arr.reduce((prev, item) => {
    
    
        return prev.concat(Array.isArray(item) ? reduceArray(item) : item)
    }, [])
}
reduceArray(arr)
 
//[0, 1, 2, 3, 4, 5, 6, 7]

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
    
    
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); 

2D hasta 1D

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    
    
    return pre.concat(cur)
},[])
console.log(newArr); 

打印结果[0, 1, 2, 3, 4, 5]

3. Acumulación de matriz

let arr = [1, 2, 3, 4]
arr.reduce((prev, item) => {
    
    
    return prev + item;
})
 
// 10

4. Cuente el número de ocurrencias de cada elemento en la matriz

var arr = ["one", "two", "three", "six", "four", "five", "six"];

var newArr = arr.reduce((pre, cur) => {
    
    
  console.log(cur, pre);
  if (cur in pre) {
    
    
    pre[cur]++;
  } else {
    
    
    pre[cur] = 1;
  }
  return pre;
}, {
    
    });//这里注意初始值要默认赋予空对象，不然会报错
console.log(newArr);

resultado de impresión

打印结果
one {
    
    }
two {
    
     one: 1 }
three {
    
     one: 1, two: 1 }
six {
    
     one: 1, two: 1, three: 1 }
four {
    
     one: 1, two: 1, three: 1, six: 1 }
five {
    
     one: 1, two: 1, three: 1, six: 1, four: 1 }
six {
    
     one: 1, two: 1, three: 1, six: 1, four: 1, five: 1 }
{
    
     one: 1, two: 1, three: 1, six: 2, four: 1, five: 1 }

5. Suma de atributos de objetos

var result = [
    {
    
    
        subject: 'math',
        score: 10
    },
    {
    
    
        subject: 'chinese',
        score: 20
    },
    {
    
    
        subject: 'english',
        score: 30
    }
];
 
var sum = result.reduce(function(prev, cur) {
    
    
    return cur.score + prev;
}, 0);
console.log(sum) 

打印结果	60