Verständnis der allmächtige Reducer

0
39

Ich war vor kurzem mentoring jemanden, der hatte Probleme mit der .reduce () – Methode in JavaScript. Nämlich, wie Sie von dieser:

const nums = [1, 2, 3]
let Wert = 0

for (let i = 0; i < nums.length; i++) {
Wert += nums[i]
}

…:

const nums = [1, 2, 3]
const Wert = nums.reduzieren((ac, next) => ac – + next, 0)

Sie sind funktional gleichwertig und beide sind die Summe aller zahlen im array, aber es ist ein bisschen der Paradigmenwechsel zwischen Ihnen. Wir erkunden Reduzierstücke für einen moment, denn Sie sind mächtig und wichtig, um in Ihrem Programmier-toolbox. Es gibt buchstäblich Hunderte von anderen Artikeln auf Reduzierstücke gibt, und ich werde link einige meiner Favoriten am Ende.

Was ist ein Abschwächer?

Die erste und wichtigste Sache zu verstehen, über einen Druckminderer wird, es wird immer nur ein Wert. Die Aufgabe, einen Druckminderer zu reduzieren. Dass ein Wert kann eine Zahl, ein string, ein array oder ein Objekt, aber es wird immer nur einer sein. Reduzierstücke sind wirklich toll für eine Menge Dinge, aber Sie sind besonders nützlich für die Anwendung ein bisschen Logik, um eine Gruppe von Werten und endend mit einem anderen Ergebnis.

Das ist die andere Sache zu erwähnen: die Reduzierungen werden nicht, durch Ihre Natur, mutieren Ihre anfänglichen Wert; eher Sie wieder etwas anderes. Lassen Sie uns gehen über das erste Beispiel, damit Sie sehen können, was hier passiert. Das video unten erklärt:

Ihr browser unterstützt nicht das video-tag.

Es könnte hilfreich sein, um das video zu sehen, wie die progression Auftritt, aber hier ist der code, den wir suchen:

const nums = [1, 2, 3]
let Wert = 0

for (let i = 0; i < nums.length; i++) {
Wert += nums[i]
}

Wir haben unsere array (1, 2, 3) und der erste Wert jeder Zahl in dem array Hinzugefügt werden (0). Wir gehen durch die Menge der das array und fügen Sie Sie auf den ursprünglichen Wert.

Lassen Sie uns versuchen dies ein wenig anders:

const nums = [1, 2, 3]
const initialValue = 0

const reducer = function (acc, item) {
return acc + item
}

const Gesamt = nums.reduzieren(reducer, initialValue)

Jetzt haben wir das gleiche array, aber diesmal sind wir nicht mutiert, der erste Wert. Stattdessen haben wir ein initialValue, die nur verwendet werden, an den start. Als Nächstes können wir eine Funktion, die einen Akkumulator und ein Element. Der Akku ist der gesammelte Wert zurückgegeben, in dem letzten Aufruf, informiert die Funktion, was der nächste Wert Hinzugefügt werden sollen. In diesem Fall ist der Zusatz, man kann es wie einen Schneeball Rollen den Berg hinunter, frisst jeden Wert in seinem Weg, während es wächst in der Größe von jedem gegessen Wert.

Wir verwenden werde .verringern() auf die Funktion anwenden und starten Sie von diesem Anfangswert. Dies kann verkürzt werden mit einem Pfeil-Funktion:

const nums = [1, 2, 3]
const initialValue = 0

const reducer = (acc, item) => {
return acc + item
}

const Gesamt = nums.reduzieren(reducer, initialValue)

Und dann verkürzt einige mehr! Die implizite Rendite für den Sieg!

const nums = [1, 2, 3]
const initialValue = 0

const reducer = (acc, item) => acc + item

const Gesamt = nums.reduzieren(reducer, initialValue)

Jetzt können wir die Funktion anwenden genau dort, wo wir es nannten, und wir können auch plop, der Ausgangswert direkt dort!

const nums = [1, 2, 3]

const Gesamt = nums.reduce((acc, item) => acc + Artikel,

Ein Akkumulator kann eine einschüchternde Begriff, so können Sie denken, der es, wie der aktuelle Stand der Reihe, wie wir die Anwendung der Logik auf die callback – Aufrufe.

Der Call-Stack

Im Falle dass es nicht klar ist, was passiert, melden wir uns heraus, was Los ist, die für jede iteration. Die Reduzierung wird über eine callback-Funktion, die ausgeführt wird, für jedes Element im array. Im folgenden Film wird Ihnen helfen, um diese besser klar. Ich habe auch ein anderes array ([1, 3, 6]), da die Nummern gleich sein wie der index verwirrend sein könnte.

Finden Sie die Stift zeigen, acc, item, Rückkehr von Sarah Drasner (@sdras) auf CodePen.

Wenn wir dies ausführen, sehen wir diese Ausgabe in der Konsole:

“Acc”: 0, Item: 1, Rückgabewert: 1″
“Acc”: 1, Item: 3, Return-Wert: 4″
“Acc”: 4, Ziffer: 6, Return value: 10″

Hier ist eine weitere visuelle Aufschlüsselung:

Ihr browser unterstützt nicht das video-tag.

  1. Es zeigt sich, dass der Akku von unserem Anfangswert, 0
  2. Dann haben wir das erste Element ist die 1, also unsere Rückgabewert ist 1 (0 + 1 = 1)
  3. 1 wird der Akkumulator auf den nächsten Aufruf
  4. Jetzt haben wir 1 als Akkumulator und 3 ist das Element aince es weiter in das array.
  5. Der zurückgegebene Wert wird 4 (1 + 3 = 4)
  6. Das, wiederum, wird der Akkumulator und der nächste Punkt bei Aufruf 6
  7. Dass die Ergebnisse in 10 (4 + 6 = 10) und ist unser letzter Wert seit 6 ist die Letzte Zahl im array

Einfache Beispiele

Nun, wir haben das im Rahmen unserer Band, schauen wir uns einige gemeinsame und nützliche Dinge Reduzierstücke tun können.

Wie viele von X haben wir?

Lassen Sie uns sagen, Sie haben ein array von zahlen, und Sie wollen ein Objekt zurückgeben, dass Berichte, die die Anzahl, wie oft diese zahlen vorkommen im array. Beachten Sie, dass dies könnte gerade als leicht gelten für Streicher.

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

const result = nums.reduzieren((tally, amt) => {
tally[amt] ? tally[amt]++ : tally[amt] = 1
Rückkehr Aufzeichnung
}, {})

console.log(Ergebnis)

Finden Sie den Stift vereinfacht reduzieren von Sarah Drasner (@sdras) auf CodePen.

Warten Sie, was haben wir nur tun?

Zunächst, wir haben ein array und Objekt-wir setzen Ihre Inhalte in. In unserem reducer, Fragen wir: ist dieser Eintrag vorhanden??? Wenn ja, lassen Sie die Schrittweite. Wenn nicht, fügen Sie es und legen Sie es auf 1. Am Ende, bitte senden Sie die Aufzeichnung Anzahl der einzelnen Artikel. Dann laufen wir die senken-Funktion auf, übergeben sowohl in der Reduzierung und dem ersten Wert.

Nimm ein array und verwandeln Sie es in ein Objekt, das zeigt einige Bedingungen

Sagen wir, wir haben ein array, und wir wollen ein Objekt erstellen, das, basierend auf einer Reihe von Bedingungen. Reduzieren kann groß sein für diese! Hier wollen wir ein Objekt erstellen, aus jeder Instanz eine Zahl enthalten, die im array und zeigen Sie beide eine ungerade und sogar version dieser Reihe. Wenn die Nummer bereits gerade oder ungerade ist, dann ist das, was wir haben in das Objekt.

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

// wir stellen ein Objekt aus einer geraden und ungeraden
// Ausführung jeder Instanz eine Zahl
const result = nums.reduce((acc, item) => {
acc[item] = {
seltsam: Element % 2 ? Element : Element – 1,
auch: Element % 2 ? Element + 1 : item
}
return acc
}, {})

console.log(Ergebnis)

Finden Sie den Stift vereinfacht reduzieren von Sarah Drasner (@sdras) auf CodePen.

Dieses Schießen wird die folgende Ausgabe in der Konsole:

1:{ungerade: 1, gerade: 2}
3:{ungerade: 3: 4}
4:{ungerade: 3: 4}
5:{ungerade: 5, auch: 6}
6:{ungerade: 5, auch: 6}
82:{ungerade: 81, auch: 82}

OK, also was ist passiert?

Als wir gehen durch jedes Element in dem array, wir erstellen ein Anwesen für gerade und ungerade, und basierend auf einer inline-Zustand mit einem modulo-operator, werden wir dann entweder speichern Sie die Nummer oder ändern Sie Sie, indem Sie 1. Der modulo-operator ist wirklich gut für diese, denn es kann schnell prüfen, ob für gerade oder ungerade — wenn es teilbar durch zwei, ist es auch, wenn nicht, ist es seltsam.

Andere Ressourcen

Oben erwähnte ich andere Beiträge gibt, sind praktische Ressourcen, um mehr vertraut mit der Rolle der Reduzierstücke. Hier sind ein paar meiner Favoriten:

  • Die MDN-Dokumentation ist wunderbar. Im ernst, es ist einer Ihrer besten Beiträge, IMO. Sie beschreiben auch im detail, was passiert, wenn Sie nicht bieten einen ersten Wert, den wir nicht abdecken in diesem Beitrag.
  • Daniel Shiffman ist immer wieder erstaunlich, zu erklären, Dinge, die auf der Kodierung der Bahn.
  • Ein Tropfen von JavaScript macht einen guten job, auch.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!