专栏首页京程一灯每日前端夜话(No.0x01)——ECMAScript 2016,2017和2018中所有新功能的示例(上)

每日前端夜话(No.0x01)——ECMAScript 2016,2017和2018中所有新功能的示例(上)

原文:https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e 翻译:疯狂的技术宅 每日前端夜话,陪你聊前端。每天晚上准时推送。

我们很难及时得知JavaScript(ECMAScript)中的最新功能,同时找到相关的示例代码更加困难。

为了解决这个问题,我将在本文中介绍在ES2016,ES2017和ES2018(最终草案)中添加的18个功能,这些功能在TC39’s finished proposals中列出,并展示相关的例子。

尽管这篇文章很长,不过应该很容易读懂。 你可以把它想象成“Netflix binge reading”。到此为止,我保证你将对所有这些功能有很多了解。

接下来逐一讨论这些问题。

1. Array.prototype.includes

includes是Array上的一个简单实例方法,能帮助我们轻松查找某项是否存在于数组中(处理 NaN的方式与 indexOff不同)。

ECMAScript 2016 or ES7 — Array.prototype.includes()

小细节: 在 JavaScript 规范中人们想要把这个方法命名为 contains , 但是这个 名字已经被 Mootools 使用了,所以只好被命名为 includes

2. 幂运算符

加法和减法等数学运算分别对应 +-运算符。 同样,**运算符通常用于指数运算。 在ECMAScript 2016中,引入 **来代替Math.pow。

ECMAScript 2016 or ES7 —  幂运算符**

1. Object.values()

Object.values()是一个与Object.keys()类似的新函数,不过它返回的是Object自身属性的所有值,不包括原型链中的任何值。

ECMAScript 2017 (ES8)— Object.values()

2. Object.entries()

Object.entries()Object.keys相关,但它并不是仅返回键,而是以数组方式返回键和值。 这样一来,在循环中使用对象或将对象转换为Maps等操作将会变得非常简单。

Example 1:

(*ECMAScript 2017 (ES8) — 在循环中使用 Object.entries()*)

Example 2:

(ECMAScript 2017 (ES8) — 使用 Object.entries()Object转化为 Map

3.字符串填充

String 中添加了两个实例方法—— String.prototype.padStartString.prototype.padEnd,允许将空字符串或其他字符串附加/前置到原始字符串的开头或结尾。

'someString'.padStart(numberOfCharcters[,stringForPadding]); 
'5'.padStart(10) // '         5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5         '
'5'.padEnd(10, '=*') //'5=*=*=*=*='

可以在想要用漂亮的格式打印输出时或者打印对齐等场景中派上用场。

3.1 padStart 示例:

下面的示例中列出了不同长度的数字。 我们希望前置“0”,以便在显示时所有项目都具有相同的10位长度。 使用padStart(10, '0')轻松实现这一目标。

ECMAScript 2017 — padStart示例

3.2 padEnd 示例:

当我们打印不同长度的多个项目并希望它们正确对齐时,padEnd真的很方便。

下面的示例是padEndpadStartObject.entries如何组合在一起以产生漂亮输出的一个很好的现实示例。

ECMAScript 2017 — padEnd, padStartObject.Entries示例

3.3 ⚠️ 使用padStart 与 padEnd 处理 Emojis 和其它双字节字符

Emojis和其他双字节字符使用多个字节的unicode表示。 所以padStartpadEnd可能无法按预期工作!⚠️

例如:假设我们想要在字符串中填充10个❤️表情符号,结果如下所示:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!
'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

这是因为❤️的长度是2个码点('\ u2764 \ uFE0F')! 单词heart本身是5个字符,所以我们只剩下5个字符来填充。 所以会发生什么事情,JS使用'\ u2764 \ uFE0F'来填充两颗心并产生❤️❤️。 对于最后一个,它只使用第一个码点\ u2764产生❤字符。

所以我们最终得到:❤️❤️❤heart

PS:可以通过此链接(https://encoder.internetwache.org/#tab_uni)查看怎样对unicode char进行转换。

4. Object.getOwnPropertyDescriptors

此方法返回给定对象的所有属性的全部详细信息(包括getter方法 get和 setter方法 set)。 添加它的主要目的是允许浅层拷贝/克隆对象到另一个对象,该对象也复制getter和setter函数而不是Object.assign

** Object.assign用于浅层拷贝除了原始源对象的getter和setter函数之外的所有细节。**

下面的示例显示了Object.assignObject.getOwnPropertyDescriptors以及Object.defineProperties之间的区别,以将原始对象Car复制到新对象ElectricCar中。 你将看到,通过使用Object.getOwnPropertyDescriptorsdiscount的getter和setter函数也会复制到目标对象中。

以前

以前 — 使用 Object.assign

之后

ECMAScript 2017 (ES8) — Object.getOwnPropertyDescriptors

5.在函数参数中添加尾随逗号

这是一个次要更新,允许我们在最后一个函数参数后面有逗号。 为什么? 帮助使用像git blame这样的工具来确保只有新的开发人员的代码被标注。

以下示例显示了问题和解决方案。

注意:也可以使用尾随逗号调用函数!

6. Async/Await

到目前为止,这是最重要和最有用的功能。 异步函数允许我们不必处理回调并使整个代码看起来很简单。

async关键字告诉JavaScript编译器以不同方式处理函数。 只要到达该函数中的await关键字,编译器就会暂停。 它假定await之后的表达式返回一个promise并等待,直到promise被解决或被拒绝,然后才进一步移动。

在下面的示例中,getAmount函数调用两个异步函数getUsergetBankBalance。 我们可以做到这一点,但是使用async await更加优雅和简单。

ECMAScript 2017 (ES 8) — Async Await 基本示例

6.1异步函数本身返回一个Promise。

如果您正在等待异步函数的结果,则需要使用Promise的then语法来捕获其结果。

在以下示例中,我们希望使用console.log而不是在doubleAndAdd函数中记录结果。 所以我们想等待并使用then语法将结果传递给console.log

ECMAScript 2017 (ES 8) — Async Await themselves returns Promise

6.2 并行调用 async/await

在前面的例子中,我们调用了两次await,每次会等待一秒钟(总共2秒)。 不过我们可以并行化处理它,因为ab不使用Promise.all相互依赖。

6.3 async/await错误处理功能

使用异步等待时,有多种方法可以处理错误。

选项1 - 在函数中使用try catch

(ECMAScript 2017 - 在async/await函数中使用try catch)

选项2-捕获每个等待表达式 由于每个await表达式都返回一个Promise,因此可以捕获每行的错误,如下所示。

(ECMAScript 2017 — Use try catch every await expression

选项3 - 捕获整个async-await函数

(ECMAScript 2017 — Catch the entire async/await function at the end

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:京程一灯

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 没有副作用的哈希表

    如果想把JavaScript 对象当作哈希表(仅用于保存数据),你可能会像下面这样创建这个对象。

    疯狂的技术宅
  • 如何遍历JavaScript中对象属性

    在2016年6月发布的ECMAScript 2016的同一时期,令JavaScript开发人员开心的是知道另一组很棒的提案已经达到了第4阶段(完成)。

    疯狂的技术宅
  • 不可变和ES6中的const

    在很多人的意识中,JS里的const变量仿佛就是其他语言中的常量一样完全不可变,——这样理解const的作用当然是完全错误的,然而不幸的是这种误解从没消失过,甚...

    疯狂的技术宅
  • 这多年来我一直在钻研的技术

    因为我是看到tinyfool 《那些年我赶过的时髦技术趋势》,在赞叹的时候,也让我对我有好些回忆,所以想写一篇回忆贴,本来觉得回忆是件挺让人沮喪的事,因为是老了...

    bear_fish
  • KRACK攻击来袭,WiFi用户不必过分紧张

    近日,研究人员在国外网站介绍了一种针对WPA2加密协议的KRACK攻击,并发布了一段视频演示针对一台Android智能手机发起的KRACK攻击的PoC。演示视频...

    安恒信息
  • ES7、ES8、ES9、ES10新特性大盘点

    从 ECMAScript 2016(ES7)开始,版本发布变得更加频繁,每年发布一个新版本,好在每次版本的更新内容并不多,本文会细说这些新特性,尽可能和旧知识相...

    心莱科技雪雁
  • 一文详解 Canal Instance 设计理念与定制开发思路

    从 Canal 系列的第一篇文章我们基本能了解到,Instance 是 Canal 数据同步的核心,在一个 Canal 实例中只有启动 Instace,才能实现...

    丁威
  • 漏洞科普:你对弱口令重视吗?

    在当今很多地方以用户名和口令作为鉴权的世界,口令的重要性就可想而知了。口令就相当于进入家门的钥匙,当他人有一把可以进入你家的钥匙,想想你的安全、你的财物、你的隐...

    FB客服
  • 看完秒懂!移动通信网络,就这么简单!

    “绝大部分通信系统,都可以用分层的角度来看,也必须用分层的角度来看。看懂了这个系统的层级,就看懂了这个系统的70%。——小枣君”

    鲜枣课堂
  • nodejs安装

    前些时在学习操作postman接口时。了解到基于postman的接口自动化框架是postman+newman+jenkins; 这个其实在上家公司就实现过,许久...

    测试小兵

扫码关注云+社区

领取腾讯云代金券