请选择 进入手机版 | 继续访问电脑版

葡萄城产品技术社区

    注册

QQ登录

SpreadJS

纯前端控件,类似Excel,问题响应通道

ComponentOne WPF

前沿科技,针对WPF桌面,问题响应通道

C1FlexGrid视频教程

WinForm平台,功能强大的表格控件,初学者必看视频

ActiveReport视频教程

轻松搞定报表,从头开始学AR,视频教程

搜索
查看: 1232|回复: 1

[原创] JavaScript ES2017 中值得期待的功能

[复制链接]

256

主题

257

帖子

2848

积分

超级版主

Rank: 8Rank: 8

积分
2848

微信认证勋章

发表于 2017-6-14 09:25:49 | 显示全部楼层 |阅读模式
本帖最后由 断天涯大虾 于 2017-6-14 12:21 编辑

ES2017.png
由于ES6 / ES2015花了大约6年的时间,才得以发布,因此负责JavaScript语言规范的技术委员会TC39,决定按年度周期来发布ES。这种变化允许ES语言规范,以更小和更迭代的版本形式进行发布。这样可以保证:如果特征语言规格在今年截止日期之前没有完成,那么它可以包含在明年的发布版本中。这种较小但功能强大的年度发布周期形式,允许语言规范持续增长。

ES2017介绍
对很大一部分JavaScript开发者来说,ES2017可以让他们感受到新的、闪亮的技术前沿工具。无论是完全接受这项新技术,还是简单地只使用其中测试工具的功能,我们都想知道ES2017中到底有什么。

如果你热衷于了解这个令人兴奋的社区提供的所有新技术,下面是ES2017所包含的技术细节。

主要特点
1、异步函数
TJ HolowaychukJavaScript社区的一个巨大贡献者。TJ曾在Express, Koa, Rework, 和Co这样的项目中工作过,他的代码直接或间接地成为这些开发项目中的重要组成部分。

他对Co包做出的贡献,对最近转移到Stage 4 的Async Await功能规格产生了巨大的影响。Co 是一个利用Promises和Generator函数允许以更加同步的方式来读取异步JavaScript代码语法的库。

用Promises处理Async函数的一种普遍流程如下所示:
  1. function fetchData(url) {
  2.   return fetch(url)
  3.     .then(request => request.text())
  4.     .then(text => {
  5.       return JSON.parse(text);
  6.      })
  7.     .catch(err => {
  8.       console.log(`Error: ${err.stack}`);
  9.     });
  10. }
复制代码
使用ES2017中的新增async和await关键字,我们可以利用全新的、与Co高度相似的语法来实现完全同步读取。我们可以使用try / catch blocks和新的关键字来为特定功能分配异步行为。在内部,Async功能与生成器的功能相同,但是却不能转换为Generator Functions。就像这样:
  1. async function fetchData(url) {
  2.   try {
  3.    let request = await fetch(url);
  4.    let text = await request.text();
  5.    return JSON.parse(text);
  6.   }
  7.   catch (err) {
  8.     console.log(`Error: ${err.stack}`);
  9.   }
  10. }
复制代码
可以使用以下的方式编写ES2017中的Async函数:

异步函数声明
asyncfunction fooBar( ) { }

异步函数表达式
constfooBar = async function ( ) { };

异步方法定义
letobj = { async fooBar( ) { } }

异步箭头函数
constfooBar = async ( ) => { };

2、共享内存和Atomics
Lars Hansen提出了ES2017中 共享内存和Atomics的建议,截至2017年2月,它已在第4阶段中被批准,并包含到规范中。

此功能引入了一个新的低级别Atomics命名空间对象和一个SharedArrayBuffer构造函数,来作为更高级别并发抽象的原始构建块。这使开发人员能够共享多个service worker和核心线程之间的SharedArrayBuffer对象的数据。这种引入带来了巨大的益处,因为可以更轻松地在worker之间共享数据,从而可以改善worker之间的协调。

有关新的Atomics对象和SharedArrayBuffer构造函数的信息请阅读深入分析阅读Lars Hansen的简短教程

次要功能
1、功能参数列表和调用中的结尾逗号
该函数结尾逗号的建议是一个纯粹的语法更新的规范。在此规范更改之前,不允许在最后一个函数参数后面加上逗号,如下所示:
  1. const trailCommaFn = function(
  2.   param1,
  3.   param2,
  4.   param3,
  5.   param4) { // No comma allowed here!
  6. // do something in function body
  7. }
复制代码
ES2017带来了结尾逗号:
  1. const trailCommaFn = function(
  2.   param1,
  3.   param2,
  4.   param3,
  5.   param4, // Comma allowed here!
  6. ) {
  7. // do something in function body
  8. }
复制代码
这种语法更新使得函数中的逗号与规范的其余部分更加一致。在数组和对象文字中使用后缀逗号已经很普遍,现在我们可以使用相同的行为来进行函数列表和调用。
  1. // Array
  2. const arr = [
  3.   1,
  4.   2,
  5.   3, // <--- Ok
  6. ];// Object Literal
  7. const obj = {
  8.   x: 'foo',
  9.   y: 'bar',
  10.   z: 'baz', // <--- Ok
  11. }
复制代码
另外,这个规格更改是git友好的,因为开发人员不再需要编辑2行代码,以便为功能列表或调用添加1个参数。即使在最后一个参数之后,现在也可以使用逗号。

2、Object.values/ Object.entries
JordanHarband提出的Object.entries引入了一个entry概念。对象是键值对的数据结构,每个键值对都是entry。Object.entries(x)强制转换x为对象,并以数组的方式返回其可枚举的自定义字符串:
  1. >>Object.entries({foo:1,bar:2})
  2.      [['foo',1],['bar',2]]
复制代码
与Object.entries非常相似,Object.values返回一个数组,其值为可枚举的字符串键值属性:
  1. >> Object.values({foo:1,bar:2})
  2.      [1,2]
复制代码
两种方法的签名Object.entries( )和Object.values( )如下:
  1. Object.entries(value:any):Array <[string,any]>
  2. Object.values(value:any):Array <any>
复制代码

3、字符串填充
引入了StringPadding规范功能,为JavaScript的一些本地方法提供了处理字符串功能。它提供了padStart和padEnd以及trimStart和trimEnd方法,从而使开发人员更好地控制字符串原语。
  1. >>console.log('testing'.padStart(12).length)
  2.    "     testing" is 12
  3. >>console.log('testing'.padStart(12, '_'))
  4.    "_____testing" is 12
复制代码

4、Object.getOwnPropertyDescriptors
ECMAScript中没有单个方法来简化两个对象之间的正确拷贝。之前,功能编程和不可变对象是复杂应用程序的重要组成部分,每个框架或库都在实现自己的样板,以便在合成对象或原型之间,能够正确复制属性。

Object.getOwnPropertyDescriptors()是一个复数函数Object.getOwnPropertyDescriptor()旨在简化JavaScript中复制对象的过程。
Object.defineProperties()这个新的规范功能的引入,允许decorators可以轻松地从另一个类或混合中提取出所有的描述符,并将它们分配给一个新的对象。

这个提案的部分原因,也是因为使用Object.assign()方法不够理想。Object.assign( )以吞噬行为的方式复制对象- 它直接访问属性和符号而不是其描述符。当涉及组合和处理复杂对象和类的原型时,这可能会成为一个更为危险的问题。

通过这个规范更新,开发人员不再需要依赖Object.assign()来复制对象,而是利用一个真正的浅层拷贝的创建:
  1. // Given an object `obj`>> Object.create(
  2.      Object.getPrototypeOf(obj),
  3.      Object.getOwnPropertyDescriptors(obj)
  4.    );
复制代码

更多TC39流程信息
TC39更改为年度发布周期,同时也修改了规范提案的处理方式。引入提案阶段为开源JS社区创建了更好的组织规则和透明度。每个提案必须经过Stage0到Stage4,最终才能成为语言规范的一部分。
Stage0 被称为“Strawman”阶段,其目的仅在于输入规范的初始阶段。
Stage1 被称为提案阶段,提案者为特性添加提供了案例,描述了解决方案并确定了可能出现的问题。
Stage2 被称为草案阶段,期间提议者必须使用正式规范语言精确地描述语法和语义。
Stage3 被称为候选阶段,期间提议者必须大量测试这些功能/功能。此阶段的提案预示着,需要进一步细化实施和用户的反馈。
Stage4 被称为完成阶段,这表明该添加项已准备好纳入正式的ECMAScript标准。

有关每个阶段的更多信息,请参阅TC39官方流程文件

目前,有7项提案在该流程的第3阶段,最有可能达到ES2018规范发布的第4阶段的要求。它们如下:
· Asynchronous Iteration
要了解有关即将到来的JavaScript版本的更改和更新的更多信息,请持续关注TC39 Github Repository上提案阶段列表

现在使用ES2017功能
如果你渴望测试这些ES2017的功能,尤其是async和await,可以通过Babel's Docs on ES2017 Preset来获取,它将所有ES2017功能编译成了ES2016代码。此外,你还可以使用Babel的最新预设,它允许在代码库中编译所有ES2015,ES2016和最终ES2017功能。

想要深入了解新的ES2017规格功能,可以查看Dr. Axel Rauschmayer的“ Exploring ES2016 & Es2017”

JavaScript开发工具介绍:
SpreadJS纯前端表格控件是基于HTML5的JavaScript电子表格和网格功能控件,提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel导入/导出等功能,适用于.NET、Java和移动端等各平台在线编辑类Excel功能的表格程序开发。

转载请注明出自:葡萄城控件
   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。
回复

使用道具 举报

0

主题

1

帖子

8

积分

注册会员

积分
8
发表于 2017-6-21 16:27:58 | 显示全部楼层
哈喽,能不能加下微信啊
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

欢迎关注葡萄城控件

小黑屋|手机版|Archiver|葡萄城控件官网 ( 沪ICP备05020274号

GMT+8, 2017-10-20 02:04 , Processed in 1.148482 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表