JavaScript Réduire les valeurs


Exemple

5.1

La méthode Reduce reduce() applique une fonction à un accumulateur et à chaque valeur du tableau (de gauche à droite) pour la réduire à une valeur unique.

Tableau Sum

Cette méthode peut être utilisée pour condenser toutes les valeurs d'un tableau en une seule valeur:

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

Le second paramètre facultatif peut être transmis pour reduce() . Sa valeur sera utilisée comme premier argument (spécifié en tant a ) pour le premier appel du rappel (spécifié en tant que function(a, b) ).

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

5.1

Aplatir un tableau d'objets

L'exemple ci-dessous montre comment aplatir un tableau d'objets en un seul objet.

var array = [{
    key: 'one',
    value: 1
}, {
    key: 'two',
    value: 2
}, {
    key: 'three',
    value: 3
}];
5.1
array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});
6
array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});
7
array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});

Notez que les propriétés Rest / Spread ne figurent pas dans la liste des propositions finies de ES2016 . Il n'est pas pris en charge par ES2016. Mais nous pouvons utiliser le plugin babel babel-plugin-transform-object-rest-spread pour le supporter.

Tous les exemples ci-dessus pour Flatten Array entraînent:

{
  one: 1,
  two: 2,
  three: 3
}

5.1

Carte utilisant Réduire

Comme autre exemple d'utilisation du paramètre de valeur initiale , considérez la tâche d'appeler une fonction sur un tableau d'éléments, en renvoyant les résultats dans un nouveau tableau. Comme les tableaux sont des valeurs ordinaires et que la concaténation de listes est une fonction ordinaire, nous pouvons utiliser la reduce pour accumuler une liste, comme le montre l'exemple suivant:

function map(list, fn) {
  return list.reduce(function(newList, item) {
    return newList.concat(fn(item));
  }, []);
}

// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]

Notez que ceci est à titre d'illustration (du paramètre de valeur initiale) uniquement, utilisez la map native pour travailler avec les transformations de liste (voir Mappage des valeurs pour les détails).


5.1

Trouver la valeur minimale ou maximale

Nous pouvons également utiliser l'accumulateur pour suivre un élément de tableau. Voici un exemple tirant parti de cela pour trouver la valeur min:

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10
6

Trouvez des valeurs uniques

Voici un exemple qui utilise baisser pour renvoyer les nombres uniques dans un tableau. Un tableau vide est passé comme second argument et est référencé par prev .

var arr = [1, 2, 1, 5, 9, 5];

arr.reduce((prev, number) => {
  if(prev.indexOf(number) === -1) {
    prev.push(number);
  }
  return prev;
}, []);
// → [1, 2, 5, 9]