Comment utiliser les paramètres de fonction facultatifs en JavaScript

Dans ce court article, nous verrons comment utiliser les paramètres de fonction facultatifs en JavaScript.

JavaScript est l'une des technologies de base d'Internet. Il est utilisé par la plupart des sites Web et pris en charge par tous les navigateurs Web modernes sans avoir besoin de plugins. Dans cette série, nous discuterons de différents trucs et astuces qui vous aideront dans votre développement JavaScript quotidien.

Dans le codage JavaScript, vous devez souvent rendre les paramètres de fonction facultatifs. Lorsque vous utilisez des fonctions JavaScript, il existe deux types de paramètres : les paramètres obligatoires et les paramètres facultatifs. Dans le cas de paramètres obligatoires, vous devez les transmettre sinon JavaScript générera une erreur. Cependant, pour les paramètres facultatifs, si vous ne les transmettez pas, ils seront initialisés aux valeurs par défaut.

Aujourd'hui, nous aborderons les bases des paramètres de fonction facultatifs en JavaScript et comment les utiliser.

Comment utiliser les paramètres de fonction facultatifs dans ES5 et les versions précédentes

Dans cette section, nous discuterons d'une solution qui fonctionne même sur les navigateurs plus anciens. Ceci était fréquemment utilisé jusqu'à l'ère JavaScript ES5, lorsqu'il n'existait pas de prise en charge intégrée pour rendre les paramètres de fonction facultatifs.

Comprenons comment cela fonctionne avec l'exemple suivant.

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/’;

  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

Dans l'exemple ci-dessus, le paramètre getFullImagePath 函数采用两个参数：imagePath 和 imageBaseUrl。我们希望将第二个 imageBaseUrl est rendu facultatif, vous pouvez donc ignorer sa transmission si vous souhaitez utiliser la valeur du paramètre par défaut. Pour le rendre facultatif, nous utilisons l'instruction suivante.

imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';

En gros, nous vérifions la valeur imageBaseUrl 变量是否已定义。如果它被定义并且计算结果为 TRUE，我们假设第二个参数可用，并且我们将使用它。另一方面，如果 imageBaseUrl 参数未定义或计算结果为 FALSE，我们将使用 https://code.tutsplus.com/ comme valeur par défaut pour ce paramètre. Il est important que les paramètres facultatifs apparaissent toujours à la fin de la liste des paramètres.

Veuillez noter que cette méthode ne fonctionnera pas avec des valeurs numériques car elle remplacera la valeur 0。同样，如果您希望能够将 0 或 null Si vous la transmettez dans la fonction, vous devrez vérifier explicitement si l'argument n'est pas défini.

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl;
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

Dans ce cas, nous vérifions explicitement imageBaseUrl 参数的值是否为 undefined pour décider s'il s'agit d'un paramètre facultatif. Il s'agit d'un moyen plus simple de déterminer si un paramètre est facultatif.

Voici comment rendre les paramètres de fonction facultatifs dans les navigateurs qui ne prennent pas en charge les versions ES6+. Dans la section suivante, nous en discuterons dans le contexte des navigateurs modernes.

Comment utiliser les paramètres de fonction facultatifs dans JavaScript ES6

Dans cette section, nous discuterons des méthodes qui peuvent être utilisées dans les navigateurs modernes prenant en charge la version ES6 de JavaScript. Comprenons comment cela fonctionne avec l'exemple suivant. Nous allons réécrire l'exemple évoqué dans la section précédente avec une version ES6.

function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') {
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

Si vous avez utilisé d'autres langages de programmation, vous connaissez peut-être la méthode ci-dessus pour définir les paramètres de fonction facultatifs. Dans ce cas, les paramètres facultatifs se voient attribuer des valeurs par défaut dans l'instruction de déclaration de fonction elle-même.

De plus, vous pouvez avoir plusieurs paramètres facultatifs, comme indiqué dans l'extrait de code suivant, à condition de les définir à la fin de la liste des paramètres.

function foo(a, b=0, c=10) {
  //...
}

Comme vous pouvez le constater, la syntaxe JavaScript ES6 est plus simple et plus facile à écrire que l'ancienne méthode.

Conclusion

Aujourd'hui, nous avons expliqué comment utiliser les paramètres de fonction facultatifs en JavaScript, ainsi que quelques exemples pratiques.

Voici une comparaison des différentes manières d'encoder les paramètres de fonction facultatifs en JavaScript :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!