PHP-Z

编程

JavaScript ES2017中值得期待的功能

2017-6-15 08:39 发布者: 大熊猫

  

  英文原文:What to expect from JavaScript ES2017 — The Async Edition

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

  ES2017 介绍

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

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

  主要特点

  1、异步函数

  TJ Holowaychuk 是 JavaScript 社区的一个巨大贡献者。TJ 曾在 Express, Koa, Rework, 和 Co 这样的项目中工作过,他的代码直接或间接地成为这些开发项目中的重要组成部分。

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

  用 Promises 处理 Async 函数的一种普遍流程如下所示:

function fetchData (url) {
  return fetch (url)
    .then (request => request.text ())
    .then (text => {
      return JSON.parse (text);
     })
    .catch(err => {
      console.log (`Error: ${err.stack}`);
    });
}

  使用 ES2017 中的新增 async 和 await 关键字,我们可以利用全新的、与 Co 高度相似的语法来实现完全同步读取。我们可以使用 try / catch blocks 和新的关键字来为特定功能分配异步行为。在内部,Async 功能与生成器的功能相同,但是却不能转换为 Generator Functions。就像这样:

async function fetchData (url) {
  try {
   let request = await fetch (url);
   let text = await request.text ();
   return JSON.parse (text);
  }
  catch (err) {
    console.log (`Error: ${err.stack}`);
  }
}

  可以使用以下的方式编写 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、功能参数列表和调用中的结尾逗号

  该函数结尾逗号的建议是一个纯粹的语法更新的规范。在此规范更改之前,不允许在最后一个函数参数后面加上逗号,如下所示:

const trailCommaFn = function(
  param1,
  param2,
  param3,
  param4) { // No comma allowed here!
// do something in function body
}

  ES2017 带来了结尾逗号:

const trailCommaFn = function(
  param1,
  param2,
  param3,
  param4, // Comma allowed here!
) {
// do something in function body
}

  这种语法更新使得函数中的逗号与规范的其余部分更加一致。在数组和对象文字中使用后缀逗号已经很普遍,现在我们可以使用相同的行为来进行函数列表和调用。

// Array
const arr = [
  1,
  2,
  3, // <--- Ok
];// Object Literal 
const obj = {
  x: 'foo',
  y: 'bar',
  z: 'baz', // <--- Ok
}

  另外,这个规格更改是 git 友好的,因为开发人员不再需要编辑 2 行代码,以便为功能列表或调用添加 1 个参数。即使在最后一个参数之后,现在也可以使用逗号。

  2、Object.values/ Object.entries

  JordanHarband 提出的 Object.entries 引入了一个 entry 概念。对象是键值对的数据结构,每个键值对都是 entry。Object.entries (x)强制转换x为对象,并以数组的方式返回其可枚举的自定义字符串:

>>Object.entries({foo:1,bar:2})
     [['foo',1],['bar',2]]

  与 Object.entries 非常相似,Object.values 返回一个数组,其值为可枚举的字符串键值属性:

>> Object.values({foo:1,bar:2})
     [1,2]

  两种方法的签名 Object.entries ( )和 Object.values ( )如下:

Object.entries(value:any):Array <[string,any]>
Object.values(value:any):Array <any>

  3、字符串填充

  引入了 StringPadding 规范功能,为 JavaScript 的一些本地方法提供了处理字符串功能。它提供了 padStart 和 padEnd 以及 trimStart 和 trimEnd 方法,从而使开发人员更好地控制字符串原语。

>>console.log ('testing'.padStart (12) .length)
   "     testing" is 12
>>console.log ('testing'.padStart (12, '_'))
   "_____testing" is 12

  4、Object.getOwnPropertyDescriptors

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

  Object.getOwnPropertyDescriptors ()是一个复数函数 Object.getOwnPropertyDescriptor ()旨在简化 JavaScript 中复制对象的过程。

  Object.defineProperties ()这个新的规范功能的引入,允许 decorators 可以轻松地从另一个类或混合中提取出所有的描述符,并将它们分配给一个新的对象。

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

  通过这个规范更新,开发人员不再需要依赖 Object.assign ()来复制对象,而是利用一个真正的浅层拷贝的创建:

// Given an object `obj`>> Object.create (
     Object.getPrototypeOf (obj),
     Object.getOwnPropertyDescriptors (obj)
   );

  更多 TC39 流程信息

  TC39 更改为年度发布周期,同时也修改了规范提案的处理方式。引入提案阶段为开源 JS 社区创建了更好的组织规则和透明度。每个提案必须经过 Stage0 到 Stage4,最终才能成为语言规范的一部分。

  Stage0 被称为“Strawman”阶段,其目的仅在于输入规范的初始阶段。

  Stage1 被称为提案阶段,提案者为特性添加提供了案例,描述了解决方案并确定了可能出现的问题。

  Stage2 被称为草案阶段,期间提议者必须使用正式规范语言精确地描述语法和语义。

  Stage3 被称为候选阶段,期间提议者必须大量测试这些功能/功能。此阶段的提案预示着,需要进一步细化实施和用户的反馈。

  Stage4 被称为完成阶段,这表明该添加项已准备好纳入正式的 ECMAScript 标准。

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

  目前,有 7 项提案在该流程的第 3 阶段,最有可能达到 ES2018 规范发布的第 4 阶段的要求。它们如下:

  1. Function.prototype.toString
  2. global
  3. import()
  4. Rest/Spread Properties
  5. SIMD.JS - SIMD API
  6. Lifting Template Literal Restriction
  7. 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 开发工具介绍:

  Wijmo 是一款用 TypeScript 编写的新一代 JavaScript/HTML5 控件集。在全球率先支持 AngularJS,并提供性能卓越、零依赖的 FlexGrid 和图表等多个控件,是构建企业应用程序的全套控件集。

  转载请注明出自:葡萄城控件 

关注微信公众号

top100summit

扫一扫关注微信公众号

PHP-Z_COM