Apprenez à gérer correctement les variables en JavaScript

La colonne

JavaScript présentera en détail comment gérer correctement les variables

Recommandé (Gratuit) : javascript (vidéo)

Les variables sont partout. Même si nous écrivons une petite fonction ou un gadget, nous devons toujours déclarer, attribuer et lire des variables. Accorder plus d'attention aux variables peut améliorer la lisibilité et la maintenabilité du code.

1. Il est recommandé d'utiliser const, ou d'utiliser let

pour déclarer le vôtre avec const ou let variables JavaScript. La principale différence entre les deux est que les variables const doivent être initialisées lorsqu'elles sont déclarées et qu'une fois initialisées, elles ne peuvent pas être réaffectées.

// const 需要初始化
const pi = 3.14;
// const 不能被重新赋值
pi = 4.89; 
// throws "TypeError: Assignment to constant variable"

let déclare que la valeur n'a pas besoin d'être initialisée et peut être réaffectée plusieurs fois.

// let 要不要初始化随你
let result;
// let 可被重新赋值
result = 14;
result = result * 2;

const est une variable d'allocation unique. Parce que vous savez que la variable const ne sera pas modifiée, il est plus facile de spéculer sur la variable let que sur const .

Lors de la déclaration de variables, utilisez const d'abord, puis let.

Supposons que vous examiniez une fonction et que vous voyiez une déclaration const result = ... :

function myBigFunction(param1, param2) {
  /* 一写代码... */

  const result = otherFunction(param1);
  /* 一些代码... */
  return something;
}

Bien que nous ne sachions pas ce qui est fait dans myBigFunction(), nous pouvons conclure que result Les variables sont en lecture seule.

Dans d'autres cas, utilisez let si une variable doit être réaffectée plusieurs fois lors de l'exécution du code.

2. Réduire la portée de la variable

Une variable se trouve dans la portée dans laquelle elle est créée. Les blocs de code et les corps de fonction créent des étendues pour les variables const et let.

Conserver les variables dans la plus petite portée est une bonne habitude pour améliorer la lisibilité.

Par exemple, l'implémentation suivante de l'algorithme de recherche binaire :

function binarySearch(array, search) {
  let middle;  let middleItem;  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    middle = Math.floor((left + right) / 2);    
    middleItem = array[middle];    
    if (middleItem === search) { 
      return true; 
    }
    if (middleItem < search) { 
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

binarySearch([2, 5, 7, 9], 7); // => true
binarySearch([2, 5, 7, 9], 1); // => false

Les variables middle et middleItem sont déclarées au début de la fonction, donc ces variables sont dans l'ensemble portée de la fonction binarySearch() Disponible. La variable middle est utilisée pour contenir l'index intermédiaire de la recherche binaire, tandis que la variable middleItem contient le terme de recherche intermédiaire.

Mais les variables middle et middleItem ne sont utilisées que dans la boucle while. Alors pourquoi ne pas déclarer ces variables directement dans le bloc de code while ?

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);    
      const middleItem = array[middle];    
      if (middleItem === search) {
        return true; 
    }
    if (middleItem < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

Maintenant, middle et middleItem n'existent que dans la portée où la variable est utilisée. Leurs cycles de vie sont extrêmement courts, il est donc plus facile de déduire leur finalité.

3. Facile à utiliser

J'ai toujours l'habitude de déclarer toutes les variables au début d'une fonction, surtout lors de l'écriture de fonctions plus volumineuses. Mais cela rendrait mon intention d’utiliser la variable dans la fonction très déroutante.

La variable doit donc être déclarée le plus près possible de l'emplacement d'utilisation. De cette façon, vous n'avez pas à deviner : Oh, la variable est déclarée ici, mais... où est-elle utilisée ?

Supposons qu'il existe une fonction qui contient de nombreuses instructions. Vous pouvez déclarer et initialiser la variable result au début de la fonction, mais utilisez uniquement return dans l'instruction result :

function myBigFunction(param1, param2) {
  const result = otherFunction(param1);  
  let something;

  /*
   * 一些代码...
   */

  return something + result;}

Le problème est que la variable result est déclarée au début, mais utilisé seulement à la fin. Il n’y a aucune bonne raison de déclarer cette variable en premier lieu.

Ainsi, afin de mieux comprendre la fonction et le rôle des result variables, déclarez toujours la variable le plus près possible de l'endroit où elle est utilisée.

Si vous changez le code comme suit :

function myBigFunction(param1, param2) {
  let something;

  /* 
   * 一些代码... 
   */

  const result = otherFunction(param1);  
  return something + result;}

Maintenant, ce sera beaucoup plus clair.

4. Dénomination raisonnable

Vous en savez probablement déjà beaucoup sur la dénomination des variables, je n'entrerai donc pas dans les détails ici. Cependant, parmi les nombreuses règles de dénomination, j'ai résumé deux principes importants :

Le premier est très simple : utiliser la dénomination en casse chameau et maintenir ce style de manière cohérente.

const message = 'Hello';
const isLoading = true;
let count;

Une exception à cette règle concerne certaines valeurs : telles que des nombres ou des chaînes avec des significations particulières. Les variables qui contiennent des valeurs spécifiques sont généralement en majuscules et soulignées pour les distinguer des variables normales :

const SECONDS_IN_MINUTE = 60;
const GRAPHQL_URI = 'http://site.com/graphql';

Je pense que le deuxième point est : Les noms de variables doivent clairement indiquer les données qu'elles sont utilisées pour enregistrer <.>.

Voici quelques bons exemples :

let message = 'Hello';
let isLoading = true;
let count;

Le nom indique que cette variable contient une sorte de message, probablement une chaîne. message

est également une valeur booléenne utilisée pour indiquer si le chargement est en cours. isLoading

Sans aucun doute, la variable

représente une variable de type numérique qui contient un résultat de comptage. count

Assurez-vous de choisir un nom de variable qui indique clairement son rôle.

Regardez un exemple. Supposons que vous voyiez le code suivant :

function salary(ws, r) {
  let t = 0;
  for (w of ws) {
    t += w * r;
  }
  return t;
}

你能很容易知道函数的作用吗？与薪水的计算有关？非常不幸，我们很难看出 ws、 r、 t、 w这些变量名的作用。

但是如果代码是这样：

function calculateTotalSalary(weeksHours, ratePerHour) {
  let totalSalary = 0;
  for (const weekHours of weeksHours) {
    const weeklySalary = weekHours * ratePerHour;
    totalSalary += weeklySalary;
  }
  return totalSalary;
}

我们就很容易知道它们的作用，这就是合理命名的力量。

5.采用中间变量

我一般尽可能避免写注释，更喜欢写出能够自我描述的代码，通过对变量、属性、函数、类等进行合理的命名来表达代码的意图。

如果想使代码本身称为文档，一个好习惯是引入中间变量，这在在处理长表达式时很好用。

比如下面的表达式：

const sum = val1 * val2 + val3 / val4;

可以通过引入两个中间变量来提高长表达式的可读性：

const multiplication = val1 * val2;
const pision       = val3 / val4;

const sum = multiplication + pision;

再回顾一下前面的二叉搜索算法实现：

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    const middleItem = array[middle];    
    if (middleItem === search) {      
      return true; 
    }
    if (middleItem < search) {      
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

里面的 middleItem 就是一个中间变量，用于保存中间项。使用中间变量 middleItem 比直接用 array[middle] 更容易。

与缺少  middleItem 变量的函数版本进行比较：

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    if (array[middle] === search) {      
      return true; 
    }
    if (array[middle] < search) {      
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

没有中间变量的解释，这个版本稍微不太好理解。

通过使用中间变量用代码解释代码。中间变量可能会增加一些语句，但出于增强代码可读性的目的还是非常值得的的。

总结

• 变量无处不在。在 JavaScript 中使用变量时，首选 const，其次是 let。
• 尽可能缩小变量的作用域。同样，声明变量时要尽可能靠近其使用位置。
• 合理的命名是非常重要的。要遵循以下规则：变量名称应该清楚无误地表明是用来保存哪些数据的。不要害怕使用更长的变量名：要追求清晰而不是简短。
• 最后，最好用代码自己来解释代码。在高度复杂的地方，我更喜欢引入中间变量。

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!