es2020空位合并运算符、可选链接运算符

时间: 2019-12-16阅读: 374标签: 运算符

空位合并运算符 ??

由于 JavaScript 的类型时动态的,在分配变量时,我们不得不去记住哪些值会被判断为真,哪些会被判断为假。当我们在创建一个对象时,通常会初始化属性为假的值,比如一个空字符串 或者是 0。设置默认值就会变得很烦人,因为它会覆盖有效值,看下如下 demo,你就会发现这么处理真的很烦人:

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18~~~~

上述例子中,可能结果并不是我们想要的,我们想名字为空或者 0 岁也是合理的,应该不被代替,我们可以用 ?? 运算符替换掉 || 运算符,因为 ?? 运算符的类型检测会更严格一点,它只会把 null 和 undefined 判断为 false。

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0


可选链接运算符

与空位合并运算符类似,JavaScript 在处理虚假值时,可能无法按照我们的意愿进行操作。当属性值未定义时,我们可以返回一个默认值,但是如果属性的路径未被定义呢?

答案是,可以通过在点符号前添加问号,我们可以将属性路径的任何部分设置为可选,以便操作。

let person = {};

console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
console.log(person?.profile?.name ?? "Anonymous");  // Anonymous
console.log(person?.profile?.age ?? 18);  // 18
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8222

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广