转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文出处:https://blog.bitsrc.io/es2020-has-been-finalized-here-is-what-im-excited-about-414959bc2f7f

最近这几年,随着JavaScript及前端领域的持续迅猛发展,尤其是在2015年ES6发布后,这个发展的进程也变得越来越快起来。许多新功能也将计划包含在ES2020版本中。

前段时间,我们得到了关于ES2020已经基本定稿的功能列表,这个功能列表可以说大部分都会出现在ES2020新版本发布列表中。而在这其中的部分功能我认为将备受期待,因为作为一个开发者,在这些功能违背发布之前,在编码时遇到一些难题需要我们自己去解决。那么,让我们看看这些功能都是什么吧。

可选链接

就我个人而言,我认为这是ES2020最令人期待的功能之一,这个功能使你可以安全地访问对象的深层嵌套属性,而不必检查每个属性是否存在。那么,Talk is cheap. Show me the code,让我们看看实际在代码层面有什么改变吧。

在使用可选链接之前的代码:

const user = {
firstName:"Joseph",
lastName:"Kuruvilla",
age:38,
address:{
number:"239",
street:"Ludwig Lane",
city:"Chennai",
zip:"600028",
prop1:{
prop2:{
prop3:{
prop4:{
value:'sample'
}
}
}
}
}
} if(user && user.address){
console.log(user.address.zip); //600028
} if(user && user.address && user.address.prop1 && user.address.prop1.prop2 && user.address.prop1.prop2.prop3 && user.address.prop1.prop2.prop3.prop4){
console.log(user.address.prop1.prop2.prop3.prop4.value);
} //访问不存在的属性
console.log(user.address.prop102.po);
//Error

  

如上所示,在访问属性前,你必须检查所访问层级中的属性是否存在,以防止出现Cannot read property 'po' of undefined错误。而随着嵌套级别的增加,你手动检查的属性数量也将随之增加。这意味着一旦我们漏过一项,将会在程序中引发undefined或null对象错误,导致应用出现问题。

可选链接功能出现后

而随着可选链接功能的出现,我们的工作将会变得比较轻松,通过使用可选链接运算符“?.”我们可以访问深度嵌套的对象,而不必检查其是否未定义或null对象。

让我们看看它是如何使用的:

const user = {
firstName:"Joseph",
lastName:"Kuruvilla",
age:38,
address:{
number:"239",
street:"Ludwig Lane",
city:"Chennai",
zip:"600028",
prop1:{
prop2:{
prop3:{
prop4:{
value:'sample'
}
}
}
}
}
}console.log(user?.address?.zip);
//600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
//sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined

  

ES2020通过引入一个 ?. 操作符成功减少了许多代码。

空值合并(Nullish Coalescing)

当我第一次听说这个功能时,我认为这是另一个令人值得期待的功能,因为我就曾因为在大量重复手动实现该功能时,非常期待有类似这个功能的出现。

空值合并可以让你检查nullish值而不是falsey值。nullish值是指null或undefined,falsey值是指空字符串,数字0, undefined,null,false,NaN,等值。虽然看起来好像这两个值没什么区别,但实际上差异却很大。

在空值合并之前

我最近在做一个项目,其中需要增加暗夜模式的切换功能。我必须检查输入是否为 true或者false。如果用户没有设置任何值,默认它应该为true。下面是我如何在空值合并出现前实现它的代码。

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference
}
return true
} getUserDarkModePreference(darkModePreference1)
// true getUserDarkModePreference(darkModePreference2)
// false getUserDarkModePreference(darkModePreference3)
// true getUserDarkModePreference(darkModePreference4)
// true

  

在空值合并出现后

在使用空值合并后,你所要做的就是使用??操作符。不再需要 if 语句。

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
}
getUserDarkModePreference(darkModePreference1)
// true getUserDarkModePreference(darkModePreference2)
// false getUserDarkModePreference(darkModePreference3)
// true getUserDarkModePreference(darkModePreference4)
// true

这里的逻辑是,如果变量darkModePreference包含一个空值,那么就把true赋给它,使用这个特性的代码简单易懂。

动态导入

此功能将帮助你的应用更高效地运行。动态导入允许你实时地在应用中以模块的形式按需导入JS文件。在ES2020之前,无论你是否使用了该模块,都应该提前导入它。

例如,假设我们需要添加一个功能来下载一个pdf格式的文件。

让我们看看如何在动态导入之前和之后如何实现这一点有什么异同。

动态导入之前

在实际项目中,下载pdf的功能不会被所有的网站访客使用。但是,不管我们的访问者是否使用它,它都需要导入。这意味着这个pdf模块也会在页面加载时被载入。

import { exportAsPdf } from './export-as-pdf.js'

const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', exportAsPdf);

  

这种开销可以通过使用延迟加载模块来减少。可以通过代码分离(code-splitting)来实现,代码分离已经可以通过webpack或其他模块打包工具来实现。

但是在ES2020中我们以原生的方式来实现这个功能,不再需要模块打包工具等其他方式减少开销了。

动态导入之后

const exportPdfButton = document.querySelector('.exportPdfBtn');

exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
// handle the error if the module fails to load
})
})

  

如上面的代码中所看到的那样,现在可以按需加载所使用的模块,从而减少应用的开销和页面加载时间。

Promise.allSettled

如果你有这样一个场景,一旦所有的promise都完成了,就必须执行一个任务,你会使用Promise.all()方法。这个方法有一个缺点。当任何一个promise被拒绝时,都会抛出一个错误。这意味着你的代码不会等到你所有的promise都完成。

这可能不是你想要的。如果你的需求是不关心它们的结果,只需将它们全部运行,你可以使用新的Promise.allSettled()方法。这种方法只有在你所有的promise都执行完成之后才会调用。

使用 promise.all

const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))]; Promise.all(PromiseArray)
.then(data => console.log('all resolved! here are the resolve values:', data))
.catch(err => console.log('got rejected! reason:', err)) //got rejected! reason: null

  

如上面的代码,当一个promise失败时,会引发错误。

使用 promise.allSettled

const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))]; Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err)); //[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

  

即使有些promise被拒绝,Promise.allSettled仍然会在所有promise执行完成后为你返回结果。

其他也很令人期待的功能

BigInt

允许你使用比Javascript中允许的最大值大的数字。这个数字是pow(2,53)-1。不过这并不是向后兼容的,因为传统的浮点数标准(IEEE 754)不支持这种大小的数字。

String.matchAll

matchAll() 是一个和正则表达式相关的方法。它返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。这个方法添加到了 String 原型里。

globalThis

globalThis是对全局对象的引用,与环境无关。在浏览器中,全局对象是window对象。在Node环境中,全局对象是global对象,在web worker中是self。

总结

本文中有些功能是我以个人角度总结梳理的,如果缺少了哪个功能或有我理解有误的地方,欢迎大家在评论中指出,谢谢!

ES2020的这些新功能令人期待的更多相关文章

  1. 2020即将到来!DevExpress Winforms开发有哪些新功能值得期待?

    下载DevExpress v19.2完整版 DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.DevExpress Winf ...

  2. Java 14 令人期待的 5 大新特性,打包工具终于要来了

    随着新的 Java 发布生命周期的到来,新版本预计将于 2020 年 3 月发布,本文将对其中的 5 个主要特性作些概述. Java 13刚刚发布给开发人员使用不久,最新版本的JDK于2019年9月发 ...

  3. Vue 3.0 中令人激动的新功能:Composition API

    正如你所期望的那样,Vue 3带来了很多令人兴奋的新功能.值得庆幸的是,Vue团队主要是在当前API的基础上引入了一些补充和改进,而不是进行重大更改,所以已经了解Vue 2的人应该很快就会对新的语法感 ...

  4. WSS存储服务器(Windows Storage Server) 2012新功能解析

    虽然最近一段时间有关微软的新闻大多数集中在Windows 8以及Surface平板设备身上,但数周之前Windows Server 2012新版本中所包含的Windows Storage Server ...

  5. 面试题思考:Java 8 / Java 7 为我们提供了什么新功能

    Java 7 的7个新特性 1.对集合类的语言支持: 2.自动资源管理: 3.改进的通用实例创建类型推断: 4.数字字面量下划线支持: 5.switch中使用string: 6.二进制字面量: 7.简 ...

  6. PyCharm 2019.3发布,增加了哪些新功能呢?

    Python的IDE(Integrated Development Environment 集成开发环境)非常多,如:VS Code.Sublime.NotePad.Python自带编辑器IDLE.J ...

  7. SQL Server2016 新功能实时查询统计信息

    SQL Server2016 新功能实时查询统计信息 很多时候有这样的场景,开发抱怨DBA没有调优好数据库,DBA抱怨开发写的程序代码差,因此,DBA和开发都成为了死对头,无法真正排查问题. DBA只 ...

  8. 一个新人如何学习在大型系统中添加新功能和Debug

    文章背景: 今年七月份正式入职,公司主营ERP软件,楼主所在的组主要负责二次开发,使用的语言是Java. 什么叫二次开发呢?ERP软件的客户都是企业.而这些企业之间的情况都有所不同,一套标准版本的企业 ...

  9. 探索Windows 8.1 Update 新功能点

    Windows 8.1 Update 已经使用一段时间了,整体感觉比Windows 8.1 方便了不少,尤其是对鼠标用户来说更是进行了很多优化. 应用磁贴尺寸 在应用磁贴点击鼠标右键,有小.中.宽.大 ...

随机推荐

  1. AWS—Xshell工具远程登录EC2虚拟机

    一.创建AWS账户(已有AWS账号的请跳过) 访问 https://amazonaws-china.com/cn/,点击创建AWS账户,根据提示填写个人相关信息,创建AWS账户. 二.创建EC2虚拟机 ...

  2. 君荣 TS--8200 消费机显示说明

     Err 001——不在消费时段内Err 002——非本系统卡Err 003——余额不足Err 004——级别未开放Err 005——卡已挂失Err 006——有效期未生效Err 007——已过有效期 ...

  3. 使用CURL和火车头软件采集搜狐文章

    直接上代码: //参数1:访问的URL,参数2:post数据(不填则为GET),参数3:提交的$cookies,参数4:是否返回$cookies function curl_request($url, ...

  4. CSS布局之Flex布局

    Flex布局,可以简便.完整.响应式地实现各种页面布局. 浏览器支持:得到所有浏览器的支持.(注:Flex布局将成为未来布局的首选方案)   一. Flex布局的概念 Flex是Flexible Bo ...

  5. Spring:扫描组件

    <context:component-scan>:扫描组件,对设置的包下面的类进行扫描,会讲加上注解的类作为Spring的组件进行加载 组件:指Spring中管理的bean ​ 作为Spr ...

  6. 利用 Powershell 编写简单的浏览器脚本

    生活中有很多事情是低效益,重复性.比如每天上某些网站,先登录再签到打卡,比如每隔一段时间清理回收站的文件等等.一个成熟的软件工程师应该想到用软件解决他. 对于这些简单的小任务,一般用脚本实现.比如Py ...

  7. 【MySQL】究竟什么是MVCC呢?

    MVCC是什么呢? MVCC其实就是一个多版本并发控制,即多个不同版本的数据实现并发控制的技术,其基本思想是为每次事务生成一个新版本的数据, 在读数据时选择不同版本的数据即可以实现对事务结果的完整性读 ...

  8. 基于JQuery的简单富文本编辑器

    利用jQuery实现最简单的编辑器 我试了很多种方法,目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "fa ...

  9. Spring Boot 把 Maven 干掉了,拥抱 Gradle!

    在国外某社交网站上有一个关于迁移 Spring Boot 迁移 Maven 至 Gradle 的帖子: 该贴子上也有很多人质疑:Maven 用的好好的,为什么要迁移至 Gradle? 虽然该贴子只是说 ...

  10. 多语言工作者の十日冲刺<4/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--第四天(05.03) 作业正文 ...