目錄

1.JavaScript 中的?==?和?===?運算符

2.||?(邏輯或) 運算符

與 ES6 默認參數的區別

與????(空值合并運算符) 的區別?

3.?.（可選鏈）運算符

(1). 安全訪問深層嵌套屬性

(2). 安全調用可能不存在的函數

(3). 安全訪問數組元素

4.展開運算符 (...)

（1）. 數組展開

（2）. 對象展開 (ES2018)

注意事項

淺拷貝特性：

5.解構賦值

（1）數組解構

（2）對象解構

---

1.JavaScript 中的?==?和?===?運算符

== 運算符會在比較前進行類型轉換，然后再比較值。

5 == '5'      // true (字符串'5'轉換為數字5)
true == 1     // true (true轉換為1)
false == 0    // true (false轉換為0)
null == undefined // true
'0' == false  // true (兩邊都轉換為數字0)
[] == false   // true (空數組轉換為0，false轉換為0)
'' == 0       // true (空字符串轉換為0)

=== 運算符不會進行類型轉換，如果類型不同直接返回 false。

5 === '5'     // false (數字不等于字符串)
true === 1    // false (布爾值不等于數字)
false === 0   // false (布爾值不等于數字)
null === undefined // false
'0' === false // false (字符串不等于布爾值)
[] === false  // false (數組不等于布爾值)
'' === 0      // false (字符串不等于數字)

2.||?(邏輯或) 運算符

JavaScript 的 || 運算符實際上返回的是第一個"真值"(truthy)的操作數，或者最后一個操作數（如果所有操作數都是"假值"(falsy)）。

在 JavaScript 中，以下值被認為是 假值(falsy)：

• false
• 0
• ""?(空字符串)
• null
• undefined
• NaN

  function greet(name) {name = name || "訪客";console.log(`你好, ${name}!`);
  }greet("張三");  // 輸出: 你好, 張三!
  greet();       // 輸出: 你好, 訪客!

  與 ES6 默認參數的區別

ES6 的函數默認參數提供了更精確的默認值設置方式：

function greet(name = "訪客") {console.log(`你好, ${name}!`);
}greet(undefined);  // 輸出: 你好, 訪客!
greet(null);       // 輸出: 你好, null!

?|| 會對所有假值使用默認值，而 ES6 默認參數只在參數為 undefined 時使用默認值。

與????(空值合并運算符) 的區別?

ES2020 引入了 ?? 運算符，它只在左側為 null 或 undefined 時返回右側值：?

0 || "默認值"    // "默認值" (因為0是假值)
0 ?? "默認值"    // 0 (因為0不是null或undefined)"" || "默認值"   // "默認值"
"" ?? "默認值"   // ""false || "默認值" // "默認值"
false ?? "默認值" // false

3.?.（可選鏈）運算符

?. 是 JavaScript 的可選鏈運算符（Optional Chaining Operator），于 ES2020 引入。它允許你安全地訪問嵌套對象屬性或調用函數，而無需驗證每個引用是否有效。當 ?. 左側為 null/undefined 時，右側不會執行。可選鏈運算符極大簡化了深層屬性訪問的代碼，使代碼更簡潔且更安全，是處理不確定結構數據的理想選擇。

obj?.prop       // 訪問屬性
obj?.[expr]     // 通過表達式訪問屬性
func?.(args)    // 調用函數

(1). 安全訪問深層嵌套屬性

const street = user?.address?.street;
// 如果 user 或 address 是 null/undefined，返回 undefined 而不會報錯

(2). 安全調用可能不存在的函數

// 傳統方式
const result = obj.method && obj.method();// 可選鏈方式
const result = obj.method?.();

(3). 安全訪問數組元素

const firstItem = arr?.[0];
// 等同于 (arr !== null && arr !== undefined) ? arr[0] : undefined

4.展開運算符 (...)

展開運算符 (Spread Operator) 是 ES6 引入的重要特性，用三個點 (...) 表示。它可以將可迭代對象（如數組、字符串或對象）"展開"為單個元素。

（1）. 數組展開

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]// 等同于
const arr2 = arr1.concat([4, 5]);

（2）. 對象展開 (ES2018)

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }// 注意：后面的屬性會覆蓋前面的
const obj3 = { ...obj1, b: 99 }; // { a: 1, b: 99 }

注意事項

淺拷貝特性：

const nestedObj = { a: { b: 1 } };
const copy = { ...nestedObj };
copy.a.b = 2; // 也會修改原始對象的 a.b

5.解構賦值

解構賦值(Destructuring Assignment)是ES6引入的一種語法，可以讓你從數組或對象中提取數據，并賦值給變量，代碼更簡潔易讀。

（1）數組解構

// 基本解構
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2// 跳過某些元素
const [first, , third] = [1, 2, 3];
console.log(first); // 1
console.log(third); // 3

（2）對象解構

const person = { name: 'Alice', age: 25 };// 基本解構
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age);  // 25// 不同變量名
const { name: personName, age: personAge } = person;
console.log(personName); // 'Alice'
console.log(personAge);  // 25