每日js小技巧1.0

ES2020 空值合并操作符?? 和 可选链Optional Chaining操作符?.

1.空值合并操作符
针对这一问题,ES2020引入了新的操作符——空值合并操作符(??),很简单,类似于或操作符 || ,它只判断 x ?? y,当x为null 或者 undefined的时候,返回y;否则返回x。

let a = 0 ?? 1的时候,a就为0let b = "" ?? "暂无值",b值为""。避免了尴尬的if(x === null || typeOf(x) === "undefined")这种拉跨写法。

2.可选链操作符
这里就要感谢一下ES2020新增的另一个操作符——可选链操作符(?.),其作用就是为了避免直接取对象值时造成的引用无效问题。它与 . 操作符其实一样,只是当引用为空的时候不会抛出错误,而是将结果返回为undefined,比较友好。

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

所以上面的例子就可以变为:

let result = resp?.data?.item;

问题原因分析:

问题描述 SyntaxError: Unexpected token ‘?’
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47

原因这是2020新增操作符,可能不兼容


解决方案:

现在ts 3.7支持这俩操作符,想在vue2.0里用啊,要安装babel插件。

@babel/plugin-proposal-optional-chaining

@babel/plugin-proposal-nullish-coalescing-operator

然后在babel的配置文件里加:

{ “plugins”:

	[  "@babel/plugin-proposal-nullish-coalescing-operator",  
	   "@babel/plugin-proposal-optional-chaining"  
	]

}

可能会碰到启动项目时报错说babel/core找不到,这里要保证babel loader版本号是8.x并且babel core版本号是7.x,如果babel-core还是6.x依旧不能用,需要升级babel:

npx babel-upgrade --write

然后再启动会说babel loader不知道应该加载core的6.x还是7.x,所以更新一下环境:

cnpm i babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

顺便一提,在ES2021里,还增加了一些赋值运算符:&&=、||= 和 ??=

1、&&= :相当于 x=x && y,即if (x) { x = y };

2、||= :相当于 x = x || y,即if (!x) { x = y };

3、??= :相当于x = x ?? y,即 if (x==null || x == undefined) { x = y };

微信扫码订阅
UP更新不错过~
关注
  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值