4個你從未聽說過的強(qiáng)大JavaScript運(yùn)算符
null ?? 5 // => 53 ?? 5 // => 3
在為變量分配默認(rèn)值時，JavaScript 開發(fā)人員傳統(tǒng)上依賴于邏輯 OR 運(yùn)算符，就像這樣。
var prevMoney = 1var currMoney = 0var noAccount = nullvar futureMoney = -1function moneyAmount(money) {return money || `You currently do not own an account in the bank`}console.log(moneyAmount(prevMoney)) // => 1console.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
上面我們創(chuàng)建了一個函數(shù) moneyAmount 負(fù)責(zé)返回用戶的當(dāng)前余額。我們使用 || 運(yùn)算符來識別沒有帳戶的用戶。
但是，當(dāng)用戶沒有帳戶時，這意味著什么？將沒有帳戶視為空而不是 0 更準(zhǔn)確，因為銀行帳戶可以在沒有資金的情況下存在。
在上面的例子中， || 運(yùn)營商將 0 視為虛假值，因此，不會注冊我們的用戶擁有 0 美元的帳戶。讓我們通過使用空合并運(yùn)算符來解決這個問題。
var currMoney = 0var noAccount = nullfunction moneyAmount(money) {return money ?? `You currently do not own an account in the bank`}moneyAmount(currMoney) // => 0moneyAmount(noAccount) // => `You currently do not own an account in the bank`
回顧一下，?? 運(yùn)算符允許我們分配默認(rèn)值，同時，忽略 0 和空字符串等虛假值。
2、 ??= 運(yùn)算符
??= 也稱為邏輯空賦值運(yùn)算符，與我們之前學(xué)到的內(nèi)容密切相關(guān)。讓我們看看它們是如何結(jié)合在一起的。
var x = nullvar y = 5console.log(x ??= y) // => 5console.log(x = (x ?? y)) // => 5
如果當(dāng)前值為空或未定義，則此賦值運(yùn)算符只會分配一個新值。上面的例子強(qiáng)調(diào)了這個運(yùn)算符本質(zhì)上是空賦值的語法糖。接下來，讓我們看看這個運(yùn)算符與默認(rèn)參數(shù)有何不同。
function gameSettingsWithNullish(options) {options.gameSpeed ??= 1options.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 }
上述函數(shù)處理空值的方式有一個值得注意的區(qū)別。默認(rèn)參數(shù)將使用空參數(shù)覆蓋默認(rèn)值，空賦值運(yùn)算符不會。默認(rèn)參數(shù)和無效賦值都不會覆蓋 undefined 的值。
3、 ?. 運(yùn)算符
可選的鏈接運(yùn)算符 ?.，允許開發(fā)人員讀取深入嵌套在對象鏈中的屬性值，而無需在此過程中顯式驗證每個引用。當(dāng)引用為空時，表達(dá)式停止計算并返回 undefined 值。我們來看一個例子。
var travelPlans = {destination: 'DC',monday: {location: 'National Mall',budget: 200}};const tuesdayPlans = travelPlans.tuesday?.location;console.log(tuesdayPlans) // => undefined
現(xiàn)在，讓我們結(jié)合迄今為止所學(xué)的一切，并將星期二添加到我們的新旅行計劃中！
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 undefinedconsole.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
我們現(xiàn)在已經(jīng)創(chuàng)建了一個函數(shù)，該函數(shù)將計劃添加到當(dāng)前沒有 tuesday.location 嵌套屬性的對象中。我們還使用 nullish 運(yùn)算符來提供默認(rèn)值。
此函數(shù)將錯誤地接受像“0”這樣的值作為有效參數(shù)。這意味著我們的預(yù)算可以設(shè)置為零而不會出現(xiàn)任何錯誤。
4、 ? 運(yùn)算符
三元運(yùn)算符 ? 接受三個操作數(shù)：一個條件，一個在條件為真時執(zhí)行的表達(dá)式，一個在條件為假時執(zhí)行的表達(dá)式。讓我們看看它的實際效果。
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 有過一些了解，那么，你之前可能已經(jīng)見過三元運(yùn)算符。但是，你知道三元運(yùn)算符可以用于變量賦值嗎？
var budget = 0var transportion = (budget > 0) ? 'Train' : 'Walking'console.log(transportion) // => 'Walking'
我們甚至可以用它來復(fù)制無效賦值的行為。
var x = 6var x = (x !== null || x !== undefined) ? x : 3console.log(x) // => 6
現(xiàn)在讓我們通過創(chuàng)建一個函數(shù)來概括這種行為！
function nullishAssignment(x,y) {return (x == null || x == undefined) ? y : x}var x = nullishAssignment(null, 8) // => 8var y = nullishAssignment(4,8) // => 4
在結(jié)束之前，讓我們使用三元運(yùn)算符重構(gòu)上一個示例中的函數(shù)。
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;}
結(jié)論
我們現(xiàn)在已經(jīng)了解了這些運(yùn)算符可以完成些什么工作的基礎(chǔ)知識。如果你覺得在這些示例的基礎(chǔ)上有所啟發(fā)，請記得給我點(diǎn)個贊。
感謝你的閱讀。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
