ES6 或 ES7 中的语法是什么？

Question

我遇到了这种语法，我认为它是 ES6 或 ES7。这些代码行是做什么的？

module.exports = async (taskData) => {
  // do stuff
}

Answer 1

它导出异步 arrow function which takes in an argument taskData. The asynchronous function is new syntax that is set to come with this year's release, ES2017, called the async function, though the rest of the code is ES6 (ES2015) and ES5 (ES2011). It goes hand-in-hand with await and returns a Promise。

它主要用于清理 promise 链，其中的代码可能会变得非常混乱。考虑这个使用 promises 的例子，found here:

function loadStory() {
  return getJSON('story.json').then(function(story) {
    addHtmlToPage(story.heading);

    return story.chapterURLs.map(getJSON)
      .reduce(function(chain, chapterPromise) {
        return chain.then(function() {
          return chapterPromise;
        }).then(function(chapter) {
          addHtmlToPage(chapter.html);
        });
      }, Promise.resolve());
  }).then(function() {
    addTextToPage("All done");
  }).catch(function(err) {
    addTextToPage("Argh, broken: " + err.message);
  }).then(function() {
    document.querySelector('.spinner').style.display = 'none';
  });
}

上面的例子获取了一个故事，遍历所有章节并将它们添加到 HTML。它有效，但如果您有很多事情要做，它可能会非常混乱且难以遵循。相反，您可以使用 async 和 await，这只是语法糖，但更简洁：

async function loadStory() {
  try {
    let story = await getJSON('story.json');
    addHtmlToPage(story.heading);
    for (let chapter of story.chapterURLs.map(getJSON)) {
      addHtmlToPage((await chapter).html);
    }
    addTextToPage("All done");
  } catch (err) {
    addTextToPage("Argh, broken: " + err.message);
  }
  document.querySelector('.spinner').style.display = 'none';
}

以上是（在我看来）方式与第一个示例中混乱的承诺链相比，更简洁易懂。

Answer 2

这是一个异步函数，正如@Andrew 所说，它被设置为 return Promise。它使用 Arrow Function 语法。

()=>{}

这个函数在 ES6 中，没有定义它自己的 this 上下文，任何对 this 的使用都将引用外部范围。

Answer 3

Async await 语法设置为在 ES2017 发布时支持。您的代码本质上是一个 returns 一个 promise. Additionally, the async keyword allows for syntactic sugar when working with promises by use of the await 关键字的函数。

=> 部分称为 arrow function ，这在很大程度上也是语法糖。它是 ES6 的一部分。

你的函数

module.exports = async (taskData) => {
  // do stuff
}

...几乎等同于：

module.exports = function(taskData) {
  return new Promise(function() {

    // do stuff
    if (err) reject(err)
    resolve(your return value)
  }
}

注意： 主要区别只是通过箭头函数绑定 this 关键字。

ES6 或 ES7 中的语法是什么？

What is this syntax in ES6 or ES7?

ecmascript-6

ecmascript-2016