关闭

ES2019 新特性汇总

时间: 2019-09-02阅读: 1286标签: 特性

最近 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 使用场景

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

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


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]


参考文章:

1.ES2019 新特性简介 
2.ES2019 新特性简介

Author王平安
E-mailpingan8787@qq.com
博 客www.pingan8787.com
微 信pingan8787
每日文章推荐https://github.com/pingan8787...
ES小册js.pingan8787.com
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5096

关闭

你可能错过的现代 JavaScript 特性

尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现

Js即将到来的3个新特性

Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

神奇的javascript

虽然js是弱类型语言,声明变量时也不需要显式指定类型。但是,数据本身依旧还是有类型的,比如数字和字符串就是以不同形式存在的数据。在js中,所有数字的类型都为number。其中,一个特殊的数字就是NaN(Not a number)

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

ES6 Math方法和Number新特性简介

Math.sign() 函数返回一个数字的符号, 指示数字是正数,负数还是零。此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的分别是正数, 负数, 正零, 负零, NaN。

CSS 特性和值

CSS 声明可以为空,或者由 CSS 特性( property ),后加一个冒号 :,跟着是一个特性的值构成。中间可以有空格将它们隔开。

编程语言中的 6 个有趣特性

Java 是一门不断发展的语言,这是一件好事。然而,其他语言的一些特性也是值得研究的。语言的结构是人们思考问题的方式,也是人们设计解决方案的方式。学习或至少熟悉其他语言是借鉴其设计的好方法

你可能不知道的JS特性:可选链

今天我们来介绍一个你可能没见过的 JS 新特性,目前处于 Stage 3 阶段,它叫作 可选链(optional chaining),它可能解决很多人都面对过的痛点,让我们来了解这下~

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

ES6新特性--var、let、const

var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!