Nettoyer le code avec les paramètres par défaut ES6 et les raccourcis de propriété

Points de base

• ES6 Les paramètres par défaut permettent à la valeur par défaut d'être initialisé pour les fonctions et sont utilisés lorsque les paramètres sont omis ou non définis. Cette fonctionnalité simplifie le code et la rend plus concise et plus facile à lire car elle réduit le besoin d'instructions IF et autres vérifications.
• L'abréviation de la propriété ES6 fournit un moyen de rendre le code plus concis et plus facile à lire, en particulier lorsqu'il s'agit de grands objets de configuration. Sans écrire une affectation d'attribut complète, vous pouvez attribuer des valeurs aux attributs avec le même nom que leur variable à l'aide de l'abréviation.
• Les paramètres par défaut et les abréviations d'attribut dans ES6 peuvent rendre la méthode plus ordonnée et, dans certains cas, plus courte. Ils peuvent aider les développeurs à se concentrer davantage sur les utilisations pratiques de la méthode sans être distrait par de nombreuses préparations par défaut.
• Bien que les abréviations des attributs soient plus une fonction d'apparence, ils peuvent augmenter la productivité en réduisant le temps passé à écrire des variables, à configurer des objets et des mots clés de fonction. Ils peuvent également être appliqués aux définitions de méthode d'utilisation dans des objets pour obtenir du code plus propre.

La création de méthodes signifie également écrire des API, que ce soit pour vous-même, pour d'autres développeurs de votre équipe ou pour d'autres développeurs utilisant votre projet. Selon la taille, la complexité et le but de la fonction, vous devez considérer les paramètres par défaut et l'API d'entrée / sortie. Les paramètres de fonction par défaut et l'abréviation d'attribut sont deux caractéristiques pratiques d'ES6 qui peuvent vous aider à écrire des API.

ES6 Paramètres par défaut

Prévoyons rapidement les connaissances, puis regardons la grammaire. Les paramètres par défaut nous permettent d'initialiser les valeurs par défaut de la fonction. Utilisez la valeur par défaut lorsque le paramètre est omis ou non défini - cela signifie que NULL est une valeur valide. L'argument par défaut peut être quelque chose d'un nombre à une autre fonction.

<code class="language-javascript">// 基本语法
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

// 默认参数也适用于后面的默认参数
function foo(num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]</code>

un exemple pratique

Regardons une fonction de base et démontrons comment les paramètres par défaut peuvent accélérer votre développement et rendre votre code mieux organisé. Notre exemple de méthode est appelé createElement (). Il accepte certains paramètres de configuration et renvoie un élément HTML. L'API ressemble à ceci:

<code class="language-javascript">// 我们想要一个 <p> 元素，带有一些文本内容和两个附加的类。
// 返回 </p>
<p>Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// 为了使此方法更有用，它应该在任何参数被省略或根本没有传递参数时始终返回默认元素。
createElement(); // <div>Very default</div></code>

L'implémentation de cette méthode n'aura pas beaucoup de logique, mais elle peut devenir assez importante en raison de sa couverture par défaut.

<code class="language-javascript">// 没有默认参数，它看起来相当臃肿且不必要地庞大。
function createElement(tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}</code>

Jusqu'à présent, tout s'est bien passé. Que se passe-t-il ici? Nous faisons ce qui suit:

1. Définissez les valeurs par défaut pour nos paramètres TAG et config Configation au cas où ils ne seront pas passés ( Notez que certains inspecteurs de code n'aiment pas la réaffectation des paramètres )
2. Créer des constantes en utilisant du contenu réel (et des valeurs par défaut)
3. Vérifiez si les noms de classe sont définis, et sinon, affectez le tableau par défaut
4. Créer et modifier des éléments avant de les retourner

utilisons maintenant cette fonction et l'optimions pour le rendre plus simple, plus rapide à écrire, et pour montrer son objectif plus clairement:

<code class="language-javascript">// 基本语法
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

// 默认参数也适用于后面的默认参数
function foo(num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]</code>

Au lieu de toucher la logique de la fonction, nous avons supprimé tout traitement par défaut du corps de fonction. Les signatures de fonction contiennent désormais toutes les valeurs par défaut. Permettez-moi d'expliquer plus loin, ce qui peut être un peu déroutant:

<code class="language-javascript">// 我们想要一个 <p> 元素，带有一些文本内容和两个附加的类。
// 返回 </p>
<p>Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// 为了使此方法更有用，它应该在任何参数被省略或根本没有传递参数时始终返回默认元素。
createElement(); // <div>Very default</div></code>

Nous déclarons non seulement un paramètre d'objet par défaut, mais déclarons également l'attribut d'objet par défaut . Cela rend la configuration par défaut plus claire, plutôt que de simplement déclarer un objet par défaut (par exemple config = {}), puis de définir les propriétés par défaut plus tard. Cela peut prendre un peu plus de temps pour s'y habituer, mais en fin de compte, il améliorera votre flux de travail. Bien sûr, pour des configurations plus grandes, nous pouvons toujours affirmer qu'elle peut créer plus de frais généraux, et il serait plus facile de garder le traitement par défaut dans le corps de la fonction.

ES6 Abréviation de l'attribut

Si la méthode accepte de grands objets de configuration comme paramètres, votre code peut devenir assez important. La pratique habituelle consiste à préparer certaines variables et à les ajouter à l'objet. L'abréviation d'attribut est

Syntaxe Sugar , qui peut rendre cette étape plus courte et plus facile à lire:

<code class="language-javascript">// 没有默认参数，它看起来相当臃肿且不必要地庞大。
function createElement(tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}</code>

Simplifiez votre API

D'accord, revenons à un autre exemple plus courant. La fonction suivante prend certaines données, les modifie et appelle une autre méthode:

<code class="language-javascript">// 默认所有内容
function createElement(tag = 'div', {
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  const element = document.createElement(tag);
  const text = document.createTextNode(content);

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}</code>

Nous nommons souvent la variable et les noms d'attribut d'objet sont les mêmes. En utilisant l'abréviation d'attribut combinée à la déconstruction, nous pouvons réellement raccourcir le code:

<code class="language-javascript">// 这里到底发生了什么？
function createElement({
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  // 函数体
}</code>

Encore une fois, cela peut prendre un certain temps pour s'y habituer. En fin de compte, c'est l'une des nouvelles fonctionnalités de JavaScript qui m'aide à écrire du code plus rapidement et à utiliser un corps de fonction plus propre. Mais attendez, il y en a plus! L'abréviation de l'attribut peut également être appliquée à la définition d'utilisation dans l'objet:

<code class="language-javascript">const a = 'foo', b = 42, c = function() {};

// 以前我们会像这样使用这些常量。
const alphabet = {
  a: a,
  b: b,
  c: c
};

// 但是使用新的简写，我们现在实际上可以这样做，
// 这与上面相同。
const alphabet = {a, b, c};</code>

Conclusion

Les paramètres par défaut et les abréviations d'attribut sont un excellent moyen de rendre votre méthode plus organisée et, dans certains cas, plus courte. Dans l'ensemble, les paramètres de fonction par défaut m'ont aidé à me concentrer davantage sur l'utilisation pratique de la méthode sans être distrait par beaucoup de préparation par défaut et les instructions IF. L'abréviation d'attribut est en effet davantage une fonction d'apparence, mais je me retrouve plus productif et passe moins de temps à écrire toutes les variables, les objets de configuration et les mots clés de fonction. Utilisez-vous déjà des paramètres par défaut et des abréviations d'attribut?

Cet article a été évalué par des pairs par Sebastian Seitz. Merci à tous les évaluateurs de pairs SitePoint pour avoir rendu le contenu SitePoint Perfect!

FAQ sur les paramètres par défaut ES6 (FAQ)

Quels sont les avantages de l'utilisation des paramètres par défaut ES6?

ES6 Les paramètres par défaut offrent plusieurs avantages. Tout d'abord, ils aident à rendre votre code plus concis et plus facile à lire. Sans vérifier si les paramètres ne sont pas définis, puis attribuent les valeurs par défaut, vous pouvez tout faire en une seule ligne. Cela réduit la quantité de code que vous devez écrire et permet aux autres de comprendre plus facilement votre code. Deuxièmement, ils aident à prévenir les erreurs. Si une fonction attend un certain paramètre mais n'est pas fournie, elle peut entraîner des résultats ou des erreurs inattendus. En définissant les paramètres par défaut, vous pouvez vous assurer que votre fonction a tous les paramètres dont il a besoin pour fonctionner correctement.

Puis-je utiliser les paramètres par défaut ES6 avec des affectations déconstruites?

Oui, vous pouvez utiliser les paramètres par défaut ES6 avec des affectations déconstruites. Il s'agit d'une caractéristique puissante d'ES6 qui vous permet de déballer les valeurs dans les tableaux ou les propriétés dans des objets en différentes variables. Lorsqu'il est utilisé en conjonction avec les paramètres par défaut, vous pouvez extraire des valeurs des objets ou des tableaux et attribuer des valeurs par défaut lorsque les valeurs extraites ne sont pas définies.

En quoi les paramètres par défaut de ES6 sont-ils différents de l'objet d'arguments dans JavaScript?

L'objet

Arguments est un objet de type tableau qui contient tous les paramètres transmis à la fonction. Cependant, il n'a pas toutes les méthodes d'avoir des tableaux et n'est pas aussi flexible que les paramètres par défaut ES6. Avec les paramètres par défaut, vous pouvez définir des valeurs par défaut pour tous les paramètres non définis, ce qui n'est pas possible dans les objets d'arguments.

Puis-je utiliser les paramètres par défaut ES6 dans le constructeur?

Oui, vous pouvez utiliser les paramètres par défaut ES6 dans le constructeur. Ceci est particulièrement utile lors de la création de nouvelles instances d'une classe. Si certains paramètres ne sont pas fournis lors de la création d'une nouvelle instance, les paramètres par défaut sont utilisés pour garantir que le nouvel objet a toutes les propriétés nécessaires.

y aura-t-il un impact sur les performances sur l'utilisation des paramètres par défaut ES6?

D'une manière générale, l'impact des performances de l'utilisation des paramètres par défaut ES6 est petit et ne devrait pas être un problème. Cependant, comme toute fonctionnalité, il doit être utilisé avec prudence. L'utilisation excessive des paramètres par défaut, en particulier dans le code critique des performances, peut provoquer un temps d'exécution lent. Comme toujours, assurez-vous de tester votre code et de surveiller ses performances.

Puis-je utiliser les paramètres par défaut ES6 avec la fonction flèche?

Oui, vous pouvez utiliser les paramètres par défaut ES6 avec les fonctions de flèche. Les fonctions de flèche introduites dans ES6 fournissent une syntaxe concise pour écrire des expressions de fonction. Ils sont particulièrement utiles lors de l'utilisation de fonctions d'ordre supérieur qui prennent d'autres fonctions comme des arguments.

Comment la valeur nul est-elle gérée par la fonction de paramètre par défaut de ES6?

Si le paramètre transmet une valeur nul, la fonction de paramètre par défaut ES6 n'attribue pas la valeur par défaut. En effet, NULL est considéré comme une valeur en JavaScript, contrairement aux indéfinis. Si vous souhaitez attribuer une valeur par défaut lorsque le paramètre est nul, vous devez traiter ce cas séparément dans votre code.

Puis-je utiliser les paramètres par défaut ES6 dans des fonctions récursives?

Oui, vous pouvez utiliser les paramètres par défaut ES6 dans des fonctions récursives. Ceci est particulièrement utile lorsque vous souhaitez fournir un cas de base pour une fonction récursive, mais ne voulez pas demander à l'appelant de toujours le fournir.

Puis-je utiliser les paramètres par défaut ES6 avec les paramètres restants?

Oui, vous pouvez utiliser les paramètres par défaut ES6 avec les paramètres restants. Cependant, n'oubliez pas que les paramètres restants doivent être le dernier paramètre de la définition de la fonction. De plus, vous ne pouvez pas affecter les valeurs par défaut aux paramètres restants eux-mêmes, mais vous pouvez attribuer des valeurs par défaut aux paramètres individuels pour une partie des paramètres restants.

Puis-je utiliser les paramètres par défaut ES6 avec l'opérateur d'extension?

Oui, vous pouvez utiliser les paramètres par défaut ES6 avec l'opérateur d'extension. L'opérateur d'extension vous permet d'étendre des objets itéroables tels que des tableaux vers des éléments individuels. Lorsqu'il est utilisé avec des paramètres par défaut, vous pouvez transmettre un ensemble de valeurs à la fonction et attribuer une valeur par défaut à tous les paramètres non définis.

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!