So verwenden Sie die Reduce-Methode in Javascript

In JavaScript ist Reduzieren eine Zusammenführungsmethode und das Syntaxformat lautet „array.reduce(Funktion(vorheriger Wert, aktueller Wert, Index, Array-Objekt){}, Anfangswert)“. Die Reduce-Methode empfängt eine Funktion als Akkumulator und jeder Wert im Array wird auf einen einzelnen Wert reduziert.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Anders als die Iterationsmethoden in den beiden vorherigen Artikeln (Implementierung von Map (), Implementierung von Filter ()) ist Reduce () eine Zusammenführungsmethode.

reduce erhält zwei Parameter:

Der erste Parameter ist die Funktion, die für jedes Element aufgerufen wird

Diese Funktion empfängt 4 Parameter:

• vorheriger Wert prev

• aktueller Wert cur

• Index des Elements

• Array-Objekt-Array
  

Der zweite optionale Parameter ist die Initiale Wert, der als Grundlage für die Zusammenführung dient. Die Methode „reduce“ gibt einen Endwert zurück.

Codedarstellung:

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

Zusammenführen

Im Gegensatz zur vorherigen Iteration führt die Zusammenführung nicht die Zielfunktion für jedes Element aus, sondern kann in den folgenden zwei Schritten zusammengefasst werden:

Kontinuierlicher Vergleich der ersten beiden Elemente von Nehmen Sie das Array heraus, führen Sie die Zielfunktion darauf aus und berechnen Sie den Rückgabewert
Füllen Sie den obigen Rückgabewert wieder in den Kopf des Arrays als neues Array[0]
Fahren Sie fort Führe diesen Prozess in einer Schleife aus, bis jedes Mal im Array jedes Element einmal besucht wird. Das Endergebnis wird zurückgegeben. Beispiel: Merge-Ausführung des Arrays [1, 2, 3] (prev, cur) = > prev + cur, der Prozess ist wie folgt:

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

  Also bekommen wir 6.

Implementierung

• Erste Version

Nach dieser Idee lautet die erste Version des Codes wie folgt

// 第一版
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;
};

Hinweis:

Warteschlangenmethode unshift()

kann eine beliebige Anzahl von Elementen vom Kopf des Arrays hinzufügen , und der Rückgabewert ist eine neue Array-Länge, die sich auf die ursprüngliche Array-Methode auswirkt Position, Anzahl der Elemente löschen)

Eine beliebige Anzahl von Elementen einfügen

Geben Sie 3 Parameter an: (Startposition, 0, einzufügendes Element)

Der zweite Parameter 0 ist die zu löschende Nummer

Ersetzung, also löschen beliebig viele Elemente. Fügen Sie gleichzeitig eine beliebige Anzahl von Elementen ein.

Geben Sie 3 Parameter an: (Startposition, Anzahl der zu löschenden Elemente, beliebig viele Elemente, die eingefügt werden sollen).

Der Rückgabewert ist immer ein Array, das die aus dem gelöschten Elemente enthält ursprüngliches Array-Element. Wenn keine Elemente gelöscht werden, wird ein leeres Array zurückgegeben, was sich auf das ursprüngliche Array auswirkt

Verbesserte Version

Wie aus der obigen Zusammenfassung ersichtlich ist, kann die Methode splice() die Methode unshift() vollständig ersetzen.

Außerdem gibt es in der ersten Version einige doppelte Codes, die ebenfalls verbessert werden können.

Die zweite Version des Codes wird daraus erhalten

// 第二版
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;
};

Erkennung:

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);

Ausgabe:

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

Schließlich plus Typerkennung usw.

// 第三版
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;
};

[Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

]

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Reduce-Methode in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!