JavaScript中的賦值運算符是編程中最基本的組成部分之一，它們能簡化代碼並提高效率。

一、基本賦值運算符 (=)

使用場景：給變量初始化或更新值

// 初始化變量
let count = 10; // 將10賦給count

// 更新變量值
let price = 50;
price = 75; // 更新價格為75

// 鏈式賦值（從右向左執行）
let a, b, c;
a = b = c = 100; // a, b, c都為100
console.log(a, b, c); // 輸出: 100 100 100

二、複合賦值運算符

1. 加法賦值 (+=)

使用場景：需要將一個值添加到現有變量上

let total = 20;
total += 15; // 等價於 total = total + 15
console.log(total); // 輸出: 35

// 常見應用場景：計數器
let counter = 0;
counter += 1; // 計數器加1
console.log(counter); // 輸出: 1

2. 減法賦值 (-=)

使用場景：需要從現有變量中減去一個值

let balance = 100;
balance -= 30; // 等價於 balance = balance - 30
console.log(balance); // 輸出: 70

// 常見應用場景：購物車中減少商品數量
let cartQuantity = 5;
cartQuantity -= 1; // 減少一個商品
console.log(cartQuantity); // 輸出: 4

3. 乘法賦值 (*=)

使用場景：需要將現有變量乘以一個值

let price = 10;
price *= 2; // 等價於 price = price * 2
console.log(price); // 輸出: 20

// 常見應用場景：計算折扣價格
let originalPrice = 100;
let discountRate = 0.9; // 9折
let discountedPrice = originalPrice;
discountedPrice *= discountRate; // 應用折扣
console.log(discountedPrice); // 輸出: 90

4. 除法賦值 (/=)

使用場景：需要將現有變量除以一個值

let totalAmount = 100;
totalAmount /= 4; // 等價於 totalAmount = totalAmount / 4
console.log(totalAmount); // 輸出: 25

// 常見應用場景：平均分配
let total = 100;
let people = 4;
let perPerson = total;
perPerson /= people; // 每人分得
console.log(perPerson); // 輸出: 25

5. 取餘賦值 (%=)

使用場景：需要獲取現有變量除以一個值的餘數

let remainder = 19;
remainder %= 4; // 等價於 remainder = remainder % 4
console.log(remainder); // 輸出: 3

// 常見應用場景：判斷奇偶數
let number = 15;
if (number %= 2 === 0) {
  console.log("偶數");
} else {
  console.log("奇數"); // 輸出: 奇數
}

6. 冪賦值 (**=)

使用場景：需要將現有變量提升到指定冪次

let area = 5;
area **= 2; // 等價於 area = area ** 2
console.log(area); // 輸出: 25

// 常見應用場景：計算面積、體積
let side = 3;
let squareArea = side;
squareArea **= 2; // 計算正方形面積
console.log(squareArea); // 輸出: 9

三、位運算複合賦值

1. 按位與賦值 (&=)

使用場景：對二進制位進行按位與操作

let flags = 5;  // 二進制 0101
flags &= 3;     // 二進制 0011
console.log(flags); // 輸出: 1 (二進制 0001)

2. 按位或賦值 (|=)

使用場景：對二進制位進行按位或操作

let options = 5;  // 二進制 0101
options |= 3;     // 二進制 0011
console.log(options); // 輸出: 7 (二進制 0111)

3. 按位異或賦值 (^=)

使用場景：對二進制位進行按位異或操作

let value = 5;  // 二進制 0101
value ^= 6;     // 二進制 0110
console.log(value); // 輸出: 3 (二進制 0011)

四、鏈式賦值

使用場景：同時為多個變量賦相同值

let a, b, c;
a = b = c = 10; // a, b, c都為10
console.log(a, b, c); // 輸出: 10 10 10

// 也可以用於設置默認值
let user = { name: 'John' };
user.age = user.active = user.status = 1;
console.log(user); // { name: 'John', age: 1, active: 1, status: 1 }

五、解構賦值 (ES6)

使用場景：從數組或對象中提取值

// 數組解構
const [name, age] = ['Alice', 30];
console.log(name, age); // 輸出: Alice 30

// 對象解構
const person = { name: 'Bob', age: 25, city: 'New York' };
const { name, age } = person;
console.log(name, age); // 輸出: Bob 25

// 與複合賦值結合
let { x, y } = { x: 10, y: 20 };
x += 5; // x=15
y *= 2; // y=40
console.log(x, y); // 輸出: 15 40

六、實際應用場景

1. 計數器實現

let counter = 0;

// 使用複合賦值簡化計數
counter += 1; // 計數器加1
console.log(counter); // 輸出: 1

counter += 1; // 再加1
console.log(counter); // 輸出: 2

2. 累加器模式

let total = 0;

// 累加數組元素
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
  total += num;
});
console.log(total); // 輸出: 15

3. 狀態管理

// 使用複合賦值管理狀態
let isClicked = false;
isClicked = !isClicked; // 用邏輯運算符切換狀態
console.log(isClicked); // 輸出: true

// 用複合賦值簡化
isClicked = !isClicked; // 再次切換
console.log(isClicked); // 輸出: false

小貼士

  1. 賦值表達式返回值：賦值表達式返回被賦的值，這使得鏈式賦值成為可能。
let result = (a = 10); // a=10, result=10
  1. 避免重複聲明：使用let或const時，禁止重複聲明變量。
let x = 5;
let x = 10; // 會報錯: SyntaxError
  1. 常量賦值限制：const聲明的常量必須初始化且不可重新賦值。
const PI = 3.14;
PI = 3; // 會報錯: TypeError