recherche

Maison >interface Web >js tutoriel >Comprendre la carte au lieu de la boucle dans les compétences javascript_javascript

Comprendre la carte au lieu de la boucle dans les compétences javascript_javascript

WBOY
WBOYoriginal
2016-05-16 15:13:251591parcourir

本文介绍了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);

Il ne fait aucun doute que cette façon d'écrire est plus facile à comprendre, et c'est l'essence de la programmation : en disant vos idées à d'autres personnes, cette personne peut être d'autres programmeurs ou vous dans le futur. Le code ci-dessus indique "les données valides sont la liste de boîtes aux lettres mappée à l'aide de la fonction de conversion en minuscules".

Utiliser des moyens avancés comme celui-ci pour communiquer des idées est un principe fondamental de la programmation fonctionnelle, et c'est exactement ce que nous faisons. Créez des programmes complexes en combinant des parties simples avec une seule fonction facile à comprendre.

Cette façon d’écrire présente quelques avantages supplémentaires. Le tableau suivant n'est pas dans un ordre particulier :

  • La fonction de conversion en minuscules fournit l'interface la plus simple : entrée de valeur unique, sortie de valeur unique.
  • Il n'y a pas beaucoup d'endroits qui peuvent être modifiés, donc la logique est plus facile à comprendre, plus facile à tester et moins sujette aux erreurs.
  • La logique est simple, elle est donc facile à réutiliser et peut être combinée avec d'autres fonctions pour créer des fonctions plus complexes.
  • Si vous suivez cette voie de programmation déclarative, la quantité de code sera considérablement réduite.

Bien qu'il soit courant de passer une fonction anonyme comme premier paramètre de map, il est recommandé d'extraire la fonction et de la nommer de manière appropriée. Cela peut vous aider à enregistrer l'intention d'écrire cette fonction, afin que les autres développeurs puissent comprendre la fonction via le nom de la fonction sans avoir à analyser le code.

Prise en charge du navigateur

Le standard ECMAScript 5 définit la méthode native map(), la compatibilité du navigateur est donc meilleure. Si vous souhaitez l'utiliser dans les versions antérieures à IE 9, vous devez introduire un polyfill ou utiliser des bibliothèques telles que Underscore et Lodash.

Performances

Dans la plupart des cas, il n'y a pas d'écart de performances évident entre les fonctions de mappage et les boucles for dans le codage réel. La boucle for est légèrement plus rapide, mais si vous n'écrivez pas de moteur graphique ou physique, il n'est pas nécessaire de prendre en compte cette différence. Bien sûr, même ainsi, à moins que vous ne soyez sûr que ces améliorations de performances vous aideront, il est logique de le faire. optimiser de cette façon. Pas grand.

Résumé

Décomposer la logique en méthodes à fonction unique et les appliquer aux structures de données rendra votre code plus précis, plus robuste et plus facile à comprendre. Notre philosophie est d'être aussi générale que possible, ce qui facilite la réutilisation du code. Apprendre cette façon de penser vous aidera non seulement à améliorer vos compétences Javascript, mais cela peut également se refléter dans la plupart des autres langages de programmation, tels que Ruby et Haskell.

Donc, la prochaine fois que vous êtes sur le point d’utiliser une boucle for, détrompez-vous. N'oubliez pas que les données que vous souhaitez traiter ne sont pas nécessairement un tableau ordinaire. Vous pouvez traiter l'objet, extraire sa valeur, utiliser une fonction pour le mapper et enfin trier le tableau résultat.

Ce qui précède est une brève introduction sur la carte au lieu de la boucle. J'espère que cela sera utile à l'apprentissage de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Compréhension flexible de ce pointeur dans les compétences JavaScript_javascriptArticle suivant：Compréhension flexible de ce pointeur dans les compétences JavaScript_javascript

Articles Liés

Voir plus