文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript ES2020的功能怎么用

2023-06-27 10:38

关注

这篇文章主要介绍“JavaScript ES2020的功能怎么用”,在日常操作中,相信很多人在JavaScript ES2020的功能怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript ES2020的功能怎么用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

新功能:

动态导入

其中之一是我们可以使用async / await动态导入依赖项。这意味着我们不必先导入所有内容,并且仅在需要它们时才可以导入依赖项。结果,通过在运行时加载模块来提高应用程序的性能。

它如何提高性能?使用常规模块系统,我们在程序开始时静态导入模块。无论我们现在还是以后需要它们,我们都必须先导入它们。另外,在加载时会评估来自导入模块的所有代码。因此,它不必要地减慢了应用程序的速度。为什么?因为它会在执行代码之前下载导入的模块并评估每个模块的代码。

让我们来看一个例子。

if (calculations) {    const calculator = await import('./calculator.js');    const result = calculator.add(num1, num2);    console.log(result);}

在上面的代码片段中,您可以看到我们仅在要执行计算时才导入计算器模块。因此,我们不会通过在运行时之前加载所有代码来不必要地降低应用程序的速度。因此,动态导入是一个方便的补充。

空位合并运算符

“空值合并运算符(??)是一种逻辑运算符,当其左侧操作数为 null 或未定义时,将返回其右侧操作数,否则将返回其左侧操作数。”

基本上,Nullish合并运算符使我们可以检查值是否为 null 或未定义,并在这种情况下提供回退值。让我们看一个例子:

let score = 0;let pass = score ?? 60;console.log(pass);

在上面的代码段中,值为 pass0 。原因是 ?? 运算符不会将零强制为伪造的值。变量 pass 只得到 60 分配如果变量 score 是undefinednull

但是,双管道“ ||”之间有什么区别?和这个运算符?当使用双管道“ ||”时,它总是返回真实值,这可能会导致某些意外结果。当使用空值合并运算符时,我们可以更加严格,因此仅当该值为 null 或未定义时才允许使用默认值。

例如,假设我们有以下代码:

let score = 0;let pass = score || 60;console.log(pass);

在上面的示例中,使用时,值 0 被视为虚假值 || 。在上面的代码片段中,值 pass 是 60 ,这不是我们想要的。因此,双问号允许我们检查变量是否为空,这意味着变量是未定义还是为空。

Promise.allSettled

使用可选的链接运算符,我们可以从对象访问深度嵌套的属性。如果属性存在,则运算符返回其值。如果该属性不存在,则运算符返回 undefined 。

const person = { name: "Catalin Pit", employer: {  name: "Catalins Tech", }};console.log(person?.employer?.name);

上面的代码段说明了访问深度嵌套的对象属性的示例。但是,我们可以在数组和函数调用上使用它。在下面的代码段中,您可以看到我们检查数组是否存在,如果存在,则访问第三个值。此外,您还可以查看检查 API 是否存在某个函数,如果存在,则将其调用。

const allowedValues = [1, 5, 10, 13, 90, 111];console.log(allowedValues?.[2]);// functional callconst response = myAPI.getData?.();

总之,可选的链接运算符非常方便,它还有助于我们使代码更具可读性和简短性。

私有类变量

从现在开始,我们也可以在 JavaScript 中的类中创建私有变量。制作私有变量所需要做的就是在变量前面添加哈希符号。例如,#firstName 是一个私有变量,不能在类外部访问。

尝试在类外部调用该变量会导致 SyntaxError 。

class Person {  #firstName = "Catalin";  getFirstName()   {       console.log(this.#firstName)    }}const person1 = new Person();person1.getFirstName() // "Catalin"// Returns "undefined"console.log(person1.firstName); // Returns "Uncaught SyntaxError: Private field '#firstName' must be declared in an enclosing class"console.log(person1.#firstName);

在上面的代码中,您可以看到一个私有类变量在起作用。尝试 firstName 在类外访问变量,我们收到一个错误。因此,当我们不想在类外公开数据时,添加便很方便。

到此,关于“JavaScript ES2020的功能怎么用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯