JavaScript で変数を適切に処理する方法を学びます

#JavaScriptこのコラムでは、変数を正しく扱う方法を詳しく紹介します

# #推奨 (無料): javascript (ビデオ)

変数はどこにでもあります。小さな関数やガジェットを作成する場合でも、変数を宣言、割り当て、読み取る必要があります。変数にもっと注意を払うと、コードの可読性と保守性が向上します。

1. const を使用するか、let

と

const を使用することをお勧めします。または let 独自の JavaScript 変数を宣言します。 2 つの主な違いは、const 変数は宣言時に初期化する必要があり、一度初期化されると再割り当てできないことです。

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

let 宣言は値の初期化を必要とせず、複数回再割り当てできます。

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

const は 1 回限りの割り当て変数です。 const 変数は変更されないことがわかっているため、let よりも const 変数を推測する方が簡単です。

変数を宣言するときは、

const が最初に使用され、次に let が続きます。

関数をレビューしていて、

const result = ... ステートメント:

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

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

わかりませんが、

myBigFunction()## を確認したとします。 # ですが、 result 変数は読み取り専用であると結論付けることができます。 その他の場合、コードの実行中に変数を複数回再割り当てする必要がある場合は、

let

を使用します。

2. 変数のスコープを最小限に抑える

変数は、それが作成されたスコープ内に配置されます。コード ブロックと関数本体は、

const

変数と let 変数のスコープを作成します。 変数を最小のスコープに保つことは、読みやすさを向上させるための良い習慣です。

たとえば、次の二分探索アルゴリズムの実装:

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

変数

middle

と middleItem は関数の先頭で宣言されます。したがって、これらの変数は binarySearch() となり、関数のスコープ全体で使用できます。変数 middle は二分検索の中間インデックスを保持するために使用され、変数 middleItem は中間の検索項目を保持します。 ただし、

middle

変数と middleItem 変数は、while ループ内でのみ使用されます。それでは、これらの変数を while ブロック内で直接宣言してはどうでしょうか? <pre class="brush:php;toolbar:false">function binarySearch(array, search) {   let left = 0;   let right = array.length - 1;   while(left &lt;= right) {     const middle = Math.floor((left + right) / 2);           const middleItem = array[middle];           if (middleItem === search) {         return true;      }     if (middleItem &lt; search) {       left = middle + 1;      } else {       right = middle - 1;      }   }   return false; }</pre>現在、

middle

と middleItem は、変数が使用されるスコープ内にのみ存在します。それらのライフサイクルは非常に短いため、その目的を推測するのは簡単です。

3. 使いやすさ

私は、特に大きな関数を作成する場合、関数の先頭ですべての変数を宣言することにいつも慣れています。しかし、これを行うと、関数で変数を使用する意図が非常に混乱してしまいます。

したがって、変数は使用される場所のできるだけ近くで宣言する必要があります。こうすることで、推測する必要がなくなります。

ああ、変数はここで宣言されていますが、どこで使用されているのでしょうか?

多くのステートメントを含む関数があるとします。関数の先頭で変数

result

を宣言して初期化できますが、result は return ステートメントでのみ使用します。問題はresult 変数は最初に宣言されていますが、最後にのみ使用されます。そもそもこの変数を宣言する正当な理由はありません。

したがって、result 変数の機能と役割をよりよく理解するために、変数は常に、変数が使用される場所のできるだけ近くで宣言してください。

コードを次のように変更すると:<pre class="brush:php;toolbar:false">function myBigFunction(param1, param2) {   const result = otherFunction(param1);     let something;   /*    * 一些代码...    */   return something + result;}</pre>かなりわかりやすくなります。

4. 合理的な名前付け

変数の名前付けについてはすでによくご存知だと思いますので、ここでは詳しく説明しません。ただし、多くの命名規則の中で、2 つの重要な原則を要約しました。 最初の原則は非常に単純です。キャメル ケースの命名を使用し、このスタイルを一貫して維持します。

function myBigFunction(param1, param2) {
  let something;

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

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

このルールの例外は、特別な意味を持つ数値や文字列などの特定の値です。特定の値を含む変数は、通常、通常の変数と区別するために大文字で下線が引かれます。

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

2 番目の変数は次のとおりだと思います。

変数名は、どのデータを保存するために使用されるかを明確に示す必要があります。

。

ここにいくつかの良い例を示します:

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

message

名前は、この変数に何らかのメッセージ (おそらく文字列) が含まれていることを示します。

isLoading も同様で、読み込みが進行中かどうかを示すために使用されるブール値です。

count 変数が、何らかのカウント結果を含む数値型変数を表すことは間違いありません。

変数の役割を明確に示す変数名を選択してください。 例を見てみましょう。次のコードがあるとします:

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

以上がJavaScript で変数を適切に処理する方法を学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。