浅析3个生僻但强大的JavaScript操作符

　　你有没有花一个下午的时间来阅读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"