JavaScript에서 변수를 올바르게 처리하는 방법 알아보기

JavaScript 칼럼에서는 변수를 올바르게 처리하는 방법

권장(무료): javascript(동영상)

변수는 어디에나 있습니다. 작은 함수나 가젯을 작성하더라도 여전히 변수를 선언하고 할당하고 읽어야 합니다. 변수에 더 많은 주의를 기울이면 코드의 가독성과 유지 관리성이 향상될 수 있습니다.

1 const을 사용하거나 let

을 사용하여 const 또는 let으로 자체 JavaScript 변수를 선언하는 것이 좋습니다. 둘 사이의 주요 차이점은 const 변수는 선언 시 초기화되어야 하며, 일단 초기화되면 다시 할당할 수 없다는 것입니다. const 或 let 声明自己的 JavaScript 变量。两者之间的主要区别是 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 是一次性分配变量。因为你知道 const 变量不会被修改，所以与 let 相比，对 const 变量的推测比较容易。

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

假设你正在 review 一个函数，并看到一个 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  true
binarySearch([2, 5, 7, 9], 1); // => false

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

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

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

  while(left <p>现在 <code>middle</code> 和 <code>middleItem</code> 只存在于使用变量的作用域内。他们的生命周期极短，所以更容易推断它们的用途。</p><p><strong>3. 易于使用</strong></p><p>我总是习惯于在函数开始的时候去声明所有变量，尤其是在写一些比较大的函数时。但是这样做会使我在函数中使用变量的意图变得非常混乱。</p><p>所以应该在变量声明时应该尽可能靠的近使用位置。这样你就不必去猜：<em>哦，这里声明了变量，但是…它被用在什么地方呢？</em></p><p>假设有一个函数，在函数有包含很多语句。你可以在函数的开头声明并初始化变量 <code>result</code>，但是只在 <code>return</code> 语句中使用了 <code>result</code>：</p><pre class="brush:php;toolbar:false">function myBigFunction(param1, param2) {
  const result = otherFunction(param1);  
  let something;

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

  return something + result;}

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

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

如果把代码改成这样：

function myBigFunction(param1, param2) {
  let something;

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

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

现在是不是就清晰多了。

4. 合理的命名

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

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

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

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

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

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

下面是一些很好的例子：

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

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

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

毫无疑问，count

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

let 선언에는 값 초기화가 필요하지 않으며 여러 번 재할당될 수 있습니다.

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

const는 일회성 할당 변수입니다. const 변수를 추측하는 것은 let보다 쉽습니다. 왜냐하면 const 변수가 수정되지 않는다는 것을 알고 있기 때문입니다.

변수를 선언할 때 먼저 const를 사용한 다음 let를 사용하세요. 🎜🎜함수를 검토하고 const result = ... 문을 보았다고 가정해 보겠습니다. 🎜

const sum = val1 * val2 + val3 / val4;

🎜myBigFunction()에서 수행되는 작업은 모르지만, 하지만 result 변수는 읽기 전용이라는 결론을 내릴 수 있습니다. 🎜🎜그 외의 경우, 코드 실행 중에 변수를 여러 번 재할당해야 한다면 let를 사용하세요. 🎜🎜🎜2. 변수 범위를 최소화하세요. 🎜🎜🎜변수는 생성된 범위 내에 위치합니다. 코드 블록과 함수 본문은 const 및 let 변수에 대한 범위를 만듭니다. 🎜🎜변수를 가장 작은 범위에 유지하는 것은 가독성을 높이는 좋은 습관입니다. 🎜🎜예를 들어 아래 이진 검색 알고리즘의 구현은 다음과 같습니다. 🎜

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

const sum = multiplication + pision;

🎜 middle 및 middleItem 변수는 함수 시작 부분에 선언되므로 이러한 변수는 binarySearch() 는 함수의 전체 범위 내에서 사용할 수 있습니다. middle 변수는 이진 검색의 중간 인덱스를 보유하는 데 사용되고, 변수 middleItem은 중간 검색 항목을 보유하는 데 사용됩니다. 🎜🎜그러나 middle 및 middleItem 변수는 while 루프에서만 사용됩니다. 그렇다면 while 블록에서 이러한 변수를 직접 선언하면 어떨까요? 🎜

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

  while(left 🎜이제 <code>middle</code>과 <code>middleItem</code>은 변수가 사용되는 범위에만 존재합니다. 수명주기가 매우 짧기 때문에 목적을 추론하기가 더 쉽습니다. 🎜🎜🎜3. 사용하기 쉬움🎜🎜🎜저는 항상 함수 시작 부분에서 모든 변수를 선언하는 데 익숙합니다. 특히 더 큰 함수를 작성할 때 더욱 그렇습니다. 그러나 이렇게 하면 함수에서 변수를 사용하려는 의도가 매우 혼란스러워질 것입니다. 🎜🎜그래서 변수를 선언할 때는 최대한 가깝게 사용해야 합니다. 이렇게 하면 추측할 필요가 없습니다. 🎜아, 변수가 여기에 선언되어 있지만... 어디에 사용되나요? 🎜🎜🎜많은 문장을 포함하는 함수가 있다고 가정해보세요. 함수 시작 부분에서 <code>result</code> 변수를 선언하고 초기화할 수 있지만 <code>return</code> 문에서는 <code>result</code>만 사용하세요. 🎜<pre class="brush:php;toolbar:false">function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left 🎜문제 is <code>result</code> 변수는 처음에 선언되지만 끝에서만 사용됩니다. 처음부터 이 변수를 선언할 이유가 없습니다. 🎜🎜따라서 <code>result</code> 변수의 기능과 역할을 더 잘 이해하려면 항상 변수가 사용되는 위치에 최대한 가깝게 선언하세요. 🎜🎜코드를 다음과 같이 변경하면 🎜rrreee🎜이제 훨씬 더 명확해집니다. 🎜🎜🎜4. 올바른 이름 지정🎜🎜🎜아마도 변수 이름 지정에 대해 이미 많이 알고 계실 것이므로 여기서는 자세히 설명하지 않겠습니다. 하지만 많은 명명 규칙 중에서 중요한 두 가지 원칙을 요약했습니다. 🎜🎜첫 번째는 매우 간단합니다. 낙타 표기법 명명을 사용하고 이 스타일을 일관되게 유지합니다. 🎜rrreee🎜이 규칙의 예외는 특정 값(예: 숫자 또는 특별한 의미가 있는 문자열)입니다. 특정 값을 포함하는 변수는 일반적으로 일반 변수와 구별하기 위해 대문자로 밑줄을 긋습니다. 🎜rrreee🎜 두 번째는 다음과 같습니다. 🎜변수 이름은 어떤 데이터를 저장하는 데 사용되는지 명확하게 표시해야 합니다🎜. 🎜🎜다음은 몇 가지 좋은 예입니다. 🎜rrreee🎜 <code>message</code> 이름은 이 변수에 일종의 메시지(대부분 문자열)가 포함되어 있음을 나타냅니다. 🎜🎜<code>isLoading</code>도 마찬가지이며, 로딩이 진행 중인지 나타내는 데 사용되는 부울 값입니다. 🎜🎜 <code>count</code> 변수가 일부 계산 결과가 포함된 숫자 유형 변수를 나타내는 것은 의심할 여지가 없습니다. 🎜🎜역할을 명확하게 나타내는 변수 이름을 선택하세요. 🎜🎜예제를 살펴보고 다음 코드가 있다고 가정해 보겠습니다. 🎜<pre class="brush:php;toolbar:false">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 <p>里面的 <code>middleItem</code> 就是一个中间变量，用于保存中间项。使用中间变量 <code>middleItem</code> 比直接用 <code>array[middle]</code> 更容易。</p><p>与缺少  <code>middleItem</code> 变量的函数版本进行比较：</p><pre class="brush:php;toolbar:false">function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <p>没有中间变量的解释，这个版本稍微不太好理解。</p><p>通过使用中间变量<strong>用代码解释代码</strong>。中间变量可能会增加一些语句，但出于增强代码可读性的目的还是非常值得的的。</p><p><strong>总结</strong></p>

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

위 내용은 JavaScript에서 변수를 올바르게 처리하는 방법 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!