?前端面試題庫 （面試必備）?? ? ? ? ? ?推薦：★★★★★

地址：前端面試題庫

實踐中需要給某個變量賦值時，若數據來源不可控，通常會給它設置一個默認值（就像空對象模式一樣）。JavaScript中有很多語法支持設置這樣的默認值，比如函數參數默認值，解構賦值默認值等。但本文主要討論手動賦值時的3默認值設置方式：

1. 使用條件判斷設置默認值，如：let result = input || {}
2. 使用空判斷運算符，如：let result = input ?? {}
3. 配合typeof判斷類型設置默認值，如：let result = typeof(input) !== 'undefined' ? input : {}

?

||運算符

??這種形式主要利用了?Boolean()?類型轉換以及?||?運算符的短路特性，其也可改寫成三目運算符（?:）或If-else語句形式；受布爾類型轉換限制，所有的?假值都會被認為未賦值。

// 當 input 為：undefined、null、''、0、NaN、false 時會被忽略
let input;
// 即 result 值不會為：undefined、null、''、0、NaN、false
let result;result = input || {};// 變體（1）：三目運算符形式
result = input ? input : {};
// 變體（2）：If-else 語句
if(input) {result = input;
} else {result = {};
}// 若只涉及一個變量，還可簡寫
obj ||= {};

??運算符

??由于?||?會忽略所有假值，TC39在ES2020的提案里提出????運算符，僅當左側運算數為?null?或?undefined?時，才會計算右側表達式。多配合??.?可選鏈式運算符一起使用。

// 當 input 為：undefined、null 時會被忽略
let input;
// 即 result 值不會為：undefined、null；可以是：''、0、NaN、false
let result;result = input ?? {}; // 若只涉及一個變量，還可簡寫
obj ??= {};

typeof運算符

??還有場景，只有在輸入為?undefined?時才認為是無效輸入，即?null?被認為是有效輸入。此時可使用?typeof?運算符判斷輸入類型是否為?undefined?來區分；若已明確輸入變量已經聲明，則可將變量和?undefined?比較，通過其是否相等來判斷。

// 當 input 為：undefined 時會被忽略
let input;
// 即 result 值不會為：undefined；可以是：null、''、0、NaN、false
let result;result = (typeof(input) !== 'undefined') ? input : {};// 變體：直接和 undefined 判斷，需注意若input未聲明會報錯
result = (input !== undefined) ? input : {};

總結

??在面向對象編程過程中，大多場景變量是引用對象的，這些情況下????配合??.?會更符合現代編程語言的寫法，也是官方推薦使用的。

const EMPTY_WALLET = {money: 0
}function consume(user = null, goods = null) {if (null === (goods?.price ?? null)) {return false;}let wallet = user?.info?.wallet ?? EMPTY_WALLET;if (wallet.money < goods.price) {return false;}wallet.money -= goods.price;return true;
}

前端面試題庫 （面試必備）?? ? ? ? ? ?推薦：★★★★★

地址：前端面試題庫

?