4個你從未聽說過的強大JavaScript運算符

英文 | ​​https://javascript.plainenglish.io/4-powerful-javascript-operat​​ors-youve-never-heard-of-487df37114ad

​

翻譯 | 小愛

你有沒有花一個下午閱讀 Mozilla 文檔？如果你有的話，你就會知道網上有很多關于 JavaScript 的資訊。這使得很容易忽略不尋常的 JavaScript 運算符。

然而，僅僅因為這些運算符不常見并不意味着它們不強大！它們在文法上看起來很相似，但一定要閱讀它們，因為它們以不同的方式工作。

讓我們潛入吧！

1、 ?? 運算符

在 JavaScript 中 ?? 運算符稱為空合并運算符。如果它不是空/未定義，則此運算符将傳回第一個參數，否則，它将傳回第二個參數。讓我們看一個例子。

null ?? 5 // => 5
3 ?? 5 // => 3      

在為變量配置設定預設值時，JavaScript 開發人員傳統上依賴于邏輯 OR 運算符，就像這樣。

var prevMoney = 1
var currMoney = 0
var noAccount = null
var futureMoney = -1


function moneyAmount(money) {
  return money || `You currently do not own an account in the bank`
}


console.log(moneyAmount(prevMoney)) // => 1
console.log(moneyAmount(currMoney)) // => `You currently do not own an account in the bank`
console.log(moneyAmount(noAccount)) // => `You currently do not own an account in the bank`
console.log(moneyAmount(futureMoney))//  => -1      

上面我們建立了一個函數 moneyAmount 負責傳回使用者的目前餘額。我們使用 || 運算符來識别沒有帳戶的使用者。 

但是，當使用者沒有帳戶時，這意​味着什麼？将沒有帳戶視為空而不是 0 更準确，因為銀行帳戶可以在沒有資金的情況下存在。 

在上面的例子中， || 營運商将 0 視為虛假值，是以，不會注冊我們的使用者擁有 0 美元的帳戶。讓我們通過使用空合并運算符來解決這個問題。

var currMoney = 0
var noAccount = null


function moneyAmount(money) {
  return money ?? `You currently do not own an account in the bank`
}
 moneyAmount(currMoney) // => 0
 moneyAmount(noAccount) // => `You currently do not own an account in the bank`      

回顧一下，?? 運算符允許我們配置設定預設值，同時，忽略 0 和空字元串等虛假值。

2、 ??= 運算符

??= 也稱為邏輯空指派運算符，與我們之前學到的内容密切相關。讓我們看看它們是如何結合在一起的。

var x = null
var y = 5


console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5      

如果目前值為空或未定義，則此指派運算符隻會配置設定一個新值。上面的例子強調了這個運算符本質上是空指派的文法糖。接下來，讓我們看看這個運算符與預設參數有何不同。

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




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


gameSettingsWithNullish({gameSpeed: null, gameDiff: null}) // => { gameSpeed: 1, gameDiff: 'easy' }
gameSettingsWithDefaultParams(null, null) // => { gameSpeed: null, gameDiff: null }      

上述函數處理空值的方式有一個值得注意的差別。預設參數将使用空參數覆寫預設值，空指派運算符不會。預設參數和無效指派都不會覆寫 undefined 的值。 

3、 ?.  運算符

可選的連結運算符 ?.，允許開發人員讀取深入嵌套在對象鍊中的屬性值，而無需在此過程中顯式驗證每個引用。當引用為空時，表達式停止計算并傳回 undefined 值。我們來看一個例子。

var travelPlans  = {
  destination: 'DC',
  monday: {
    location: 'National Mall',
    budget: 200
  }
};




const tuesdayPlans = travelPlans.tuesday?.location;
console.log(tuesdayPlans) // => undefined      

現在，讓我們結合迄今為止所學的一切，并将星期二添加到我們的新旅行計劃中！

function addPlansWhenUndefined(plans, location, budget) {
  if (plans.tuesday?.location == undefined) {
    var newPlans = {
      plans,
      tuesday: { location: location ?? "Park", budget: budget ?? 200 },
    };
  } else {
    newPlans ??= plans; //will only override if newPlans is undefined
    console.log("Plans have already been added!");
  }
  return newPlans;
}


var newPlans = addPlansWhenUndefined(travelPlans, "Ford Theatre", null);
console.log(newPlans) // => { plans: 
                  //{ destination: 'DC',
                  // monday: { location: 'National Mall', budget: 200 } },
                  // tuesday: { location: 'Ford Theatre', budget: 200 } }


newPlans = addPlansWhenUndefined(newPlans, null, null) // logs => Plans have already been added! 
                                                      // returns => newPlans object      

我們現在已經建立了一個函數，該函數将計劃添加到目前沒有 tuesday.location 嵌套屬性的對象中。我們還使用 nullish 運算符來提供預設值。 

此函數将錯誤地接受像“0”這樣的值作為有效參數。這意味着我們的預算可以設定為零而不會出現任何錯誤。

4、 ?  運算符

三元運算符 ? 接受三個操作數：一個條件，一個在條件為真時執行的表達式，一個在條件為假時執行的表達式。讓我們看看它的實際效果。

function checkCharge(charge) {
return (charge > 0) ? 'Ready for use' : 'Needs to charge' 
}


console.log(checkCharge(20)) // => 'Ready for use'
console.log(checkCharge(0)) // => 'Needs to charge'      

如果你對 JavaScript 有過一些了解，那麼，你之前可能已經見過三元運算符。但是，你知道三元運算符可以用于變量指派嗎？

var budget = 0
var transportion = (budget > 0) ? 'Train' : 'Walking' 
console.log(transportion) // => 'Walking'      

我們甚至可以用它來複制無效指派的行為。

var x = 6
var x = (x !== null || x !== undefined) ? x : 3
console.log(x) // => 6      

現在讓我們通過建立一個函數來概括這種行為！

function nullishAssignment(x,y) {
  return (x == null || x == undefined) ? y : x   
}


var x = nullishAssignment(null, 8) // => 8
var y = nullishAssignment(4,8) // => 4      

在結束之前，讓我們使用三元運算符重構上一個示例中的函數。

function addPlansWhenUndefined(plans, location, budget) {
  var newPlans =
    plans.tuesday?.location == undefined
      ? {
          ...plans,
          tuesday: { location: location ?? "Park", budget: budget ?? 200 },
        }
      : console.log("Plans have already been added!");
  newPlans ??= plans;
  return newPlans;
}      

結論

我們現在已經了解了這些運算符可以完成些什麼工作的基礎知識。如果你覺得在這些示例的基礎上有所啟發，請記得給我點個贊。 

感謝你的閱讀。

學習更多技能

請點選下方公衆号