JS變量中有哪些需要注意的

# JS變量中有哪些需要注意的

## 引言

JavaScript作為一門動態弱類型語言，變量的使用看似簡單卻暗藏許多"陷阱"。本文將從變量聲明、作用域、提升、類型轉換等角度，詳細剖析JS變量使用中需要特別注意的關鍵點。

---

## 一、變量聲明方式的選擇

### 1. `var`的歷史遺留問題
```javascript
var x = 10;
if (true) {
  var x = 20; // 同一個作用域！
  console.log(x); // 20
}
console.log(x); // 20

• 函數作用域而非塊級作用域
• 允許重復聲明
• 容易造成變量污染

2. let/const的塊級作用域

let y = 10;
if (true) {
  let y = 20; // 不同作用域
  console.log(y); // 20
}
console.log(y); // 10

• 使用建議：
  • 默認使用const
  • 需要重新賦值時用let
  • 避免使用var

二、變量提升（Hoisting）的陷阱

1. var的變量提升

console.log(a); // undefined
var a = 5;

實際執行順序：

var a;
console.log(a);
a = 5;

2. let/const的暫時性死區（TDZ）

console.log(b); // ReferenceError
let b = 10;

• 從作用域開始到聲明語句之前都屬于TDZ
• 比var更符合直覺

三、作用域鏈與閉包

1. 作用域查找規則

let global = 1;
function outer() {
  let outerVar = 2;
  function inner() {
    console.log(outerVar); // 2
    console.log(global);   // 1
  }
  return inner;
}

2. 閉包的內存泄漏風險

function createHeavyObject() {
  const bigObj = new Array(1000000).fill('*');
  return () => console.log(bigObj.length);
}
// 即使不再需要，bigObj仍被保留

四、類型轉換的隱式規則

1. 寬松相等（==）的隱患

console.log([] == ![]); // true
// 轉換步驟：
// ![] → false
// [] == false → "" == false → 0 == 0

2. 常見類型轉換表

五、全局變量的污染問題

1. 意外的全局變量

function leak() {
  leaked = 'oops'; // 未聲明直接賦值 → 成為全局變量
}

2. 解決方案

• 使用嚴格模式：

  
  'use strict';
  undeclaredVar = 1; // ReferenceError
  

• 模塊化開發（ES Modules）

六、變量命名的注意事項

1. 保留字沖突

// let class = 'math';  // SyntaxError
let klass = 'math';    // 可行的替代方案

2. 推薦的命名規范

• 常量：UPPER_CASE
• 類名：PascalCase
• 其他：camelCase
• 私有變量：_prefix

七、特殊值處理

1. NaN的檢測

let notNumber = 0/0;
console.log(notNumber === notNumber); // false
// 正確檢測方式：
Number.isNaN(notNumber); // true

2. null vs undefined

• null：顯式空值
• undefined：
  • 變量未初始化
  • 函數無return值
  • 訪問不存在的屬性

八、性能優化建議

1. 避免頻繁創建/銷毀：在循環外部聲明變量 “`javascript // 差 for (let i=0; i<1000; i++) { let temp = i*2; // 每次循環都創建 }

// 優 let temp; for (let i=0; i<1000; i++) { temp = i*2; }

2. **對象屬性訪問緩存**：
   ```javascript
   // 多次訪問時
   const len = arr.length;
   for (let i=0; i<len; i++) {}

結語

JS變量的正確使用需要理解： 1. 聲明方式的差異 2. 作用域規則 3. 類型轉換機制 4. 內存管理特性

掌握這些細節能幫助開發者寫出更健壯、可維護的JavaScript代碼。 “`

（全文約1100字，可根據需要調整具體內容細節）