ES10的13个新特性示例(小结)


Posted in Javascript onSeptember 23, 2019

ES10的13个新特性示例(小结)

介绍

ES10是与2019年相对应的ECMAScript版本。这个版本中的新功能没有ES6(2015)中的那么多。但是,也不乏一些有用的功能。

本文在简单的代码示例中介绍了ES10提供的功能。这样,您无需复杂的解释即可快速了解新功能。

当然,需要具备JavaScript的基础知识才能完全理解所介绍的新功能。

ES2019中的JavaScript新功能包括:

  • Array#{flat,flatMap}
  • Object.fromEntries
  • String#{trimStart,trimEnd}
  • Symbol#description
  • try { } catch {} // 可选的错误参数绑定
  • JSON ⊂ ECMAScript
  • 格式良好的 JSON.stringify
  • 稳定的排序 Array#sort
  • 新版 Function#toString
  • 新增 BigInt 原始类型 (stage 3).
  • 动态引入模块(stage 3).
  • 标准的 globalThis 对象 (stage 3).
  • ES10 Class: private, static & public (stage 3).

Array.flat() & Array.flatMap()

两个新的数组方法:

Array.flat() 方法创建一个新数组,所有子数组元素都以递归方式合并到该数组中,直至达到指定深度。

Array.flatMap() 方法首先使用map函数转换每个元素,然后将结果展平为新数组。它与map()后再调用深度为1的flat() 效果相同,但是flatMap()将两者合并为一种方法,效率更高。

ES10的13个新特性示例(小结)

Object.fromEntries()

把键值对数组为元素的二维数组转换为一个对象。

ES10的13个新特性示例(小结)

String.protype.matchAll()

matchAll() 方法返回所有与正则表达式匹配字符串的结果的迭代器,包括捕获组。

ES10的13个新特性示例(小结)

String.trimStart() & String.trimEnd()

有两种新的String方法可从字符串中删除空格:

trimStart() 方法从字符串的开头删除空格。
trimEnd() 方法从字符串末尾删除空格。

ES10的13个新特性示例(小结)

Symbol.Description

当创建符号时,可以提供一个字符串作为描述。在ES10中,有一个获取描述的访问器。

ES10的13个新特性示例(小结)

可选的 Catch 参数变量

过去,try / catch语句中的catch子句需要一个变量。现在,它允许开发人员使用try / catch而不创建未使用的error变量绑定。

ES10的13个新特性示例(小结)

JSON⊂ECMAScript

在ES10之前的版本中,不接受非转义的行分隔符U+2028和段落分隔符U+2029。

U+2028是段落分隔符。
U+2029是行分隔符。

ES10的13个新特性示例(小结)

格式良好的 JSON.stringify()

JSON.stringify() 可能返回U+D800和U+DFFF之间的字符,来作为没有等效UTF-8字符的值。但是,JSON格式需要UTF-8编码。解决方案是,将未配对的替代代码点表示为JSON转义序列,而不是将其作为单个UTF-16代码单元返回。

ES10的13个新特性示例(小结)

Array.prototype.sort()

V8的先前实现,对包含10个以上项的数组使用了不稳定的快速排序算法。

一种稳定的排序算法是,当两个具有相同键的对象在排序输出中出现的顺序,与未排序输入中出现的顺序相同。

ES10的13个新特性示例(小结)

新版 Function.toString()

toString() 方法返回一个表示函数源代码的字符串。在ES6中,当在函数上调用toString时,它将根据ECMAScript引擎返回该函数的字符串表示形式。如果可能,它将返回源代码,否则-一个标准化的占位符。

ES10的13个新特性示例(小结)

BigInt — 任意精度的整数

BigInt是第7个原始类型,它是一个任意精度的整数。而不仅仅是在9007199254740992处的最大值。

ES10的13个新特性示例(小结)

动态引入

动态import()返回所请求模块的Promise。因此,可以使用async/await 将导入的模块分配给变量。

ES10的13个新特性示例(小结)

ES10的13个新特性示例(小结)

标准 globalThis 对象

全局 this 在ES10之前尚未标准化。在生产代码中,您可以通过编写下边代码来“标准化”它:

ES10的13个新特性示例(小结)

ES10 Class: private, static & public 成员变量,函数

现在,新的语法字符#(哈希标签)用于直接在类中定义变量,函数,getter和setter,以及构造函数和类方法。

ES10的13个新特性示例(小结)

总结

自2015年ES6出现以来,这个语言就一直处于高速发展的状态。在这篇文章中,我们回顾了ES10(2019)中出现的功能,并介绍了一些在ES11(2020)中将保持稳定的功能,因为它们处于状态3,并且可能最终会在下一版中实现标准化。

尽管这些功能中的许多功能对于Web应用程序的开发可能不是必需的,但是它们提供了通过技巧或大量冗长代码才能实现的可能性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 #Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 #Javascript
JS随机密码生成算法
Sep 23 #Javascript
详解mpvue开发微信小程序基础知识
Sep 23 #Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 #Javascript
layui树形菜单动态遍历的例子
Sep 23 #Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
pm2启动ssr失败的解决方法
2019/06/29 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
js实现坦克移动小游戏
2019/10/28 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
python机器学习之神经网络(二)
2017/12/20 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
python实现无边框进度条的实例代码
2020/12/30 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
2014年感恩节活动策划方案
2014/10/06 职场文书
英文感谢信范文
2015/01/21 职场文书