【CuteJavaScript】ES2019 新特性汇总
最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~
另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。
1. 可选的 catch 绑定
1.1 介绍
在 ECMAScript2019 最新提案中,支持我们在使用 try catch
错误异常处理时,选择性的给 catch
传入参数。
即我们可以不传入 catch
参数。
正常使用 try catch
:
try {
// todo
} catch (err){
console.log('err:',err)
}
在 ES10 中可以这么使用:
try {
// todo
} catch {
// todo
}
1.2 使用场景
当我们不需要对 chtch
返回的错误信息进行处理时,比如:我们对于一些数据处理,经常会出现格式报错,但是我们并不关心这个错误,我们只需要继续处理,或重新请求数据等。
这种情况,我们就可以使用这个新特性,当然,还是需要根据实际情况考虑。
2. JSON.superset
2.1 介绍
- 来源背景:
由于在 ES2019 之前不支持转义行分隔符 (\u2028
) 和段落分隔符 (\u2029
) 字符,并且在解析过程中会报错: SyntaxError: Invalid or unexpected token
。
const LS = "";
const PS = eval("'\u2029'");// SyntaxError: Invalid or unexpected token
- 解决方案:
JSON 语法由** ECMA-404** 定义并由 RFC 7159 永久修复,允许行分隔符 (\u2028
) 和段落分隔符 (\u2029
) 字符,直接出现在字符串中。
2.2 使用
在 ES10 中,我们就可以直接使用 eval("'\u2029'");
而不会再提示错误。
3. Symbol.prototype.description
3.1 介绍
在 ES6 中引入 Symbol 这个基本数据类型,可以实现一些数据内省等高级功能。
这次 ES10 中,为 Symbol 类型增加 Symbol.prototype.description
的一个访问器属性,用来获取 Symbol
类型数据的描述信息(description)。
3.2 使用
MDN 上的案例介绍:
console.log(Symbol('pingan8787').description);
// expected output: "pingan8787"
console.log(Symbol.iterator.description);
// expected output: "Symbol.iterator"
console.log(Symbol.for('leo').description);
// expected output: "leo"
console.log(Symbol('pingan8787').description + ' and leo!');
// expected output: "pingan8787 and leo!"
另外我们也可以这么使用:
let pingan = Symbol('pingan8787').description;
console.log(pingan === 'pingan8787'); // true
4. Function.prototype.toString
4.1 介绍
在 ES10 之前,我们对一个函数调用 toString()
方法,返回的结果中会将注释信息去除。
在 ES10 之后,函数再调用 toString()
方法,将准确返回原有内容,包括空格和注释等:
let pingan8787 = function(){
// do something
console.log('leo')
}
pingan8787.toString();
/**
"function(){
// do something
console.log('leo')
}"
*/
5. Object.fromEntries
5.1 介绍
Object.fromEntries
是 ES10 中新的静态方法,用于将键值对列表转换为对象。
Object.fromEntries()
方法接收一个键值对的列表参数,并返回一个带有这些键值对的新对象。
这个迭代参数应该是一个能够实现 @iterator
方法的的对象,返回一个迭代器对象。它生成一个具有两个元素的类数组的对象,第一个元素是将用作属性键的值,第二个元素是与该属性键关联的值。
Object.fromEntries()
是 Object.entries
的反转。
5.2 使用
Object.entries
和Object.fromEntries()
互转
let leo = { name: 'pingan8787', age: 10};
let arr = Object.entries(leo);
console.log(arr);// [["name", "pingan8787"],["age", 10]]
let obj = Object.fromEntries(arr);
console.log(obj);// {name: "pingan8787", age: 10}
Map
转化为Object
const map = new Map([ ['name', 'pingan8787'], ['age', 10] ]);
const obj = Object.fromEntries(map);
console.log(obj); // {name: "pingan8787", age: 10}
Array
转化为Object
const arr = [ ['name', 'pingan8787'], ['age', 10] ];
const obj = Object.fromEntries(arr);
console.log(obj); // {name: "pingan8787", age: 10}
6. 更友好的 JSON.stringify
6.1 介绍
更友好的 JSON.stringify
,对于一些超出范围的 Unicode 字符串,为其输出转义序列,使其成为有效 Unicode 字符串。
6.2 使用
// Non-BMP characters still serialize to surrogate pairs.
JSON.stringify('?')
// → '"?"'
JSON.stringify('\uD834\uDF06')
// → '"?"'
// Unpaired surrogate code units will serialize to escape sequences.
JSON.stringify('\uDF06\uD834')
// → '"\\udf06\\ud834"'
JSON.stringify('\uDEAD')
// → '"\\udead"'
7. String.prototype.{trimStart,trimEnd}
7.1 String.prototype.trimStart
trimStart()
方法从字符串的开头删除空格,返回一个新字符串,表示从其开头(左端)剥离空格的调用字符串,不会直接修改原字符串本身。
trimLeft()
是此方法的别名。
let pingan8787 = ' Hello pingan8787! ';
console.log(pingan8787); // " Hello pingan8787! ";
console.log(pingan8787.length); // 23;
console.log(pingan8787.trimStart()); // "Hello pingan8787! ";
console.log(pingan8787.trimStart().length); // 20;
7.2 String.prototype.trimEnd
trimEnd()
方法从一个字符串的右端移除空白字符,返回一个新字符串,表示从其(右)端剥去空白的调用字符串,不会直接修改原字符串本身。
trimRight()
是此方法的别名。
let pingan8787 = ' Hello pingan8787! ';
console.log(pingan8787); // " Hello pingan8787! ";
console.log(pingan8787.length); // 23;
console.log(pingan8787.trimEnd()); // " Hello pingan8787!";
console.log(pingan8787.trimEnd().length); // 20;
8. Array.prototype.{flat,flatMap}
在 ES10 之前,我们要将一个数组打平,由于官方没有对应 API,我们可能需要 lodash
活着手写循环去操作。
8.1 Array.prototype.flat
在 ES10 中,官方新增一个 Array.prototype.flat
方法,将数组第一层数据打平,也仅限第一层。如果我们需要将多层递归,则需要显式传入参数:
[1,2,3,[1,2,[3, [4]]]].flat(2);
// [1, 2, 3, 1, 2, 3, [4]]
8.2 Array.prototype.flatMap
在 ES10 中,官方还增加了 Array.prototype.flatMap
方法,其实就是 flat
和 map
一起组合操作:
[1,3,5].map(x => [x * x]); // [[1],[9],[25]]
[1,3,5].flatMap(x => [x * x]); // [1,9,25]
参考文章:
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
ES小册 | js.pingan8787.com |
微信公众号
【CuteJavaScript】ES2019 新特性汇总的更多相关文章
- 【ES】338- ECMAScirpt 2019 新特性汇总
点击上方"前端自习课"关注,学习起来~ 最近在做的一个活动,大家都可以参与: 送 1600 元超大现金红包啦,走过路过不要错过哦 ~ 最近 ECMAScript2019,最新提案完 ...
- 【转】Spark-Sql版本升级对应的新特性汇总
Spark-Sql版本升级对应的新特性汇总 SparkSQL的前身是Shark.由于Shark自身的不完善,2014年6月1日Reynold Xin宣布:停止对Shark的开发.SparkSQL抛弃原 ...
- iOS8 针对开发者所拥有的新特性汇总如下
iOS8 针对开发者所拥有的新特性汇总如下 1.支持第三方键盘 2.自带网页翻译功能(即在线翻译) 3.指纹识别功能开放:第三方软件可以调用 4.Safari浏览器可直接添加新的插件. 5.可以把一个 ...
- ES2019新特性的学习
前言 前端技术更新的实在是太快了,各种框架百花齐放,随着NodeJs不断的兴起,各种构建工具也是层出不穷,这不,前两周尤雨溪开源了Vue.js3.0源码之后,很多大佬早已把源码剖析皮都不剩了:昨天No ...
- 21、前端知识点--html5和css3新特性汇总
跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...
- Swift3新特性汇总
之前 Apple 在 WWDC 上已将 Swift 3 整合进了 Xcode 8 beta 中,而本月苹果发布了 Swift 3 的正式版.这也是自 2015 年底Apple开源Swift之后,首个发 ...
- iOS6、7、8、9新特性汇总和适配说明
iOS6新特性 一.关于内存警告 ios6中废除了viewDidUnload,viewWillUnload这两个系统回调,收到内存警告时在didReceiveMemoryWarning中进行相关的处理 ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- ES 2015/6 新特性汇总
ES 2015/6 新特性汇总 箭头函数 箭头函数,通过 => 语法实现的函数简写形式,C#/JAVA8/CoffeeScript 中都有类似语法.与函数不同,箭头函数与其执行下文环境共享同一个 ...
随机推荐
- hdu 1325 Is It A Tree? (树、node = edge + 1、入度 <= 1、空树)
Is It A Tree?Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- 使用不同的C++支持库的模块混合开发时,引发异常展开不正常,抛异常竟引出一个SIGSEGV
如果你使用gcc对一部分模块进行了GNUMake的编译,这些编译出动态库使用在Gradle编译框架下的项目.那么就有可能出现题目中的情况,使用不同的C++支持库的模块混合开发时,引发异常展开不正常. ...
- Activity生命周期理解
在Android应用程序运行时,Activity的活动状态由Android以Activity栈的形式管理,当前活动的Activity位于栈顶.随着应用程序之间的切换.关闭等,每个Activity都有可 ...
- ReentreantLock:重入锁
ReentreantLock:重入锁 参考:https://www.cnblogs.com/nullzx/p/4968674.html 一). ReentrantLock与synchronized的区 ...
- svn文件被锁不能提交的解决办法
记录工作中遇到的问题,分享出来: 前端时间在提交项目到svn遇到一个问题, 提交的时候提示:文件已经锁定!如下图: 原因是我之前提交的时候不小心中途停了,导致文件被锁,然后也没在意那么多, 趁着今天有 ...
- 部署helm服务
helm在ocp中相当于catalog中的template k8s中使用helm之前遇到的问题 .很难管理.编辑和维护如此多的服务.每个服务都有若干配置,缺乏一个更高层次的工具将这些配置组织起来. . ...
- python3 之 变量作用域详解
作用域: 指命名空间可直接访问的python程序的文本区域,这里的 ‘可直接访问’ 意味着:对名称的引用(非限定),会尝试在命名空间中查找名称: L:local,局部作用域,即函数中定义的变量: E: ...
- linux [CTRL]+c与[CTRL]+d
[CTRL]+c:中断目前程序.用于在linux中输入了错误的命令或者参数,有的时候会在系统不停的运行,如果想让程序需停下来,可以使用[CTRL]+C [CTRL]+d:这个组合键代表着键盘输入结束( ...
- webpack到底是干什么用的?
转载于:https://segmentfault.com/a/1190000014148611?utm_source=tag-newest 概念问题一:什么是webpack和grunt和gulp有什么 ...
- JavaScript---1.计算机的编程基础
学习内容:编程语言.计算机基础 1编程语言 程序员通过编程语言来控制计算机 编程语言:机器语言(计算机只认识机器语言).汇编语言(直接对硬件操作,指令采用英文缩写的标识符,容易记忆).高级语言(C\C ...