你有没有花一个下午阅读Mozilla文档？如果是这样，你会发现网上有大量的JS资料，这让我们很容易忽略掉那些比较基础的JS操作符。这些运算符不常见但功能强大！它们在语法上看起来相似，但工作方式不同，因此请务必仔细阅读。1.??非空运算符在JS中，??运算符称为非空运算符。如果第一个参数不是null/undefined'，不要混淆），将返回第一个参数，否则返回第二个参数。例如null??5//=>53??5//=>3为变量设置默认值时，||以前常用逻辑或运算符，例如varprevMoney=1varcurrMoney=0varnoAccount=nullvarfutureMoney=-1functionmoneyAmount(money){returnmoney||`账户未开通`}console.log(moneyAmount(prevMoney))//=>1console.log(moneyAmount(currMoney))//=>账户未开通console.log(moneyAmount(noAccount))//=>账户未开通console.log(moneyAmount(futureMoney))//=>-1上面我们创建了函数moneyAmount，它返回当前用户余额。我们使用||运营商识别没有帐户的用户。但是，用户没有帐户意味着什么？将无帐户视为空而不是0更准确，因为银行帐户可能没有（或负）货币。在上面的示例中，||运算符将0视为错误值，不应包括用户拥有$0的帐户。让我们使用??非空运算符解决这个问题：varcurrMoney=0varnoAccount=nullfunctionmoneyAmount(money){returnmoney??`账户未开通`}moneyAmount(currMoney)//=>0moneyAmount(noAccount)//=>`账户未开通`??简而言之，运算符允许我们指定默认值，同时忽略错误值，例如0和空字符串。2.??=空赋值运算符??=又称为空赋值运算符，与上述非空运算符有关。看他们之间的联系：varx=nullvary=5console.log(x??=y)//=>5console.log(x=(x??y))//=>5只有当值为null或者此赋值运算符仅在未定义时才赋值。上面的例子强调了这个运算符本质上是空赋值的语法糖（译者注，类似的语法糖：a=a+b可以写成a+=b）。接下来我们看一下这个操作符和默认参数的区别（译者注，默认参数是ES6引入的新语法，只有当函数参数未定义时，才为其设置一个默认值）：functiongameSettingsWithNullish(options){options.gameSpeed??=1options.gameDiff??='easy'returnoptions}functiongameSettingsWithDefaultParams(gameSpeed=1,gameDiff='easy'){return{gameSpeed,gameDiff}}gameSettingsWithNullish({gameSpeed:null,gameDiff:null})//=>{gameSpeed:1,gameDiff:'easy'}gameSettingsWithDefaultParams(undefined,null)//=>{gameSpeed:null,gameDiff:null}上述函数处理空值的方式有一个值得注意的区别。default参数会用空参数覆盖默认值（译者注，这里的空参数只能是undefined），而空赋值运算符则不会。默认参数和空赋值都不会覆盖未定义的值。更多：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment3。？。链式判断算子链式判断算子?。允许开发人员读取对象链中深度嵌套的属性值，而无需验证每个引用。当引用为null时，表达式停止计算并返回undefined。例如：vartravelPlans={destination:'DC',monday:{location:'NationalMall',budget:200}}console.log(travelPlans.tuesday?.location)//=>undefined现在，结合我们刚刚学到的得到起床并将星期二添加到您的旅行计划中！functionaddPlansWhenUndefined(plans,location,budget){if(plans.tuesday?.location==undefined){varnewPlans={plans,tuesday:{location:location??"park",budget:budget??200},}}else{newPlans??=plans;//只有当newPlans未定义时，console.log("Arrangedplan")}returnnewPlans}//译者注，对象travelPlans的初始值，来自上面的例子varnewPlans=addPlansWhenUndefined(travelPlans"福特剧院",null)console.log(newPlans)//=>{plans://{destination:'DC',//monday:{location:'CountryShoppingCenter',budget:200}},//tuesday:{location:'FordTheater',budget:200}}newPlans=addPlansWhenUndefined(newPlans,null,null)//logs=>arrangedplan//returns=>newPlansobject上面的例子包含了我们学过的所有操作符so远的。我们现在已经创建了一个函数，将时间表添加到当前没有嵌套属性的对象tuesday.location中。我们还使用非空运算符来提供默认值。此函数将错误地接受像“0”这样的值作为有效参数。这意味着可以将预算设置为零而不会出现任何错误。4.?：三元运算符?：也称为条件运算符，它接受三个操作数：条件？条件为真时执行的表达式:条件为假时执行的表达式。实际效果：functioncheckCharge(charge){return(charge>0)?'Available':'rechargerequired'}console.log(checkCharge(20))//=>Availableconsole.log(checkCharge(0))//=>需要充值如果你写过JS，你可能见过三元运算符。但是，您知道三元运算符可以用于变量赋值吗？varbudget=0vartransportion=（预算>0）？'train':'walk'console.log(transportion)//=>'walk'我们甚至可以用它来实现空赋值行为：varx=6varx=(x!==null||x!==undefined)?x:3console.log(x)//=>6让我们通过创建一个函数来概括这个操作：functionnullishAssignment(x,y){return(x==null||x==undefined)?y:x}nullishAssignment(null,8)//=>8nullishAssignment(4,8)//=>结束前的4，让我们使用三元运算符重构前面例子中的函数：functionaddPlansWhenUndefined(plans,location,budget){varnewPlans=plans.tuesday?.location===undefined?{plans,tuesday:{location:location???"park",budget:budget??200},}:console.log("Plansarescheduled");newPlans??=plans;returnnewPlans;}结束语我们现在已经学会了如何使用这些运算符，更多关于它们的运算符知识在这里。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators（译者注：本文前三个算子为ES2020新特性，生产环境请勿直接使用，可以使用webpack+babel进行转义解决浏览器兼容问题）
