Erfahren Sie, wie Sie mit Variablen in JavaScript richtig umgehen

In der Spalte „JavaScript“ wird detailliert beschrieben, wie man mit Variablen richtig umgeht. Selbst wenn wir eine kleine Funktion oder ein Gadget schreiben, müssen wir dennoch Variablen deklarieren, zuweisen und lesen. Wenn Sie den Variablen mehr Aufmerksamkeit schenken, kann dies die Lesbarkeit und Wartbarkeit des Codes verbessern.

1. Es wird empfohlen, const zu verwenden oder let

zu verwenden, um Ihre eigenen JavaScript-Variablen mit const oder let zu deklarieren. Der Hauptunterschied zwischen den beiden besteht darin, dass const-Variablen bei der Deklaration initialisiert werden müssen und nach der Initialisierung nicht mehr neu zugewiesen werden können. Die

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

let-Deklaration erfordert keine Wertinitialisierung und kann mehrmals neu zugewiesen werden.

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

const ist eine einmalige Zuordnungsvariable. Das Spekulieren über const-Variablen ist einfacher als let, da Sie wissen, dass const-Variablen nicht geändert werden. Verwenden Sie beim Deklarieren von Variablen zuerst const und dann let.

Angenommen, Sie überprüfen eine Funktion und sehen eine const result = ...-Anweisung:

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

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

Obwohl ich nicht weiß, was in myBigFunction() gemacht wird, Wir können jedoch daraus schließen, dass die Variable result schreibgeschützt ist. In anderen Fällen, wenn Sie eine Variable während der Codeausführung mehrmals neu zuweisen müssen, verwenden Sie let. 2. Minimieren Sie den Gültigkeitsbereich von Variablen

Eine Variable befindet sich in dem Gültigkeitsbereich, in dem sie erstellt wird. Codeblöcke und Funktionskörper erstellen Bereiche für const- und let-Variablen. const 或 let 声明自己的 JavaScript 变量。两者之间的主要区别是 const 变量在声明时需要初始化，并且一旦初始化就无法再重新赋值。

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

let 声明不需要对值初始化，可以多次重新赋值。

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;
}

const 是一次性分配变量。因为你知道 const 变量不会被修改，所以与 let 相比，对 const 变量的推测比较容易。

声明变量时优先使用 const，然后是 let 。

假设你正在 review 一个函数，并看到一个 const result = ... 声明：

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

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

  return something + result;}

虽然不知道  myBigFunction() 中做了些什么，但是我们可以得出结论，result 变量是只读的。

在其他情况下，如果必须在代码执行过程中多次重新对变量赋值，那就用 let。

2. 使变量的作用域最小化

变量位于创建它的作用域中。代码块和函数体为 const 和 let 变量创建作用域。

把变量保持在最小作用域中是提高可读性的一个好习惯。

例如下面的二分查找算法的实现：

function myBigFunction(param1, param2) {
  let something;

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

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

变量 middle 和 middleItem 是在函数的开头声明的，所以这些变量在 binarySearch() 函数的整个作用域内可用。变量 middle 用来保存二叉搜索的中间索引，而变量 middleItem 保存中间的搜索项。

但是 middle 和 middleItem 变量只用在 while 循环中。那为什么不直接在 while 代码块中声明这些变量呢？

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

现在 middle 和 middleItem 只存在于使用变量的作用域内。他们的生命周期极短，所以更容易推断它们的用途。

3. 易于使用

我总是习惯于在函数开始的时候去声明所有变量，尤其是在写一些比较大的函数时。但是这样做会使我在函数中使用变量的意图变得非常混乱。

所以应该在变量声明时应该尽可能靠的近使用位置。这样你就不必去猜：哦，这里声明了变量，但是…它被用在什么地方呢？

假设有一个函数，在函数有包含很多语句。你可以在函数的开头声明并初始化变量 result，但是只在 return 语句中使用了 result：

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

问题在于 result 变量在开头声明，却只在结尾用到。我们并没有充分的理由在开始的时后就声明这个变量。

所以为了更好地理解 result 变量的功能和作用，要始终使变量声明尽可能的靠近使用它位置。

如果把代码改成这样：

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

现在是不是就清晰多了。

4. 合理的命名

你可能已经知道了很多关于变量命名的知识，所以在这里不会展开说明。不过在众多的命名规则中，我总结出了两个重要的原则：

第一个很简单：使用驼峰命名法，并终如一地保持这种风格。

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

这个规则的一个例外是一些特定的值：比如数字或具有特殊含义的字符串。包特定值的变量通常用大写加下划线的形式，与常规变量区分开：

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

我认为第二条是：变量名称应该清楚无误地表明是用来保存哪些数据的。

下面是一些很好的例子：

const sum = val1 * val2 + val3 / val4;

message 名称表示此变量包含某种消息，很可能是字符串。

isLoading 也一样，是一个布尔值，用来指示是否正在进行加载。

毫无疑问，count

Variablen im kleinsten Bereich zu halten ist eine gute Angewohnheit, um die Lesbarkeit zu verbessern.

Zum Beispiel die Implementierung des binären Suchalgorithmus unten:

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

const sum = multiplication + pision;

Die Variablen middle und middleItem werden am Anfang der Funktion deklariert, daher sind diese Variablen in binarySearch() Verfügbar im gesamten Funktionsumfang. Die Variable middle wird verwendet, um den mittleren Index der binären Suche zu speichern, während die Variable middleItem das mittlere Suchelement enthält. 🎜🎜Aber die Variablen middle und middleItem werden nur in der while-Schleife verwendet. Warum also diese Variablen nicht direkt im while-Block deklarieren? 🎜

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;
}

🎜Jetzt existieren middle und middleItem nur in dem Bereich, in dem die Variable verwendet wird. Ihre Lebenszyklen sind extrem kurz, sodass sich ihr Zweck leichter ableiten lässt. 🎜🎜🎜3. Einfach zu verwenden🎜🎜🎜Ich bin es immer gewohnt, alle Variablen am Anfang der Funktion zu deklarieren, insbesondere wenn ich einige größere Funktionen schreibe. Dies würde jedoch meine Absicht, die Variable in der Funktion zu verwenden, sehr verwirrend machen. 🎜🎜Wenn die Variable also deklariert wird, sollte sie so nah wie möglich verwendet werden. Auf diese Weise müssen Sie nicht raten: 🎜Oh, die Variable ist hier deklariert, aber... wo wird sie verwendet? 🎜🎜🎜Angenommen, es gibt eine Funktion, die viele Anweisungen enthält. Sie können die Variable result am Anfang der Funktion deklarieren und initialisieren, aber nur result in der return-Anweisung verwenden: 🎜

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;
}

🎜Das Problem ist result wird am Anfang deklariert, aber erst am Ende verwendet. Es gibt überhaupt keinen guten Grund, diese Variable zu deklarieren. 🎜🎜Um die Funktion und Rolle der result-Variablen besser zu verstehen, deklarieren Sie die Variable immer so nah wie möglich an dem Ort, an dem sie verwendet wird. 🎜🎜Wenn Sie den Code wie folgt ändern: 🎜rrreee🎜Jetzt wird es viel klarer. 🎜🎜🎜4. Richtige Benennung🎜🎜🎜Sie wissen wahrscheinlich bereits viel über die Benennung von Variablen, daher werde ich hier nicht auf Details eingehen. Unter den vielen Namensregeln habe ich jedoch zwei wichtige Prinzipien zusammengefasst: 🎜🎜Das erste ist ganz einfach: Benennung in Kamel-Groß-/Kleinschreibung verwenden und diesen Stil konsequent beibehalten. 🎜rrreee🎜Eine Ausnahme von dieser Regel bilden bestimmte Werte: wie Zahlen oder Zeichenfolgen mit besonderer Bedeutung. Variablen, die bestimmte Werte enthalten, werden normalerweise groß geschrieben und unterstrichen, um sie von regulären Variablen zu unterscheiden: 🎜rrreee🎜 Ich denke, der zweite lautet: 🎜Der Variablenname sollte klar angeben, welche Daten zum Speichern verwendet werden 🎜. 🎜🎜Hier sind einige gute Beispiele: 🎜rrreee🎜 Der Name message gibt an, dass diese Variable eine Art Nachricht enthält, höchstwahrscheinlich eine Zeichenfolge. 🎜🎜isLoading ist dasselbe, es ist ein boolescher Wert, der angibt, ob der Ladevorgang läuft. 🎜🎜Es besteht kein Zweifel, dass die Variable count eine Variable vom numerischen Typ darstellt, die einige Zählergebnisse enthält. 🎜🎜Achten Sie darauf, einen Variablennamen zu wählen, der seine Rolle klar angibt. 🎜🎜Sehen Sie sich ein Beispiel an. Angenommen, Sie sehen den folgenden Code: 🎜

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

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie mit Variablen in JavaScript richtig umgehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!