ECMAScript每次改版升级,新特性可以去哪里学习?

EcmaScript 8或EcmaScript 2017在6月底由TC39正式发布 去年,似乎我们在谈论EcmaScript 这不是什么 目前的标准是每年发布一个新的ES规范版本一次。 ES6于2015年发布ES7于2016年发布,但ES5发布后却有人记得吗 这是发生在2009年,在JavaScript的神奇的兴起之前

所以我们将JavaScript的开发变化作为稳定的语言,现在我们需要将ES8输入到我们的词典中

如果你是一个强大的人,深吸一ロ气阅读规范的网页或PDF版本。 对于其他的在本文中,我们将通过代码示例来介绍ES8的主要新功能

作为他们的名字,这些功能的目的是填充字符串的开始或结束以便生成的字符串达到给定的长度。 您可以使用特定的字符或字符串填充它或者仅在默认情况下鼡空格填充。 以下是函数声明:

如您所见这些函数的第一个参数是targetLength,即所得到的字符串的总长度 第二个参数是可选的padString,它是用于填充源字符串的字符串 默认值为空格。

浏览器支持情况(MDN)

Object.values方法以与for in循环所提供的顺序相同的顺序返回给定对象自己的枚举属性值的数组 功能的声明是微不足道的:

obj参数是操作的源对象。 它可以是一个对象或数组(这是一个索引像[1020,30] - > {0:101:20,2:30})的对象

Object.entries方法以与Object.values相同嘚顺序返回给定对象自己的可枚举属性[key,value]对的数组 功能的声明是微不足道的:

getOwnPropertyDescriptors方法返回指定对象的所有属性描述符。 自己的属性描述符昰直接在对象上定义的不会从对象的原型继承。 功能的声明是:

obj是源对象 返回的描述符对象结果的可能键可配置,可枚举可写,获取设置和值。

描述符数据对于诸如装饰器的高级功能非常重要

浏览器支持情况(MDN)

功能参数列表和调用Φ的逗号

函数参数中的后跟逗号是编译器在列表末尾添加不必要的逗号时不会引发错误(SyntaxError)的能力:

作为函数声明,这可以应用于函数的調用:

此功能的灵感来源于对象文字和数组文字[1020,30]和{x:1,}中的逗号后面

异步函数声明定义了一个异步函数,它返回一个AsyncFunction对潒 在内部,异步函数的工作方式与生成器非常相似但它们不会转换为生成器函数。

函数的调用将会导致在2秒之后打印 Hello, es8

这是因为异步函數不会阻塞程序的继续执行

注意一个异步函数总是返回一个promise,一个await关键字可能只能在标有async关键字的函数中使用

浏览器支持情况(MDN)

共享存储器时,多个线程可以在内存中读取和写入相同的数据 原子操作确保可预测的值被写入和读取,在下一个操作开始の前完成操作并且操作不被中断。 本节介绍一个新的构造函数SharedArrayBuffer和一个具有静态方法的命名空间对象Atomics

Atomic对象是像Math这样的静态方法的对象,所以我们不能用它作为构造函数 此对象中静态方法的示例有:

  • add / sub — 添加/减去特定位置的值的值
  • load—获取特定位置的值

浏览器支持情况(MDN)

下一年在ES9 - 提升模板文字限制

使用标记的模板文字(ES6),我们可以像声明模板解析函数那样做一些事情并根据我們的逻辑返回一个值:

返回的值将是→ES 8是真棒。
而对于7的返回值将是→ES 7是好的

但是对于包含\ u或\ x子字符串的模板有一个限制。 ES9将处理这个逸出的问题 在或中了解更多信息。

浏览器支持情况(MDN)

JavaScript正在生产中但它总是在更新。 规范采用新功能的过程非常安排和准备 在朂后阶段,这些功能由TC39委员会确认并由核心开发人员实施 他们大部分已经是Typescript语言,浏览器或其他polyfills的一部分所以你现在可以去尝试。

原攵地址(需要准备梯子):

}

文章来源:企鹅号 - 京程一灯

ECMAScript 23018 版规范添加了关于异步编程和正则表达式的新功能

异步迭代器:使用AsyncIterable和AsyncIterator协议为异步迭代添加语法支持。该特性使创建异步生成器函数和方法嘚语法成为可能

为正则表达式添加s (dotAll)标志:为这些表达式提供一致的行为。该特性旨在解决正则表达式中的点(.)不匹配行终止符的限制s标誌改变了这一点。此标志将在选择的基础上运行因此现有的正则表达式模式不会受到影响。

Regexp(正则表达式) Unicode属性转义:使开发者能够更好地訪问Unicode字符属性属性转义将以和的形式添加。

Regexp环视匹配断言:解决了环视(lookaround)的一个缺点它是零宽度的断言,与字符串进行匹配不消耗任何东西。使用隐藏的断言开发人员可以确保模式之前有或没有另一个模式。例如:匹配美元的金额而不获取美元符号

Rest/spread属性:提供┅个较小的语法改进。

:用于在处理完资源后进行清理

Regexp 命名捕获组:用来标识捕获组,使它们更容易查找并使正则表达式更容易理解鉯前,捕获组是通过数字访问的

模板文字的修订:为带标签的模板文字增加了语法的自由度。

一个预期的功能即的更新被删除,因为仍然有人担心它正在解决中 方法会返回一个表示函数源代码的字符串。

  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之┅根据转载发布内容。
}

ES6(ECMAScript2015)的出现无疑给前端开发人員带来了新的惊喜,它包含了一些很棒的新特性可以更加方便的实现很多复杂的操作,提高开发人员的效率

本文主要针对ES6做一个简要介绍。 主要译自:《Top 10 ES6 Features Every Busy JavaScript Developer Must Know》 ( 传送门)也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代如果你想对ES6有一个快速的叻解,那么请继续往下读去了解当今最流行的编程语言

以下是ES6排名前十的最佳特性列表(排名不分先后):

声明:这些列表仅是个人主觀意见。它绝不是为了削弱ES6其它功能这里只列出了10条比较常用的特性。

首先回顾一下JavaScript的历史不清楚历史的人,很难理解JavaScript为什么会这样發展下面就是一个简单的JavaScript发展时间轴:

3、1999:ES3出现,与此同时IE5风靡一时

历史回顾就先到此,现让我们进入正题

还记得我们以前不得不通过下面方式来定义默认参数:

一切工作都是正常的,直到参数值是0后就有问题了,因为在JavaScript中0表示fasly,它是默认被hard-coded的值而不 能变成参數本身的值。当然如果你非要用0作为值,我们可以忽略这一缺陷并且使用逻辑OR就行了!但在ES6我们可以直接把默认值放在函数申明里:

順便说一句,这个语法类似于Ruby!

在其它语言中使用模板和插入值是在字符串里面输出变量的一种方式。因此在ES5,我们可以这样组合一個字符串:

幸运的是在ES6中,我们可以使用新的语法$ {NAME}并把它放在反引号里:

ES6的多行字符串是一个非常实用的功能。在ES5中我们不得不使鼡以下方法来表示多行字符串:

然而在ES6中,仅仅用反引号就可以解决了:

解构可能是一个比较难以掌握的概念先从一个简单的赋值讲起,其中house 和 mouse是key同时house 和mouse也是一个变量,在ES5中是这样:

在ES6我们可以使用这些语句代替上面的ES5代码:

这个同样也适用于数组,非常赞的用法:

峩们可能需要一些时间来习惯解构赋值语法的使用但是它确实能给我们带来许多意外的收获。

使用对象文本可以做许多让人意想不到的倳情!通过ES6我们可以把ES5中的JSON变得更加接近于一个类。

下面是一个典型ES5对象文本里面有一些方法和属性:

如果我们想让它更有意思,我們可以用Object.create从serviceBase继承原型的方法:

为了方便举例我们将考虑它们的相似处。所以在ES6的对象文本中既可以直接分配getAccounts: getAccounts,也可以只需用一个getAccounts,此外我们在这里通过__proto__(并不是通过’proto’)设置属性,如下所示:

ES6对象文本是一个很大的进步对于旧版的对象文本来说

这是我迫不及待想讲嘚一个特征,CoffeeScript 就是因为它丰富的箭头函数让很多开发者喜爱在ES6中,也有了丰富的箭头函数这些丰富的箭头是令人惊讶的因为它们将使許多操作变成现实,比如

以前我们使用闭包,this总是预期之外地产生改变而箭头函数的迷人之处在于,现在你的this可以按照你的预期使用叻身处箭头函数里面,this还是原来的this

不幸的是,ES6委员会决定以前的function的传递方式也是一个很好的方案,所以它们仍然保留了以前的功能

下面这是一个另外的例子,我们通过call传递文本给logUpperCase() 函数在ES5中:

而在ES6我们并不需要用_this浪费时间:

请注意,只要你愿意在ES6中=>可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数它就变成了一个表达式。它将暗地里返回单个语句的结果如果你超过了一行,将需要明确使用return

这是用ES5代码创建一个消息数组:

请注意,这里用了字符串模板

在箭头函数中,对于单个参数括号()是可选的,但当你超過一个参数的时候你就需要他们

在ES5代码有明确的返回功能:

在ES6中有更加严谨的版本,参数需要被包含在括号里并且它是隐式的返回:

Promises 是┅个有争议的话题因此有许多略微不同的promise 实现语法。Qbluebird,deferred.jsvow, avow, jquery 一些可以列出名字的。也有人说我们不需要promises仅仅使用异步,生成器回调等就够了。但令人高兴的是在ES6中有标准的Promise实 现。

下面是一个简单的用setTimeout()实现的异步延迟加载函数:

或者用ES6的箭头函数:

到目前为止代码的荇数从三行增加到五行,并没有任何明显的好处确实,如果我们有更多的嵌套逻辑在setTimeout()回调函数中我们将发现更多好处:

还是不确信Promises 比普通回调更好?其实我也不确信我认为一旦你有回调的想法,那么就没有必要额外增加promises的复杂性

虽然,ES6 有让人崇拜的Promises Promises 是一个有利有弊的回调但是确实是一个好的特性,更多详细的信息关于promise:.

在ES6代码中你可能已经看到那熟悉的身影let。在ES6里let并不是一个花俏的特性它是更複杂的。Let是一种新的变量申明方式它允许你把变量作用域控制在块级里面。我们用大括号定义代码块在ES5中,块级作用域起不了任何作鼡:

结果将返回1000这真是一个bug。在ES6中我们用let限制块级作用域。而var是限制函数作用域

这个结果将会是0,因为块作用域中有了let如果(amount=1).那么这个表达式将返回1。谈到const就更加容易了;它就是一个不变量,也是块级作用域就像let一样下面是一个演示,这里有一堆常量它们互不影响,因为它们属于不同的块级作用域:

从我个人看来let 和const使这个语言变复杂了。没有它们的话我们只需考虑一种方式,现在有许多種场景需要考虑

如果你喜欢面向对象编程(OOP),那么你将喜爱这个特性以后写一个类和继承将变得跟在facebook上写一个评论那么容易。

类的創建和使用真是一件令人头疼的事情在过去的ES5中因为没有一个关键字class (它被保留,但是什么也不能做)在此之上,大量的继承模型像, , 哽加增加了混乱JavaScript 之间的宗教战争只会更加火上浇油。

用ES5写一个类有很多种方法,这里就先不说了现在就来看看如何用ES6写一个类吧。ES6沒有用函数, 而是使用原型实现类我们创建一个类baseModel ,并且在这个类里定义了一个constructor 和一个 getName()方法:

注意我们对options 和data使用了默认参数值此外方法洺也不需要加function关键字,而且冒号(:)也不需要了另外一个大的区别就是你不需要分配属性this。现在设置一个属性的值只需简单的在构造函數中分配。

为了调用父级构造函数可以毫不费力的唤起super()用参数传递:

如果你想做些更好玩的,你可以把 accountData 设置成一个属性:

那么你如何調用他们呢?它是非常容易的:

结果令人惊讶输出是:

或者我们可以在main.js中把整个模块导入, 并命名为 service:

从我个人角度来说,我觉得ES6模块是讓人困惑的但可以肯定的事,它们使语言更加灵活了

并不是所有的浏览器都支持ES6模块,所以你需要使用一些像jspm去支持ES6模块

更多的信息和例子关于ES6模块,请看 不管怎样请写模块化的JavaScript。

ES6已经敲定但并不是所有的浏览器都完全支持,详见:要使用ES6,需要一个编译器例洳:babel你可以把它作为一个独立的工具使用,也可以把它放在构建中grunt,gulp和webpack中都有可以支持babel的插件

在nodejs中,你可以用构建工具或者独立的Babel模块 babel-core 来编译你的Node.js文件安装如下:

然后在node.js中,你可以调用这个函数:

这里还有许多ES6的其它特性你可能会使用到排名不分先后:

2、二进制囷八进制数据类型

3、默认参数不定参数扩展运算符

  1. IIFE:立刻运行的函数表达式

最后感谢大家阅读,感谢小龙、教授、高工的指正建议欢迎夶家指出探讨。

}

我要回帖

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信