Heim > Artikel > Web-Frontend > Verstehen Sie Map statt Schleife in Javascript_Javascript-Kenntnissen

Verstehen Sie Map statt Schleife in Javascript_Javascript-Kenntnissen

WBOYOriginal: 2016-05-16 15:13:251544Durchsuche

本文介绍了map给我们的js编程带来的好处及便利：
1.Map能干什么
map可以实现for循环的功能：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
</head> 
<body> 
 
<script> 
 
 var arr = ['val1', 'val2', 'val3']; 
 
 for(var i = 0; i < arr.length; i++){ 
  console.log(arr[i]); 
  console.log(i); 
  console.log(arr); 
 } 
 arr.map(function(val, index, array) { 
  console.log(val); 
  console.log(index); 
  console.log(array); 
 }); 
 
  
  
 
</script> 
 
 
</body> 
</html>

这里的好处是，我们可以随意在map里面写函数，这样的话代码可读性会大大提高，如下：

 function output(val, index, array) { 
  console.log(val); 
  console.log(index); 
  console.log(array); 
 } 
 
 
 arr.map(output);

2.Map的兼容性
ECMAScript 5 标准定义了原生的 map() 方法，所以浏览器兼容性较好。如果你想在 IE 9 之前的版本中使用，就需要引入一个 polyfill 或使用 Underscore、Lodash 之类的库了。
3.map和for哪个快
当然，使用for会比map快点，但是差别不是很大，如果对性能要求没有到极致的地步，这点性能差别可以忽略。

如今，在程序员学习过程中基本都会发现一个叫 map 的函数。在发现 map 函数之前，你可能都会使用 for 循环来处理需要多次执行某一行为的场景。一般情况下，在这个循环过程中都会伴随一些数据变换。

命令式

例如，你团队的销售人员交给你一个很长的电邮地址列表。这些邮箱地址获取的时候并没有经过很好地校验，以至于有些是大写的，有些是小写的，还有一些是大小写混合的。使用 for 循环进行数据处理的代码如下：

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function getEmailsInLowercase(emails) {
 var lowercaseEmails = [];
 
 for (var i = 0; i &lt; emails.length; i++) {
  lowercaseEmails.push(emails[i].toLowerCase());
 }
 
 return lowercaseEmails;
}
 
var validData = getEmailsInLowercase(mixedEmails);

这样的做法是有效的，但却把一个实际上简单常见的操作变得复杂。使用 for 循环的函数牵扯了很多不必要的细节。一些痛点如下：

需要让程序创建一个临时列表来存储复制的邮件地址值。
需要让程序先计算列表的长度，以此为次数访问一遍列表。
需要让程序创建一个计数器用来记录当前访问的位置。
需要告诉程序计数的方向，但顺序在这里并不重要。

这是命令式的编程方法。我们似乎在口述给电脑该怎么做这件事。

困惑

为了使之前的代码更加清晰整洁，我们改用 map 函数。在任何 map 函数的说明文档中，我们都会看到诸如 “array”、“each”、“index”之类的词。这表明，我们可以把 map 当做不那么“隆重”的 for 循环使用，事实上也是可行的。现在来修改一下之前的代码：

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function getEmailsInLowercase(emails) {
 var lowercaseEmails = [];
 
 emails.map(function(email) {
  lowercaseEmails.push(email.toLowerCase());
 });
 
 return lowercaseEmails;
}
 
var validData = getEmailsInLowercase(mixedEmails);

这样写不仅能用，而且代码比使用 for 循环更加清楚。除了代码量更少，我们也不用再告诉程序去记录索引和遍历列表的方向了。

然而，这还不够好。这样写还是命令式的编程。我们还是指挥的太多。实际上我们牵涉了很多不必要的细节，似乎都在领着程序的手走每一步。

声明式

我们需要改变我们关于数据变换的思考方式。我们不需要想着：“电脑啊，我需要你取出列表中第一个元素，然后把它转换成小写，再存储到另一个列表中，最后返回这个列表”。相反，我们应该这样想：“电脑，我这有一个混合了大小写的邮件地址列表，而我需要一个全是小写的邮件地址列表，这是一个能够进行小写转换的函数”。

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function downcase(str) {
 return str.toLowerCase();
}
 
var validData = mixedEmails.map(downcase);

Es besteht kein Zweifel, dass diese Schreibweise leichter zu verstehen ist, und das ist die Essenz des Programmierens: Wenn Sie anderen Menschen Ihre Ideen erzählen, kann diese Person in Zukunft ein anderer Programmierer oder Sie selbst sein. Der obige Code besagt: „Gültige Daten sind die Postfachliste, die mithilfe der Kleinbuchstaben-Konvertierungsfunktion zugeordnet wird.“

Die Verwendung fortschrittlicher Methoden wie dieser zur Kommunikation von Ideen ist ein Kernprinzip der funktionalen Programmierung, und genau das tun wir. Erstellen Sie komplexe Programme, indem Sie einfache Teile mit einer einzigen Funktion kombinieren, die leicht zu verstehen ist.

Diese Schreibweise hat einige zusätzliche Vorteile. Die folgende Tabelle hat keine bestimmte Reihenfolge:

Die Kleinbuchstaben-Konvertierungsfunktion bietet die einfachste Schnittstelle: Einzelwerteingabe, Einzelwertausgabe.
Es gibt nicht viele Stellen, die geändert werden können, daher ist die Logik leichter zu verstehen, einfacher zu testen und weniger fehleranfällig.
Die Logik ist einfach, sodass sie leicht wiederverwendet werden kann und mit anderen Funktionen kombiniert werden kann, um komplexere Funktionen zu erstellen.
Wenn Sie dieser deklarativen Programmierroute folgen, wird die Codemenge erheblich reduziert.

Obwohl es üblich ist, eine anonyme Funktion an den ersten Parameter von Map zu übergeben, wird empfohlen, die Funktion zu extrahieren und sie entsprechend zu benennen. Dies kann Ihnen dabei helfen, die Absicht des Schreibens dieser Funktion aufzuzeichnen, sodass andere Entwickler die Funktion anhand des Funktionsnamens verstehen können, ohne den Code analysieren zu müssen.

Browser-Unterstützung

Der ECMAScript 5-Standard definiert die native map()-Methode, sodass die Browserkompatibilität besser ist. Wenn Sie es in Versionen vor IE 9 verwenden möchten, müssen Sie eine Polyfüllung einführen oder eine Bibliothek wie Underscore oder Lodash verwenden.

Leistung

In den meisten Fällen gibt es keine offensichtliche Leistungslücke zwischen Kartenfunktionen und For-Schleifen in der tatsächlichen Codierung. Die for-Schleife ist etwas schneller, aber wenn Sie keine Grafik- oder Physik-Engine schreiben, besteht kein Grund, diesen Unterschied zu berücksichtigen, es sei denn, Sie sind sicher, dass Ihnen diese Leistungsverbesserungen helfen auf diese Weise optimieren.

Zusammenfassung

Durch die Aufteilung der Logik in Einzelfunktionsmethoden und deren Anwendung auf Datenstrukturen wird Ihr Code genauer, robuster und leichter verständlich. Unsere Philosophie besteht darin, so allgemein wie möglich zu sein, was die Wiederverwendung von Code erleichtert. Das Erlernen dieser Denkweise wird Ihnen nicht nur dabei helfen, Ihre Javascript-Kenntnisse zu verbessern, sondern sie lässt sich auch in den meisten anderen Programmiersprachen wie Ruby und Haskell widerspiegeln.

Wenn Sie also das nächste Mal eine for-Schleife verwenden, denken Sie noch einmal darüber nach. Denken Sie daran, dass die Daten, die Sie verarbeiten möchten, nicht unbedingt ein gewöhnliches Array sind. Sie können das Objekt verarbeiten, seinen Wert herausnehmen, ihn mit einer Funktion zuordnen und schließlich das Ergebnisarray sortieren.

Das Obige ist eine kurze Einführung zum Thema Karte statt Schleife. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Flexibles Verständnis dieses Zeigers in JavaScript_Javascript-KenntnissenNächster Artikel：Flexibles Verständnis dieses Zeigers in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen