Ausführliche Erläuterung der Verwendung von Map- und Reduce-Methoden in der funktionalen JavaScript-Programmierung

Bei all dem Gerede über Workflows, die die erstaunlichen neuen Funktionen von ECMAScript 6 unterstützen, vergisst man leicht, dass ECMAScript 5 uns einige großartige Tools und Methoden zur Unterstützung der funktionalen Programmierung in JavaScript gebracht hat, die wir jetzt verwenden können. Die wichtigsten dieser Funktionsmethoden sind die Map()-Methode und die Reduce()-Methode, die auf JavaScript-Array-Objekten basieren.

Wenn Sie die Methoden „map()“ und „reduc()“ noch nicht verwendet haben, ist es jetzt an der Zeit, sie zu verwenden. Die meisten heutigen JavaScript-Entwicklungsplattformen unterstützen ECMAScript5 nativ. Die Verwendung der Map-Methode und der Reduce-Methode kann Ihren Code prägnanter, leichter lesbar und einfacher zu warten machen und Sie auf den Weg zu einer einfacheren funktionalen Entwicklung bringen.

Leistung: ein Vorbehalt

Wenn es in Wirklichkeit darum geht, die Leistung zu verbessern, müssen die Lesbarkeit und die Wartbarkeit Ihres Codes natürlich im Gleichgewicht sein. Heutige Browser verwenden umständlichere traditionelle Techniken wie for-Schleifen, um eine effizientere Leistung zu erzielen.

Die Art und Weise, wie ich Code schreibe, besteht normalerweise darin, beim Schreiben von Code die Lesbarkeit und Wartbarkeit an erster Stelle zu setzen. Wenn ich dann feststelle, dass es ein Problem mit der Ausführung des Codes in realen Situationen gibt, werde ich die Leistung verbessern und optimieren der Code. Es ist schwierig, Code vorzeitig zu optimieren, und diese Optimierung macht es später schwierig, Code zu schreiben.

Es lohnt sich zu bedenken, dass die Verwendung von Methoden wie „map()“ und „reduc()“ in der JavaScript-Engine die Leistung des Codes besser verbessern kann, anstatt zu erwarten, dass der Browser in Zukunft Optimierungen vornimmt, um die Leistung zu verbessern . Sofern ich nicht an eine Leistungsgrenze stoße, habe ich lieber Spaß am Codeschreiben, bin aber immer bereit, Anpassungen vorzunehmen, um die Leistung meines Codes bei Bedarf aufrechtzuerhalten, auch wenn mein Code dadurch weniger attraktiv wird.

Verwendung der Map-Methode

Mapping ist eine grundlegende funktionale Programmiertechnik, die für alle Elemente in einem Array funktioniert und andere Arrays mit derselben Länge und demselben transformierten Inhalt erstellt.

Um das, was ich gerade gesagt habe, konkreter zu machen, habe ich mir ein einfaches Anwendungsbeispiel ausgedacht. Stellen Sie sich zum Beispiel vor, Sie haben ein Array, das Zeichendaten enthält, und Sie müssen diese in ein anderes Array konvertieren, das die Länge der einzelnen Zeichendaten enthält. (Ich weiß, das ist kein kompliziertes Hexenwerk, es ist etwas, was Sie oft tun müssen, wenn Sie komplexe Anwendungen schreiben, aber wenn Sie verstehen, wie es an einem einfachen Beispiel wie diesem funktioniert, können Sie es leichter verwenden. In diesem Fall können Sie echte hinzufügen Datenwerte in Ihrem Code hinzufügen).

Vielleicht wissen Sie, wie Sie eine for-Schleife für ein Array verwenden, wie ich gerade beschrieben habe. Es könnte so aussehen:

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++){
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

Alles, was wir tun müssen, ist eine Handvoll Variablen zu definieren: ein Array mit dem Namen „Tiere“, das die Zeichendaten enthält, die wir benötigen, und ein leeres Array mit dem Namen „Längen“ in der Zukunft wird verwendet, um die Länge der Datenausgabe unseres Operationsarrays zu enthalten, und eine Variable namens „item“ wird verwendet, um die Arrayelemente, die wir für die Operation jedes Mal benötigen, wenn die Schleife das Array durchläuft, vorübergehend zu speichern. Wir definieren eine for-Schleife, die eine interne Variable und eine Schleifenvariable hat, um unsere for-Schleife zu initialisieren. Anschließend durchlaufen wir jedes Element, bis die Länge des iterierten Arrays gleich der Länge des Animals-Arrays ist. Bei jedem Schleifendurchlauf berechnen wir die Zeichenlänge des Iterationselements und speichern sie im Längen-Array.

Hinweis: Was besprochen werden muss, ist, dass wir den obigen Code prägnanter schreiben können, ohne die Elementvariable, und die Länge von Tieren [Anzahl] direkt in das Längen-Array einfügen können, sodass dies nicht erforderlich ist ein Zwischenkonvertierungsprozess. Dadurch können wir ein wenig Codeplatz sparen, aber es macht unseren Code auch etwas schwieriger zu lesen, selbst für dieses sehr einfache Beispiel. Um den Code effizienter und unkomplizierter zu gestalten, könnten wir unser Längen-Array mit der bekannten Länge des Tier-Arrays über „new Array(animals.length)“ initialisieren und es dann indizieren, anstatt die Push-Methode zum Einfügen der Optionsdatenlänge zu verwenden. Es hängt davon ab, wie Sie den Code in der Realität verwenden möchten.

In dieser Implementierung liegen keine technischen Fehler vor. Es funktioniert mit jeder Standard-JavaScript-Engine und erledigt seine Aufgabe einwandfrei. Sobald Sie wissen, wie man die Methode „map()“ verwendet, kann die Implementierung auf diese Weise umständlich erscheinen.

Lassen Sie mich Ihnen zeigen, wie der obige Code mit der Methode map() implementiert wird:

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

In diesem kleinen Beispiel erstellen wir zunächst erneut ein Array für unseren Tiertyp. Erstellen Sie ein Tier Variable. Die einzige andere Variable, die wir jedoch deklarieren müssen, ist die Variable lengths, und wir weisen ihren Wert direkt dem Ergebnis der Zuordnung einer anonymen Inline-Funktion zu jedem Element des Arrays Animals zu.

Die anonyme Funktion führt eine Operation für jedes Tier durch und gibt dann die Zeichenlänge des Tieres zurück. Das Ergebnis ist, dass lengths zu einem Array mit der gleichen Länge wie das ursprüngliche Animals-Array wird und dieses Array die Länge jedes Zeichens enthält.

这种方式需要注意的一些事情。首先，它比最初编写的代码更简洁。其次，我们仅需要申明更少的变量。更少的变量意味着在全局命名空间里杂音更少，并且如果相同代码的其他部分使用了相同的变量名就会减少碰撞的机会。最后，我们的变量不可能从头到脚都会改变它们的值。随着你深入函数式编程，你将会欣赏使用常量和不变的变量的优雅的能力，现在开始使用并不算早。

这种实现方式的另一个优点是，我们可以通过在整个代码编写过程中通过将代码放进一个个命名的函数里而简化代码而有机会提升自己编写代码的多功能性。匿名的内联函数看着有些乱，并且使得重复使用代码更困难。我们可以定义一个命名为getLength()的函数，并且像下面的方式来使用:

var animals = ["cat","dog","fish"];
function getLength(word) {
  return word.length;
}
console.log(animals.map(getLength)); //[3, 3, 4]

看看上面的代码看上去多简洁啊?只是把你处理数据的部分映射一下就使你的代码达到一个全新的功能水平。

什么是函子?

有趣的一点是，通过在数组对象里添加映射，ECMAScript5把基本的数组类型变成了一个完整的函子，这使得函数式编程对我们来说更加的容易。

根据传统的函数编程定义，一个函子需要满足三个条件:

• 1.它保存着一组值。

• 2.它实现了一个map函数来操作每一个元素。

• 3.它的map函数返回一个具有同样大小的函子。

这个将会在你下一次的JavaScript聚会上被翻来覆去的讨论。

如果你想了解更多关于函子的信息,你可以看看Mattias Petter Johansson录制的关于这方面的视频。

使用Reduce方法

Reduce()方法在ECMAScript5里也是新增的，而且它和map()方法很类似，除了不产生其他的函子，reduce()方法产生的一个结果是它可能是任何类型。例如，设想一下，如果你想得到我们animals数组里的所有字符长度都分别作为一个数字然后相加的结果。你也许会像下面这样做:

var animals = ["cat","dog","fish"];
var total = 0;
var item;
for (var count = 0, loops = animals.length; count < loops; count++){
  item = animals[count];
  total += item.length;
}
console.log(total); //10

在我们定义我们的初始数组之后，我们为运行总计定义了一个total变量，并把它的初始值设为0。我们也定义一个变量item来保存每一次for循环迭代animals数组的迭代值，并且再定义一个count变量作为一个循环计数器，并且用这两个变量来初始化我们的迭代。然后我们运行for循环来迭代animals数组里的所有字符数据，每次迭代都会把迭代的结果保存到item变量。最终我们把每一次迭代到的item的长度加到我们的total变量里就可以了。

这种实现方式也没有任何的技术错误。我们从定义一个数组开始，然后得到一个结果值就结束了。但是如果我们使用了reduce()方法，我们可以使上面的代码更加简单明了:

var animals = ["cat","dog","fish"];
var total = animals.reduce(function(sum, word) {
  return sum + word.length;
}, 0);
console.log(total);

这里发生变化的是，我们定义了一个名为total的新变量，并且把执行animals数组对象的reduce方法的返回值分配给它，在reduce方法里有两个参数：一个匿名内联function方法，和初始化total的值为0。对于数组中的每一个项reduce()方法都会执行，它在数组的那一项上执行这个function函数，并且把它添加到运行总计，然后再进行下一次迭代。这里我们的内联function方法有两个参数：运行总计，和当前程序正在处理的从数组中获取的字符。这个function函数把当前total的值添加到当前word的长度上。

注意的是：我们设置reduce()方法的第二个参数值为0，这样做确定了total变量包含的是一个数值。如果没有第二个参数reduce方法仍然可以执行，但是执行的结果将不是你期望的那样。(你可以试试并且可以看看当运行总计结束后你是否能推测出JavaScript所使用的编程逻辑。)

那看上去似乎比它需要做的更有一点复杂，因为当调用reduce()方法时需要在一个内联function里综合的定义。我们再那么做一次，但是首先让我们定义一个命名的function函数，而不再使用匿名内联函数:

var animals = ["cat","dog","fish"];
var addLength = function(sum, word) {
  return sum + word.length;
};
var total = animals.reduce(addLength, 0);
console.log(total);

这个代码稍微有点长，但是代码有点长并不总是坏事。这样写你应该看到它使代码更加清晰些，只是在reduce()方法里发生了一点变化。

该程序里reduce()方法有两个参数：一个function函数，用来调用数组里的每一个元素，和一个为total变量设置的运行总计初始值。在这个代码示例中，我们放入了一个名为addLength的新function和为运行总计变量赋初始值为0。在上一行代码中，我们定义了一个名为addLength的function函数，这个函数也需要两个参数：一个当前和一个要处理的字符串。

Fazit

Die häufige Verwendung der Map()-Methode und der Reduce()-Methode bietet Möglichkeiten, Ihren Code einfacher, vielseitiger und wartbarer zu machen. Sie ebnen Ihnen auch den Weg für die Verwendung funktionalerer JavaScript-Techniken.

Die Methode map() und die Methode Reduce() sind nur zwei der neuen Methoden, die ECMAScript5 hinzugefügt wurden. Wenn Sie sie heute verwenden, werden Sie wissen, dass die Verbesserungen der Codequalität und der Entwicklerzufriedenheit die vorübergehenden Auswirkungen auf die Leistung überwiegen. Bevor Sie beurteilen, ob die Methoden „map()“ und „reduce()“ für Ihre Anwendung geeignet sind, versuchen Sie, mithilfe der Funktionsfunktionstechnologie deren Auswirkungen in Ihrer realen Welt zu entwickeln und zu messen, und beurteilen Sie dann, ob Sie sie verwenden sollten.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Map- und Reduce-Methoden in der funktionalen JavaScript-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!