JavaScript 備忘錄

這篇備忘錄記錄了 JavaScript。

資訊

JavaScript 是一種高階、解釋型、多範式的程式語言。它最常用於網頁瀏覽器，為網頁添加互動性，但隨著 Node.js 的出現，它也已成為服務器端開發的重要語言。

1. 變量宣告

JavaScript 有三種主要方式宣告變量：var、let 和 const。

• var：

  • 函數作用域 (Function-scoped)。
  • 存在變量提升 (Hoisting)，但只提升宣告，不提升賦值。
  • 可以重複宣告和重新賦值。

  var x = 10;
  function func() {
      var y = 20;
  }
  console.log(x); // 10
  // console.log(y); // ReferenceError

• let：

  • 塊級作用域 (Block-scoped)。
  • 存在變量提升，但處於「暫時性死區」(Temporal Dead Zone, TDZ)。
  • 不能重複宣告，但可以重新賦值。

  let x = 10;
  if (true) {
      let y = 20;
  }
  console.log(x); // 10
  // console.log(y); // ReferenceError

• const：

  • 塊級作用域。
  • 存在變量提升，處於 TDZ。
  • 不能重複宣告，也不能重新賦值（對於原始類型）。對於物件和陣列，可以修改其內部屬性，但不能重新賦值整個變量。

  const x = 10;
  // x = 20; // TypeError: Assignment to constant variable.
  
  const obj = { a: 1 };
  obj.a = 2; // 允許
  // obj = { b: 3 }; // TypeError

2. 數據類型

JavaScript 有八種數據類型：

• 原始類型 (Primitives)：

  • String：文本數據 ("hello", 'world')
  • Number：數字 (整數或浮點數) (10, 3.14)
  • Boolean：布爾值 (true, false)
  • Null：表示空值或不存在的值 (null)
  • Undefined：表示未定義的值（變量已宣告但未賦值） (undefined)
  • Symbol (ES6)：唯一且不可變的值。
  • BigInt (ES2020)：表示大於 2^53 - 1 的整數。

• 物件類型 (Object)：

  • Object：所有其他數據類型的基礎。
    • 包括普通物件 ({ key: value })
    • 陣列 ([1, 2, 3])
    • 函數 (function() {})
    • 日期 (new Date())
    • 正則表達式 (/abc/)

3. 運算符

比較運算符

• ==：寬鬆相等（會進行類型轉換）
• ===：嚴格相等（不進行類型轉換）
• !=：寬鬆不相等
• !==：嚴格不相等
• >, <, >=, <=

邏輯運算符

• &&：邏輯與
• ||：邏輯或
• !：邏輯非

其他運算符

• 算術運算符：+, -, *, /, %, ** (冪運算)
• 賦值運算符：=, +=, -=, *= 等
• 條件 (三元) 運算符：condition ? expr1 : expr2
• 展開運算符 (Spread operator) (...)：用於展開可迭代對象。

  const arr1 = [1, 2];
  const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
  const obj1 = { a: 1, b: 2 };
  const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

• 其餘參數 (Rest parameters) (...)：用於收集函數參數。

  function sum(a, b, ...rest) {
    console.log(rest); // 收集除了 a 和 b 之外的所有參數
    return a + b + rest.reduce((acc, val) => acc + val, 0);
  }
  sum(1, 2, 3, 4); // rest = [3, 4]

4. 函數

函數宣告

function greet(name) {
  return `Hello, ${name}!`;
}

函數表達式

const greet = function(name) {
  return `Hello, ${name}!`;
};

箭頭函數 (Arrow Functions, ES6)

• 更簡潔的語法。
• 沒有自己的 this，arguments，super 和 new.target。它們從父作用域繼承 this。
• 不能用作構造函數。

const greet = (name) => `Hello, ${name}!`;

// 多行語句
const add = (a, b) => {
  const result = a + b;
  return result;
};

5. 模塊 (ES Modules, ES6)

使用 import 和 export 關鍵字來組織程式碼。

導出 (Export)

// math.js
export const add = (a, b) => a + b;
export function subtract(a, b) {
  return a - b;
}
export default class Calculator { /* ... */ }

導入 (Import)

// app.js
import { add, subtract } from './math.js';
import Calculator from './math.js';

console.log(add(5, 3));
const calc = new Calculator();

總結

JavaScript 是一個功能強大且不斷發展的語言。從變量宣告到函數和模塊，掌握這些基本概念是成為一名熟練的 JavaScript 開發者的基礎。隨著 ES6+ 的發展，許多新的特性和語法糖也極大地提高了開發效率。