ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ECMAScript 2020 的新特性

2021-04-23 11:57:38  阅读:148  来源: 互联网

标签:city const undefined JavaScript 特性 运算符 2020 ECMAScript


ECMAScript 2020 的新特性

 

JavaScript 是很受欢迎的前端开发语言之一,而 ECMAScript 在推进 JavaScript 发展上有着不可磨灭的贡献。2015 年 6 月正式发布的 ECMAScript 6.0 是 JavaScript 语言的下一代标准,它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ECMAScript 2020 即将到来,让我们先来看看有哪些新功能吧。

ECMAScript 和 JavaScript

JavaScript 作为前端最受欢迎的语言之一,每次更新新特性或者性能优化都会引发前端开发者的关注。那么 ES 和 JS 有什么区别呢?这个问题要回溯到 1996 年 11 月,JavaScript 的创造者 Netscape 公司希望能将这门语言制定成国际标准,于是将 JavaScript 提交至国际标准化组织 ECMA。次年,ECMA 发布了 262 号标准文件的第一版,规定了浏览器脚本语言的标准,并将这门语言称为 ECMAScript,这个版本就是 1.0 版。

 

可以说,ECMAScript 这一标准从始至终就是针对 JavaScript 语言制定的,那为什么不直接叫做 JavaScript 呢?主要有两点原因:

  • 首先是版权原因,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,而且 JavaScript 也早已被 Netscape 公司注册为商标。

  • 其次,称之为 ECMAScript 也是希望体现这门语言的规范是由 ECMA 制定,而不是 Netscape,这样也能更好地保证这门语言的开放性和中立性。

综上所述,ECMAScript 和 JavaScript 的关系就很好理清了,ES 是 JS 的规范,而 JS 是 ES 的一种实现方法。

 

ES 2020 的新功能

动态 import ()

静态 import 语法最早于 ES 2015 引入,用于导入由另一个模块导出的变量。该语法称为静态语法,因为开发者无法在运行时动态导入模块,但静态导入可以在编译时进行优化。此外,还有一个类似函数的动态 import(),它不需要依赖 type="module" 的 script 标签。如果合理地使用动态导入,则可以通过按需加载依赖项减少分发包的大小。

新的动态 import 语法看起来像一个函数,但并不是函数,不过动态 import 语法也支持 await。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

空值合并运算符

大家都知道,使用短循环设置默认值的方法有一个小缺陷,由于它实际上不是在检查空值,而是在检查结果的虚假性,因此它会破坏值为 false 或 0 的结果,因为两者均被视为虚假性的结果。ES2020 引入了一个新的运算符 ??,该运算符的工作原理与短循环类似,但仅当初始值为 null 或 undefined 时才读取为运算符右边的值。

const nullValue = null;

const emptyText = ""; // falsy

const someNumber = 42;

const valA = nullValue ?? "default for A";

const valB = emptyText ?? "default for B";

const valC = someNumber ?? 0;

console.log(valA); // "default for A"

console.log(valB); // "" (as the empty string is not null or undefined)

console.log(valC); // 42

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

可选链接

新的 optional chaining 运算符旨在在处理嵌套对象和检查可能的代码时使代码更短 undefineds。可选的链接运算符 ?. 允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。运算符的功能与 .chaining 运算符相似,不同之处在于,如果引用为空(null 或 undefined),则表达式会短路,返回值为 undefined。当与函数调用一起使用时,如果给定的函数不存在,则返回未定义的值。

const user = { name: "John" };

// Fails with `Uncaught TypeError: Cannot read property 'city' of undefined`

const city = user.address.city;

// Works but verbose

let city = "Not Set";

if (user.address !== undefined && user.address !== null) {

  city = user.address.city;

}

// Works and concise but requires a 3rd party library

const city = _.get(user, "address.city", "Not Set");

// 

标签:city,const,undefined,JavaScript,特性,运算符,2020,ECMAScript
来源: https://blog.csdn.net/weixin_45747731/article/details/116049201

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有