Maison > interface Web > js tutoriel > Étude approfondie des paramètres Rest et des valeurs par défaut des paramètres​​dans les connaissances JavaScript_Basic

Étude approfondie des paramètres Rest et des valeurs par défaut des paramètres​​dans les connaissances JavaScript_Basic

WBOY
Libérer: 2016-05-16 15:48:34
original
1149 Les gens l'ont consulté

Cet article abordera deux fonctionnalités qui rendent les fonctions JavaScript plus expressives : les paramètres de repos et les valeurs par défaut des paramètres.
Paramètres de repos

Habituellement, nous devons créer une fonction avec des paramètres variables. Les paramètres variables signifient que la fonction peut accepter n'importe quel nombre de paramètres. Par exemple, String.prototype.concat peut accepter n'importe quel nombre de chaînes comme arguments. En utilisant les paramètres Rest, ES6 nous offre une nouvelle façon de créer des fonctions variadiques.

Implémentons un exemple de fonction containAll pour vérifier si une chaîne contient certaines sous-chaînes. Par exemple, containAll("banana", "b", "nan") renverra true et containAll("banana", "c", "nan") renverra false.

Ce qui suit est la mise en œuvre traditionnelle :

function containsAll(haystack) {
 for (var i = 1; i < arguments.length; i++) {
  var needle = arguments[i];
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}
 
function containsAll(haystack) {
 for (var i = 1; i < arguments.length; i++) {
  var needle = arguments[i];
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}

Copier après la connexion

Cette implémentation utilise l'objet arguments, qui est un objet de type tableau qui contient la liste de paramètres réelle lorsque la fonction est appelée. Ce code correspond exactement à ce que nous souhaitons, mais sa lisibilité n’est pas optimale. La fonction n'a qu'un seul paramètre formel de botte de foin, il est donc impossible de savoir d'un coup d'œil que la fonction nécessite plusieurs paramètres. Lors du parcours des arguments, vous devez prêter une attention particulière à ce que l'indice de départ du parcours soit 1 au lieu du 0 commun. car arguments[0] est la fonction Le paramètre formel botte de foin une fois défini. Si nous voulons ajouter des paramètres avant ou après le paramètre haystack, nous devons mettre à jour la boucle interne. Les paramètres Rest résolvent ces problèmes. Voici comment utiliser les paramètres Rest :

function containsAll(haystack, ...needles) {
 for (var needle of needles) {
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}
 
function containsAll(haystack, ...needles) {
 for (var needle of needles) {
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}
Copier après la connexion

Les deux implémentations ci-dessus répondent à nos besoins, mais cette dernière contient une syntaxe spéciale ...needles. Jetons un coup d'œil aux détails lors de l'appel de containAll("banana", "b", "nan") Le paramètre haystack sera rempli avec le premier argument de la fonction comme d'habitude, avec la valeur "banana" et les points de suspension. devant les aiguilles Indique qu'il s'agit d'un paramètre Rest, tous les paramètres réels restants seront placés dans un tableau et le tableau sera affecté à l'itération des besoins. Dans cet appel, la valeur des besoins est ["b", "nan"]. Ensuite, la fonction normale est exécutée.

Seule la dernière fonction de la fonction peut être utilisée comme paramètre Rest. Lorsque la fonction est appelée, les paramètres avant le paramètre Rest seront remplis normalement, et les autres paramètres seront mis dans un tableau, et le tableau. sera utilisé comme Rest La valeur du paramètre S'il n'y a plus de paramètres, alors la valeur du paramètre Rest est un tableau vide [].
Valeur par défaut du paramètre

Habituellement, lors de l'appel d'une fonction, l'appelant n'a pas besoin de transmettre tous les paramètres possibles, et les paramètres qui ne sont pas transmis nécessitent une valeur par défaut raisonnable. JavaScript a une valeur par défaut fixe de non défini pour les paramètres qui ne sont pas transmis. Dans ES6, une nouvelle façon de spécifier des valeurs par défaut pour des paramètres arbitraires a été introduite.

Regardez l'exemple ci-dessous :

function animalSentence(animals2="tigers", animals3="bears") {
  return `Lions and ${animals2} and ${animals3}! Oh my!`;
}
 
function animalSentence(animals2="tigers", animals3="bears") {
  return `Lions and ${animals2} and ${animals3}! Oh my!`;
}
Copier après la connexion

After = pour chaque paramètre, il existe une expression qui spécifie la valeur par défaut lorsque le paramètre n'est pas passé. Ainsi, animalSentence() renvoie "Lions, tigres et ours ! Oh mon Dieu !", animalSentence("éléphants") renvoie "Lions, éléphants et ours ! Oh mon Dieu !", animalSentence("éléphants", "baleines") renvoie "Lions et les éléphants et les baleines ! Oh mon Dieu !".

Quelques détails à noter sur les valeurs par défaut des paramètres :

Contrairement à Python, les expressions pour les valeurs par défaut des paramètres sont évaluées de gauche à droite lorsque la fonction est appelée, ce qui signifie que l'expression peut utiliser des paramètres qui ont été renseignés précédemment. Par exemple, nous pourrions rendre la fonction ci-dessus un peu plus intéressante :

function animalSentenceFancy(animals2="tigers",
  animals3=(animals2 == "bears") &#63; "sealions" : "bears")
{
 return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

 
function animalSentenceFancy(animals2="tigers",
  animals3=(animals2 == "bears") &#63; "sealions" : "bears")
{
 return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

Copier après la connexion

Ensuite, animalSentenceFancy("bears") renverra "Lions, ours et phoques. Oh mon Dieu !".

Passer undefined équivaut à ne pas passer le paramètre. Par conséquent, animalSentence(undefined, "licornes") renverra "Lions, tigres et licornes ! Oh mon Dieu !".
Si aucune valeur par défaut n'est spécifiée pour un paramètre, la valeur par défaut du paramètre est indéfinie, donc

function myFunc(a=42, b) {...}
 
function myFunc(a=42, b) {...}

Copier après la connexion

équivaut à

function myFunc(a=42, b=undefined) {...}
 
function myFunc(a=42, b=undefined) {...}

Copier après la connexion

Rejeter les arguments

Avec les paramètres Rest et les valeurs par défaut des paramètres, nous pouvons abandonner complètement l'objet arguments, rendant notre code plus lisible. De plus, l'objet arguments ajoute à la difficulté d'optimiser JavaScript.

J'espère que les deux nouvelles fonctionnalités ci-dessus pourront remplacer complètement les arguments. Dans un premier temps, évitez d'utiliser des objets arguments lors de l'utilisation des paramètres Rest ou des valeurs par défaut des paramètres. Si l'objet arguments ne sera pas supprimé immédiatement, ou jamais, il est également préférable d'éviter d'utiliser les paramètres Rest ou les paramètres par défaut. objet arguments.
Compatibilité

Firefox 15 ou supérieur prend déjà en charge ces deux nouvelles fonctionnalités. Cependant, au-delà de cela, il n’existe aucun autre support de navigateur. Récemment, l'environnement expérimental de la V8 a ajouté la prise en charge des paramètres Rest, et il existe un problème avec les valeurs par défaut des paramètres. JSC a également soulevé des problèmes avec les paramètres Rest et les valeurs par défaut des paramètres.

Les deux compilateurs, Babel et Traceur, prennent déjà en charge les valeurs par défaut des paramètres, vous pouvez donc les utiliser avec audace.
Conclusion

Bien que techniquement ces deux nouvelles fonctionnalités n'introduisent pas de nouveau comportement aux fonctions, elles peuvent rendre certaines déclarations de fonctions plus expressives et plus lisibles.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal