你不知道这很容易忽略一些不常见的JavaScript操作符。然而，仅仅因为这些运算符不常见并不意味着它们不强大！它们在语法上看起来都很相似，但请务必仔细阅读它们，因为它们以不同的方式工作。让我们开始吧！1.??运算符在JavaScript中，??运算符被称为无效合并运算符。如果第一个参数不为空/未定义，此运算符将返回第一个参数，否则将返回第二个参数。让我们看一个例子。null??5//=>53??5//=>3在为变量赋默认值时，JavaScript开发人员传统上依赖于逻辑OR运算符，如下所示。varprevMoney=1varcurrMoney=0varnoAccount=nullvarfutureMoney=-1functionmoneyAmount(money){returnmoney||`Youcurrentlydinotownanaccountinthebank`}console.log(moneyAmount(prevMoney))//=>1console.log(moneyAmount(currMoney))//=>`Youcurrentlydinotownanaccountinthebank`}console.log(moneyAmount(noAccount))//=>`Youcurrentlydonetownanaccountinthebank`console.log(moneyAmount(futureMoney))//=>-1上面我们创建了一个函数moneyAmount，负责返回用户当前的余额。我们使用了||运营商识别没有帐户的用户。当money为0或null时，会返回当前银行没有该账户，但实际上该账户可能为0。上例中的||运算符将0视为错误值，因此它无法识别我们的用户拥有一个包含$0的帐户。让我们使用nullish合并运算符来解决这个问题。varcurrMoney=0varnoAccount=nullfunctionmoneyAmount(money){returnmoney??`Youcurrentlydonetownanaccountinthebank`}moneyAmount(currMoney)//=>0moneyAmount(noAccount)//=>`Youcurrentlydonetownanaccountinthebank`总而言之，??运算符允许我们分配默认值，同时忽略False值，如0和空字符串。2.??=运算符??=也称为逻辑空赋值运算符，与我们之前学习的内容密切相关。让我们看看它们是如何连接的。varx=nullvary=5console.log(x??=y)//=>5console.log(x=(x??y))//=>5这个赋值运算符只在当前值为null或undefined时起作用A将分配新的值。上面的例子强调了这个运算符本质上是空赋值的语法糖。接下来，让我们看看这个运算符与默认参数有何不同。functiongameSettingsWithNullish(选项){options.gameSpeed??=1options.gameDiff??='easy'returnoptions}functiongameSettingsWithDefaultParams(gameSpeed=1,gameDiff='easy'){return{gameSpeed,gameDiff}}gameSettingsWithNullish({iffngame,Sgamed:null})//=>{gameSpeed:1,gameDiff:'easy'}gameSettingsWithDefaultParams(null,null)//=>{gameSpeed:null,gameDiff:null}上述函数处理空值的方式有显着差异不同的。默认参数将使用空参数覆盖默认值，空值赋值运算符不会。默认参数和无效赋值都不会覆盖未定义的值。3.？operator可选的链接运算符?。允许开发人员读取深度嵌套在对象链中的属性值，而无需显式验证沿途的每个引用。当引用为null时，表达式停止计算并返回undefined，让我们看一个例子。vartravelPlans={destination:'DC',monday:{location:'NationalMall',budget:200}};consttuesdayPlans=travelPlans.tuesday?.location;console.log(tuesdayPlans)//=>undefined现在，让我们到目前为止结合我们迄今为止所学的一切，让我们将星期二添加到我们的新旅行计划中！functionaddPlansWhenUndefined(plans,location,budget){if(plans.tuesday?.location===undefined){varnewPlans={plans,tuesday:{location:location???"Park",budget:budget??200},};}else{newPlans??=plans;//willonlyoverrideifnewPlansisundefinedconsole.log("Planshavealreadybeenadded!");}returnnewPlans;}varnewPlans=addPlansWhenUndefined(travelPlans,"FordTheatre",null);console.log(newPlans)//=>{plans://{destination:'DC',//monday:{location:'NationalMall',budget:200}},//tuesday:{location:'FordTheatre',budget:200}}newPlans=addPlansWhenUndefined(newPlans,null,null)//logs=>Planshavealreadybeenadded!//returns=>newPlansobject我们现在已经创建了一个函数，可以将PlansAdded添加到当前没有嵌套属性的对象中。地点。我们还使用nullish运算符提供默认值。此函数将接受诸如“0”之类的假值作为有效参数。这意味着我们的预算可以设置为零而不会出现任何错误。4.？运算符三元运算符?具有三个操作数：条件、条件为真时执行的表达式和条件为假时执行的表达式。让我们看看它是如何工作的。functioncheckCharge(charge){return(charge>0)?'Readyforuse':'Needstocharge'}console.log(checkCharge(20))//=>'Readyforuse'console.log(checkCharge(0))//=>'Needstocharge'如果你花时间研究过JavaScript，你可能以前见过三元运算符。但是，您知道三元运算符可以用于变量赋值吗？varbudget=0vartransportion=(budget>0)?'Train':'Walking'console.log(transportion)//=>'Walking'我们甚至可以用它来复制无效赋值的行为。varx=6varx=(x!==null||x!==undefined)?x:3console.log(x)//=>6现在让我们通过创建一个函数来概括这个行为！functionnullishAssignment(x,y){return(x==null||x==undefined)?y:x}varx=nullishAssignment(null,8)//=>8vary=nullishAssignment(4,8)//=>4结束前，让我们重构使用三元运算符的前一个示例中的函数。functionaddPlansWhenUndefined(plans,location,budget){varnewPlans=plans.tuesday?.location===undefined?{...plans,tuesday:{location:location???"Park",budget:budget??200},}:console.log("Planshavealreadybeenadded!");newPlans??=plans;returnnewPlans;}总结我们现在了解了这些运算符背后的基本原理。如果您受到启发来构建这些示例，请在此处了解有关这些运算符的更多信息。干杯!原文地址：https://javascript.plainenglish.io/4-powerful-javascript-operators-youve-never-heard-of-487df37114ad
