这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战
标准新增
ES2020的标准增加了:
export-namespace-from导出命名空间nullish-coalescing-operator即空值合并运算符proposal-optional-chaining即可选链操作符 这篇文章我们就来了解一下ES2020的三个新增标准。
导出命名空间
在这篇文章中:ES2015之模块,我们已经提到过相关的用法,exports存在两种导出方式:
- 命名导出(每个模块包含任意数量)
- 默认导出(每个模块包含一个)
这里我们主要的是命名导出,如下:
export const name="也笑"
我们还可以引用另一个模块进行导出,如已有slifree.js模块,如下:
export const name="也笑"
export const enName="slifree"
我们在其他的文件other.js作为导出,可以这样写:
export * as slifree from "slifree";
这样我们在别的文件引入other.js的时候就可以获取到slifree,也就是slifree.js导出的值。
空值合并运算符
空值合并操作符( ?? )是一个逻辑操作符,当左侧的操作数为 null或者 undefined操作数,使用如下:
let name=undefined??'slifree'; // slifree
let count=0 ?? 10 ; // 10
可选链操作符
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。当链接的值不存在的时候,会返回undefined,而不会报错,使用如下:
const user = {
name: '也笑',
info: {
height: '183cm'
}
};
const age = user.otherinfo?.age;
console.log(age); // undefined
如果我们直接使用user.otherinfo.age,肯定是会报错的,但是使用它则不会报错。
注意事项
我们需要注意的是:??与||是不一样的,||是左侧为false的时候执行右侧;而??是左侧为null或者 undefined的时候执行右侧。
总结
在实际开发中,我们经常面临深层次的对象数据,每次使用它的时候我们都要去判断当前属性是否存在,这让我们的代码结构很臃肿,有了可选链操作符,我们就可以省去这些烦恼了。
如果你想了解ES的其他特性,请移步到 ES2015+碎片化学习,每天都在向前走一步,这是所有文章的目录入口。