你有沒有花一個下午的時間來閱讀Mozilla的文件？如果你有，你就會很清楚，網上有很多關於JavaScript的資訊。這使得人們很容易忽視一些比較生僻的JavaScript操作符。然而，這些操作符不常見並不意味著它們不強大! 它們各自在語法上看起來很相似，但一定要讀懂每一個，因為它們的工作方式不同。就讓我們一探究竟吧!

1、?? 操作符

　　在JavaScript中，??運算子被稱為nullish coalescing運算子(零合併操作符)。如果第一個引數不是null/undefined，這個運算子將返回第一個引數，否則，它將返回第二個引數。我們來看一個例子。

null ?? 5   // 5
 

3 ?? 5     // 3
0 ?? 5     // 0

// 與或的區別
0 || 5   // 5
null || 5  // 5

　　當為一個變數分配預設值時，JavaScript開發人員傳統上依賴邏輯OR運算子，比如這樣。

'' ?? 5    // ""
'' || 5    // 5

　　在上面的例子中，|| 操作符將 0及空 視為一個假值，因此會返回後面的預設值。

　　但是實際情況下，我們還是需要僅僅當前面為 null或undefined 的時候，才取後面的值；當為 0或空 時，仍取前面的值。這個時候，我們使用nullish coalescing操作符就可以很好的解決這個問題。

　　概括地說，??運算子允許我們分配預設值，同時忽略0和空字串等錯誤值。

2、??= 操作符

　　??=又被稱為邏輯空值賦值運算子，與我們之前學習的內容密切相關。我們來看看它們是如何聯絡在一起的。

var x = null;
var y = 5;
x ??= y;
x
// 5

var x = 3;
var y = 5;
x ??= y;
x
// 3

x ??= y
// 即
x = (x ?? y)

　　這個賦值操作符只有在當前值為 null 或 未定義undefined 的情況下才會賦一個新的值。上面的例子強調了這個操作符本質上是空值賦值的語法糖。接下來，讓我們看看這個操作符與預設引數有何不同。

function gameSettingsWithNullish (options) {
    options.gameSpeed 
 
??= 1
    options.gameDiff ??= 'easy'
    return options
}

function gameSettingsWithDefaultParams (gameSpeed = 1, gameDiff = 'easy') {
    return {gameSpeed, gameDiff}
}

gameSettingsWithNullish({gameSpeed:null, gameSpeed:null})
// {gameSpeed: 1, gameDiff: "easy"}
gameSettingsWithNullish({})
// {gameSpeed: 1, gameDiff: "easy"}


gameSettingsWithDefaultParams(null, null)
// {gameSpeed: null, gameDiff: null}
gameSettingsWithDefaultParams()
// {gameSpeed: 1, gameDiff: "easy"}
gameSettingsWithDefaultParams(undefined, undefined)
// {gameSpeed: 1, gameDiff: "easy"}
gameSettingsWithDefaultParams(0, 0)
// {gameSpeed: 0, gameDiff: 0}

3、?. 操作符

　　可選的鏈式操作符 ?. 允許開發人員讀取深嵌在物件鏈中的屬性值，而不必顯式驗證每個引用。當一個引用為空時，表示式停止計算並返回一個未定義的值。讓我們來看看一個例子。

var travelPlans = {
  destination:'DC',
  monday:{
    location:'National Mall',
    budget:200
  }
}
var tuesdayPlans = travelPlans.tuesday.location;
// 報錯：VM4480:8 Uncaught TypeError: Cannot read property 'location' of undefined
    at <anonymous>:8:40

// 為防止報錯，我們通常這樣寫
var tuesdayPlans = travelPlans.tuesday && travelPlans.tuesday.location;
// undefined

　　那麼現在我們就可以這樣寫

var tuesdayPlans = travelPlans.tuesday?.location;  // undefined

var travelPlans = {
  destination:'DC',
  monday:{
    location:'National Mall',
    budget:200
  },
  tuesday:{
    location:'test'
  }
}
travelPlans.tuesday?.location // "test"