Comment utiliser la méthode de réduction en javascript

En JavaScript, réduire est une méthode de fusion et le format de syntaxe est "array.reduce(function(previous value, current value, index, array object){}, initial value)". La méthode de réduction reçoit une fonction d'accumulateur et chaque valeur du tableau est réduite à une valeur unique.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Contrairement aux méthodes d'itération des deux articles précédents (implémentation de map(), implémentation de filter()), réduire() est une méthode de fusion.

reduce prend deux paramètres :

Le premier paramètre est la fonction appelée sur chaque élément

Cette fonction reçoit 4 paramètres :

• Valeur précédente prev

• Valeur actuelle cur

• L'index de l'index de l'élément

• Tableau d'objets tableau
  

Le deuxième paramètre facultatif est utilisé comme base pour fusion La valeur initiale de la méthode

reduce renvoie une valeur finale.

Représentation du code :

arr.reduce(function(prev, cur, index, arr){}, initialValue)

Fusion

Différent de l'itération précédente, la réduction n'exécute pas la fonction objectif pour chaque élément, mais peut se résumer aux deux étapes suivantes :

• "Supprimez" continuellement les deux premiers éléments du tableau, exécutez la fonction cible sur eux et calculez la valeur de retour

• Mettez la valeur de retour ci-dessus "Remplissez" la tête du tableau en tant que nouveau tableau[0]

• Continuez à exécuter ce processus en boucle jusqu'à ce que chaque élément du tableau ait été visité une fois

• Renvoyer le résultat final

Exemple

Exécution de fusion du tableau [1, 2, 3] (préc, cur) => prev + cur, Le processus est comme indiqué sur la figure :

[1, 2, 3] // 取出 1 + 2 ，填回 3
[3, 3] // 取出 3 + 3 ，填回 6
[6] // 最终结果为 6

Nous obtenons donc 6.

Implémentation

Première version

Selon cette idée, la première version du code est la suivante

// 第一版
Array.prototype.fakeReduce = function fakeReduce(fn, base) {
  // let arr = base ? this.unshift(base) : this;// 首进,返回新数组的长度，影响原数组 故不能这么写
  let initialArr = this;
  let arr = initialArr.concat(); //得到副本

  if (base) arr.unshift(base); // 当存在归并基础值的参数时，将其从数组首部推入
  let index;

  while (arr.length > 2) {
    index = initialArr.length - arr.length + 1;
    let newValue = fn.call(null, arr[0], arr[1], index, initialArr);
    arr.splice(0, 2); // 删除前两项，影响原数组
    arr.unshift(newValue);// 把 fn(arr[0],arr[1]) 的结果从数组首部推入
  }
  index += 1;
  let result = fn.call(null, arr[0], arr[1], index, initialArr);
  return result;
};

Remarque :

La méthode de file d'attente unshift()

peut ajouter n'importe quel élément de la tête du tableau. La valeur de retour est la longueur du nouveau tableau, affectant le tableau d'origine

splice(). méthode, que Gao Cheng San a saluée comme la méthode de tableau la plus puissante

Supprimer n'importe quel nombre d'éléments

Spécifiez 2 paramètres : (Supprimer la position de départ, le nombre d'éléments supprimés)

Insérez n'importe quel nombre d'éléments

Spécifiez 3 paramètres : (position de départ, 0, élément à insérer)

Le deuxième paramètre 0 est le numéro à supprimer

Remplacement, c'est-à-dire suppression Insérez n'importe quel nombre d'éléments tout en insérant n'importe quel nombre d'éléments

Spécifiez 3 paramètres : (position de départ, nombre d'éléments à supprimer, n'importe quel nombre d'éléments à insérer)

Valeur renvoyée Toujours un tableau contenant les éléments supprimés du tableau d'origine. Si aucun élément n'est supprimé, un tableau vide est renvoyé, affectant le tableau d'origine

Version améliorée

Comme le montre le résumé ci-dessus, la méthode splice() peut remplacer complètement la méthode unshift( ) méthode.

De plus, il existe des codes en double dans la première version, qui peuvent également être améliorés.

La deuxième version du code est obtenue à partir de cette

// 第二版
Array.prototype.fakeReduce = function fakeReduce(fn, base) {

  let initialArr = this;
  let arr = initialArr.concat();

  if (base) arr.unshift(base);
  let index, newValue;

  while (arr.length > 1) {
    index = initialArr.length - arr.length + 1;
    newValue = fn.call(null, arr[0], arr[1], index, initialArr);

    arr.splice(0, 2, newValue); // 直接用 splice 实现替换
  }

  return newValue;
};

Détection :

let arr = [1, 2, 3, 4, 5];
let sum = arr.fakeReduce((prev, cur, index, arr) => {
  console.log(prev, cur, index, arr);
  return prev * cur;
}, 100);

console.log(sum);

Sortie :

100 1 0 [ 1, 2, 3, 4, 5 ]
 100 2 1 [ 1, 2, 3, 4, 5 ]
 200 3 2 [ 1, 2, 3, 4, 5 ]
 600 4 3 [ 1, 2, 3, 4, 5 ]
 2400 5 4 [ 1, 2, 3, 4, 5 ]
 12000

Enfin ajouter le type détection, etc.

// 第三版
Array.prototype.fakeReduce = function fakeReduce(fn, base) {
  if (typeof fn !== "function") {
    throw new TypeError("arguments[0] is not a function");
  }
  let initialArr = this;
  let arr = initialArr.concat();

  if (base) arr.unshift(base);
  let index, newValue;

  while (arr.length > 1) {
    index = initialArr.length - arr.length + 1;
    newValue = fn.call(null, arr[0], arr[1], index, initialArr);

    arr.splice(0, 2, newValue); // 直接用 splice 实现替换
  }

  return newValue;
};

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!