Question

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

<Potato>(#)</Potato>

Answer 1

它导出一个异步arrow function，它接受一个参数taskData。异步函数是新的语法，设置为今年发布的ES2017，称为async function，尽管代码的其余部分是ES6（ES2015）和ES5（ES2011）。它与await密切相关，并返回Promise。

它主要用于清理承诺链，代码可能会变得非常混乱。请使用promises查看此示例，找到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

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

()=>{}

此函数在ES6中，并未定义自己的this上下文，this的任何使用都将引用外部作用域。

Answer 3

ES2017发布时，

Async await语法设置为支持。您的代码本质上是一个返回promise的函数。此外，使用async关键字处理承诺时，syntactic sugar关键字允许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中的语法是什么？

3 个答案: