点击上方“前端自习课”关注,学习起来~

最近在做的一个活动,大家都可以参与:

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~

另外之前也整理了 【汇总】59篇原创系列汇总(可以点击查看),也包含《ES6/ES7/ES8/ES9系列》。

1. 可选的 catch 绑定

1.1 介绍

在 ECMAScript2019 最新提案中,支持我们在使用 trycatch 错误异常处理时,选择性的给 catch传入参数。

即我们可以不传入 catch 参数。

正常使用 trycatch

try {
// todo
} catch (err){
console.log('err:',err)
}

在 ES10 中可以这么使用:

try {
// todo
} catch {
// todo
}

1.2 使用场景

当我们不需要对 catch 返回的错误信息进行处理时,比如:我们对于一些数据处理,经常会出现格式报错,但是我们并不关心这个错误,我们只需要继续处理,或重新请求数据等。

这种情况,我们就可以使用这个新特性,当然,还是需要根据实际情况考虑。

2. JSON.superset

2.1 介绍

  • 来源背景

由于在 ES2019 之前不支持转义行分隔符 ( \u2028) 和段落分隔符 ( \u2029) 字符,并且在解析过程中会报错: SyntaxError:Invalidorunexpected 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]

参考文章:

1.ES2019 新特性简介:

https://juejin.im/post/5c52a645f265da2ddc3c4bd8

2.ES2019 新特性简介:

http://www.imooc.com/article/290813

原创系列推荐

1. JavaScript 重温系列(22篇全)

2. ECMAScript 重温系列(10篇全)

3. JavaScript设计模式 重温系列(9篇全)

4. 正则 / 框架 / 算法等 重温系列(16篇全)

5. Webpack4 入门手册(共 18 章)(上)

6. Webpack4 入门手册(共 18 章)(下)

7. 59篇原创系列汇总

点这,与大家一起分享本文吧

【ES】338- ECMAScirpt 2019 新特性汇总的更多相关文章

  1. 【转】Spark-Sql版本升级对应的新特性汇总

    Spark-Sql版本升级对应的新特性汇总 SparkSQL的前身是Shark.由于Shark自身的不完善,2014年6月1日Reynold Xin宣布:停止对Shark的开发.SparkSQL抛弃原 ...

  2. iOS8 针对开发者所拥有的新特性汇总如下

    iOS8 针对开发者所拥有的新特性汇总如下 1.支持第三方键盘 2.自带网页翻译功能(即在线翻译) 3.指纹识别功能开放:第三方软件可以调用 4.Safari浏览器可直接添加新的插件. 5.可以把一个 ...

  3. 21、前端知识点--html5和css3新特性汇总

    跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...

  4. VisualStudio 2019 新特性

    很多小伙伴都好奇 VisualStudio 2019 有哪些功能,下面让我介绍一些好玩的特性 在安装完成之后会看到创新的欢迎界面,这个欢迎界面支持输入关键字搜项目,同时支持选择语言平台 很多小伙伴都说 ...

  5. 【CuteJavaScript】ES2019 新特性汇总

    最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~ 另外之前也整理了 <ES6 ...

  6. Swift3新特性汇总

    之前 Apple 在 WWDC 上已将 Swift 3 整合进了 Xcode 8 beta 中,而本月苹果发布了 Swift 3 的正式版.这也是自 2015 年底Apple开源Swift之后,首个发 ...

  7. iOS6、7、8、9新特性汇总和适配说明

    iOS6新特性 一.关于内存警告 ios6中废除了viewDidUnload,viewWillUnload这两个系统回调,收到内存警告时在didReceiveMemoryWarning中进行相关的处理 ...

  8. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  9. ES 2015/6 新特性汇总

    ES 2015/6 新特性汇总 箭头函数 箭头函数,通过 => 语法实现的函数简写形式,C#/JAVA8/CoffeeScript 中都有类似语法.与函数不同,箭头函数与其执行下文环境共享同一个 ...

随机推荐

  1. 虚幻4 UE4 蓝图之关卡蓝图实现自动开关门

    新建项目 往关卡中放置一个门 在内容浏览器中找到 门 的静态网格体 拖放到关卡中 此时门默认没有碰撞,人物可以直接穿过 给门添加碰撞 双击内容管理器中的 SM_Door,打开编辑窗口 选择菜单&quo ...

  2. Spring Boot Actuator监控使用详解

    在企业级应用中,学习了如何进行SpringBoot应用的功能开发,以及如何写单元测试.集成测试等还是不够的.在实际的软件开发中还需要:应用程序的监控和管理.SpringBoot的Actuator模块实 ...

  3. nyoj 14-会场安排问题 (贪心)

    14-会场安排问题 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:9 submit:15 题目描述: 学校的小礼堂每天都会有许多活动,有时间这些活动 ...

  4. Java开发者入职必备条件

    01.基础技术体系 我认为知识技能体系化是判断技术是否过关的第一步.知识体系化包含两层含义: 1. 能够知道技术知识图谱(高清版图谱扫文末二维码)的内容 比如分布式系统中常用的RPC技术,其背后就涉及 ...

  5. 力扣(LeetCode)缺失数字 个人题解

    给定一个包含 0, 1, 2, ..., n 中 n 个数的序列,找出 0 .. n 中没有出现在序列中的那个数. 示例 1: 输入: [3,0,1] 输出: 2 示例 2: 输入: [9,6,4,2 ...

  6. GitHub注册失败,卡在第一步

    同事说他无法注册GitHub,我一开始以为GitHub又无法登录进去,我就登录了自己的GitHub账号,没有问题,可以登录啊,见第一个标签页.同一局域网,不可能我能登录,你无法完成注册啊.于是,我就在 ...

  7. MySQL基础知识面试与答案

    1.Mysql 的存储引擎,myisam和innodb的区别. 答: 1.MyISAM 是非事务的存储引擎,适合用于频繁查询的应用.表锁,不会出现死锁,适合小数据,小并发. 2.innodb是支持事务 ...

  8. 【集训Day4 动态规划】【2018寒假集训 Day4 更新】蛙人

    蛙人 (ple) 蛙人使用特殊设备潜水.设备中有一个气瓶,分两格:一格装氧气,另一格装氮气.留在水中有时间的限制,在深水中需要大量的氧气与氮气.为完成任务,蛙人必须安排好气瓶.每个气瓶可以用它的重量和 ...

  9. 一图读懂Spring Core,Spring MVC, Spring Boot,Spring Cloud 的关系与区别

    Spring框架自诞生到现在,历经多次革新,形成了多种不同的产品,分别应用于不同的项目中,为了帮助自己理解这些产品之间的关系,特此整理此图,以便自己记忆和复习.

  10. Java 大小端转换(基于ByteBuffer)

    大小端的基础知识: 小端( little-endian):低位字节在前,高位字节在后.大端( Big-Endian),则反之.具体而言,就是为了说清楚,CPU架构1 字(word)中byte的存储顺序 ...