5 mauvaises habitudes en codage JS, comment les éviter ?

Avez-vous déjà eu ce sentiment en lisant du code JavaScript ?

• Vous comprenez à peine ce que fait le code ?

• Le code utilise beaucoup d'astuces JavaScript ?

• Nom et style de codage trop décontractés ?

• Ce sont tous des signes de mauvaises habitudes de codage.

Dans cet article, je décris 5 mauvaises habitudes de codage courantes en JavaScript. Surtout, cet article vous donnera quelques conseils pratiques pour vous débarrasser de ces habitudes.

1. N'utilisez pas de conversions de type implicites

JavaScript est un langage peu typé. C’est un avantage s’il est utilisé correctement car cela vous donne de la flexibilité.

La plupart des opérateurs + - * / == (à l'exclusion de ===) effectuent des conversions implicites lors de la gestion d'opérandes de différents types.

Les instructions if(condition){...}, while(condition){...} convertissent implicitement la condition en une valeur booléenne.

L'exemple suivant repose sur une conversion de type implicite, ce qui peut parfois prêter à confusion :

console.log("2" + "1");  // => "21"
console.log("2" - "1");  // => 1
console.log('' == 0);    // => true
console.log(true == []); // -> false
console.log(true == ![]); // -> false

Une dépendance excessive à l'égard de la conversion de type implicite est une mauvaise habitude. Premièrement, cela rend votre code moins stable dans les cas extrêmes. Deuxièmement, cela augmente le risque d’introduire des bogues difficiles à reproduire et à corriger.

Maintenant, nous implémentons une fonction pour obtenir les propriétés de l'objet. Si l'attribut n'existe pas, la fonction renvoie une valeur par défaut

function getProp(object, propertyName, defaultValue) {
  if (!object[propertyName]) {
    return defaultValue;
  }
  return object[propertyName];
}
const hero = {
  name: 'Batman',
  isVillian: false
};
console.log(getProp(hero, 'name', 'Unknown'));     // => 'Batman'

getProp() lit la valeur de l'attribut name, qui est 'Batman'.

Ensuite, essayez d'accéder à la propriété isVillian :

console.log(getProp(hero, 'isVillian', true)); // => true

C'est une erreur. Même si la propriété isVillian du héros est fausse, la fonction getProp() retournera faux vrai.

En effet, la vérification de l'existence de la propriété repose sur le booléen implicitement converti par if(!object[propertyName]){...}.

Ces erreurs sont difficiles à trouver. Pour corriger la fonction, vérifiez explicitement le type de la valeur :

function getPropFixed(object, propertyName, defaultValue) {
   if (object[propertyName] === undefined) {
     return defaultValue;
   }
   return object[propertyName];
}
const hero = {
  name: 'Batman',
  isVillian: false
};
console.log(getPropFixed(hero, 'isVillian', true)); // => false

object[propertyName] === undefined Vérifiez exactement si la propriété n'est pas définie.

Il est recommandé d'éviter d'utiliser directement undefined. Par conséquent, la solution ci-dessus peut être encore améliorée :

function getPropFixedBetter(object, propertyName, defaultValue) {
  if (!(propertyName in object)) {
    return defaultValue;
  }
  return object[propertyName]
}

Pardonnez la suggestion de l'auteur : n'utilisez pas de conversions de type implicites si possible. Assurez-vous plutôt que les variables et les paramètres de fonction ont toujours le même type, en utilisant des conversions de type explicites si nécessaire.

Liste des meilleures pratiques :

• Toujours utiliser l'opérateur d'égalité stricte === pour les comparaisons

• N'utilisez pas d'égalité lâche opérateurs==

• Opérateurs d'addition opérande1 + opérande2 : les deux opérandes doivent être des nombres ou des chaînes

• Opérateurs arithmétiques - */%** : les deux les opérandes doivent être des nombres

• if (condition) {...}, while (condition) {...} et d'autres instructions : condition Doit être une valeur booléenne

• Vous pourriez dire que cette méthode nécessite d'écrire plus de code... vous auriez raison ! Mais avec des méthodes explicites, vous pouvez contrôler le comportement de votre code. De plus, le caractère explicite améliore la lisibilité.

2. N'utilisez pas les premières astuces JavaScript

La chose intéressante à propos de JavaScript est que ses créateurs n'ont pas t Je ne m'attendais pas à ce que cette langue soit si populaire.

La complexité des applications construites sur JavaScript évolue plus vite que le langage. Cette situation oblige les développeurs à utiliser des astuces et des solutions de contournement JavaScript uniquement pour que les choses fonctionnent correctement.

Un exemple typique est de vérifier si un tableau contient un certain élément. Je n'aime jamais utiliser array.indexOf(item) ! == -1 pour vérifier.

ES6 et versions ultérieures sont beaucoup plus puissantes et de nombreuses astuces peuvent être refactorisées en toute sécurité à l'aide de nouvelles fonctionnalités linguistiques.

Dans ES6, vous pouvez utiliser array.includes(item) au lieu de array.indexOf(item) !== -1

3. scope

Avant ES2015, vous aviez peut-être l'habitude de déclarer toutes les variables dans la portée de la fonction.

Regardons un exemple :

function someFunc(array) {
  var index, item, length = array.length;
  /*
   * Lots of code
   */
  for (index = 0; index < length; index++) {
    item = array[index];
    // Use `item`
  }
  return someResult;
}

Les variables index, item et length sont dans la portée de la fonction. Mais ces variables affectent la portée de la fonction car elles ne sont nécessaires que dans la portée du bloc for().

En introduisant let et const avec une portée de bloc, la durée de vie des variables doit être limitée autant que possible.

function someFunc(array) {
  /*
   * Lots of code
   */
  const length = array.length;
  for (let index = 0; index < length; index++) {
    const item = array[index];
    // Use `item`
  }
  return someResult;
}

Les variables d'index et d'élément sont limitées à la portée du bloc de boucle for(). la longueur a été rapprochée de l’endroit où elle est utilisée.

Le code refactorisé est plus facile à comprendre car les variables ne sont pas dispersées dans la portée de la fonction, elles existent à proximité de l'endroit où elles sont utilisées.

Définissez les variables dans la portée du bloc utilisé

si la portée du bloc

// 不好
let message;
// ...
if (notFound) {
  message = 'Item not found';
  // Use `message`
}
// 好
if (notFound) {
  const message = 'Item not found';
  // Use `message`
}
for 块作用域
// 不好
let item;
for (item of array) {
  // Use `item`
}
// 好
for (const item of array) {
  // Use `item`
}

4 Essayez d'éviter les valeurs indéfinies et nulles

. 🎜>

Les variables non attribuées sont affectées de manière non définie par défaut. Par exemple, la variable

let count;
console.log(count); // => undefined
const hero = {
  name: 'Batman'
};
console.log(hero.city); // => undefined

count est définie mais n'a pas été initialisée avec une valeur. JavaScript lui attribue implicitement un caractère indéfini.

Lors de l'accès à la propriété inexistante hero.city, undefined sera également renvoyé.

Pourquoi est-ce une mauvaise habitude d'utiliser directement undefined ? Parce que lorsque vous comparez avec undefined, vous avez affaire à une variable dans un état non initialisé.

<🎜>Les variables, propriétés d'objet et tableaux doivent être initialisés avec des valeurs avant utilisation<🎜>

JS 提供了很多避免与undefined进行比较方式。

判断属性是否存在

// 不好
const object = {
  prop: 'value'
};
if (object.nonExistingProp === undefined) {
  // ...
}
// 好
const object = {
  prop: 'value'
};
if ('nonExistingProp' in object) {
  // ...
}

对象的默认属性

// 不好
function foo(options) {
  if (object.optionalProp1 === undefined) {
    object.optionalProp1 = 'Default value 1';
  }
  // ...
}
// 好
function foo(options) {
  const defaultProps = {
    optionalProp1: 'Default value 1'
  };
  options = {
    ...defaultProps,
    ...options
  }
}

默认函数参数

// 不好
function foo(param1, param2) {
  if (param2 === undefined) {
    param2 = 'Some default value';
  }
  // ...
}
// 好
function foo(param1, param2 = 'Some default value') {
  // ...
}

null是一个缺失对象的指示符。应该尽量避免从函数返回 null，特别是使用null作为参数调用函数。

一旦null出现在调用堆栈中，就必须在每个可能访问null的函数中检查它的存在，这很容易出错。

function bar(something) {
  if (something) {
    return foo({ value: 'Some value' });
  } else {
    return foo(null);
  }
}
function foo(options) {
  let value = null;
  if (options !== null) {
    value = options.value;
    // ...
  }
  return value;
}

尝试编写不涉及null的代码。 可替代方法是try /catch机制，默认对象的使用。

5. 不要使用随意的编码风格，执行一个标准

有什么比阅读具有随机编码风格的代码更令人生畏的事情？ 你永远不知道会发生什么！

如果代码库包含许多开发人员的不同编码风格，该怎么办?，这种就像各色人物涂鸦墙。

整个团队和应用程序代码库都需要相同的编码风格，它提高了代码的可读性。

一些有用的编码风格的例子：

Airbnb JS 风格指南

谷歌 JS 风格指南

老实说，当我在回家前准备提交时，我可能会忘记设计代码的样式。

我自己总说:保持代码不变，以后再更新它，但是“以后”意味着永远不会。

这里建议使用 eslint 来规范编码风格。

安装eslint

使用最适合自己的编码风格配置 eslint

设置一个预提交钩子，在提交之前运行eslint验证。

总结

编写高质量和干净的代码需要纪律，克服不好的编码习惯。

JavaScript是一种宽容的语言，具有很大的灵活性。但是你必须注意你所使用的特性。这里建议是避免使用隐式类型转换，undefined 和 null 。

现在这种语言发展得相当快。找出复杂的代码，并使用最新 JS 特性来重构。

整个代码库的一致编码风格有益于可读性。良好的编程技能总是一个双赢的解决方案。

推荐教程：《JS教程》

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!