Évitez ces cinq erreurs Javascript

La colonne

javascript listera cinq conseils pour rendre votre code plus lisible et plus facile à maintenir.

Lors de l'édition d'anciens projets, avez-vous déjà rencontré un code déroutant qui « se brise » dès qu'une nouvelle logique est ajoutée ? Bien sûr, nous y sommes tous allés. Afin de sauver le monde d'un code Javascript moins illisible, je dois vous montrer les cinq exemples suivants - mon pilier de la honte.

Utiliser la déstructuration de tableau pour obtenir plusieurs valeurs de retour d'une fonction

Si nous avons une fonction qui renvoie plusieurs valeurs, nous pouvons utiliser la déstructuration de tableau pour obtenir les valeurs. Le code est le suivant :

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4; 
  return [a,b,c,d];
}const [a,b,c,d] = func();console.log(a,b,c,d); // Outputs: 1,2,3,4复制代码

Bien que la méthode ci-dessus puisse réaliser une affectation, elle a quelques effets secondaires.

Lors de l'appel d'une fonction pour obtenir la valeur de retour a,b,c,d, nous devons faire attention à l'ordre dans lequel la valeur de retour est renvoyée. Une petite erreur ici pourrait être votre cauchemar de débogage.

En plus de prêter attention à la commande, nous ne pouvons pas simplement obtenir quelques-unes des valeurs de retour que nous voulons. Et si je veux seulement c,d ?

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4;  return {a,b,c,d};
}const {c,d} = func();复制代码

Nous pouvons utiliser l'affectation de déstructuration d'objet à la place.

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4;  return {a,b,c,d};
}const {c,d} = func();复制代码

Maintenant, nous pouvons choisir librement quelle fonction renvoie les valeurs que nous voulons.

Même si la fonction ajoute plus de valeurs de retour à l'avenir, le code de déstructuration de l'objet peut rester inchangé, rendant le code plus stable.

Aucune déstructuration d'objet n'est utilisée dans les paramètres d'entrée de fonction

Supposons que nous ayons une fonction dont le paramètre d'entrée est un objet et que le code dans la fonction doit utiliser les propriétés de cet objet. Une implémentation naïve est la suivante :

// badfunction getDaysRemaining(subscription) {  const startDate = subscription.startDate;  const endDate = subscription.endDate;  return endDate - startDate;
}复制代码

Bien que cette solution réponde à nos besoins, elle déclare deux variables de référence temporaires inutiles startDate et endDate.

Une meilleure solution consiste à utiliser la déstructuration d'objets pour obtenir les paramètres d'entrée startDate et endDate sur une seule ligne.

// betterfunction getDaysRemaining(subscription) {  const { startDate, endDate } = subscription;  return startDate - endDate;
}复制代码

On peut même utiliser la déstructuration d'objets pour définir ces deux variables directement dans les paramètres d'entrée.

// even betterfunction getDaysRemaining({ startDate, endDate }) {  return startDate - endDate;
}
Much more elegant wouldn’t you agree?复制代码

Tu ne trouves pas que c'est plus élégant ?

Copier le tableau sans utiliser la syntaxe spread (...)

Utiliser for pour parcourir les éléments puis les copier dans un nouveau tableau est non seulement fastidieux mais aussi laid.

L'utilisation de la syntaxe d'expansion peut rendre l'implémentation plus claire et plus concise.

const stuff = [1,2,3];// badconst stuffCopyBad = []for(let i = 0; i < stuff.length; i++){
  stuffCopyBad[i] = stuff[i];
}// goodconst stuffCopyGood = [...stuff];复制代码

Utilisez Var

Utilisez const pour garantir qu'une variable ne peut pas être réaffectée, ce qui peut réduire les bogues et améliorer la lisibilité du code.

// badvar x = "badX";var y = "baxY";// goodconst x = "goodX";const y = "goodX";复制代码

Si vous avez vraiment besoin de réaffecter une variable, préférez toujours let plutôt que var . Si vous avez vraiment besoin de réaffecter une variable, utilisez let au lieu de var.

let fonctionne à la portée du bloc, tandis que var fonctionne à la portée de la fonction.

La portée du bloc rend la variable valide uniquement dans le bloc de code dans lequel elle est définie. L'accès à la variable en dehors de la portée du bloc entraînera une erreur ReferenceError.

for(let i = 0; i < 10; i++){  //something}
print(i) // ReferenceError: i is not defined复制代码

Une variable définie dans la portée de la fonction peut être utilisée dans la portée de la fonction dans laquelle elle est définie. Les variables définies

for(var i = 0; i < 10; i++){  //something}console.log(i) // Outputs 10复制代码

let et const sont accessibles dans la portée du bloc.

Ne pas utiliser de chaînes de modèles

L'épissage manuel de chaînes est très complexe à écrire et déroutant à lire. Voir exemple :

// badfunction printStartAndEndDate({ startDate, endDate }) {  console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}复制代码

Les chaînes de modèle fournissent un moyen clair et lisible d'insérer des variables dans des chaînes.

// goodfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}复制代码

La chaîne de modèle fournit un moyen simple d'envelopper des lignes. Il vous suffit d'appuyer sur la touche enter du clavier, comme vous l'utilisez habituellement (dans le système).

// prints on two linesfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}
  EndDate: ${endDate}`)
}复制代码

Plus de recommandations d'apprentissage gratuites connexes : javascript(vidéo)

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!