专栏首页云前端[译] ​ES2017 最佳特性 -- 数组中的异步函数以及共享缓冲区

[译] ​ES2017 最佳特性 -- 数组中的异步函数以及共享缓冲区

  • 原文地址:?Best Features of ES2017 — Async Functions and Arrays and Shared Buffers
  • 原文作者:?John Au-Yeung
  • 译文出自:?掘金翻译计划
  • 本文永久链接:?https://github.com/xitu/gold-miner/blob/master/article/2020/best-features-of-es2017-async-functions-and-arrays-and-shared-buffers.md
  • 译者:云前端
  • 校对者:?Chorer, ?dupanpan

照片由 ?Elaine Casap 拍摄并发表在 ?Unsplash 上

自 2015 年起,JavaScript 可谓突飞猛进。

现在使用它比过去要舒服多了。

在本文中,我们将着眼于 ES2017 的最佳特性。

异步函数(Async Functions)和 Array.prototype.forEach()

Array.prototype.forEach 并不适用 asyncawait 语法。

举例来说,如果有如下代码:

async function downloadContent(urls) {
  urls.forEach(async url => {
    const content = await makeRequest(url);
    console.log(content);
  });
}

那么并不会得到包含若干 promise 的结果,因为 forEach 不会等待每个 promise 完成。

取而代之的是,可以用 for-of 循环来迭代每个异步函数以获取结果:

async function downloadContent(urls) {
  for (const url of urls) {
    const content = await makeRequest(url);
    console.log(content);
  }
}

for-of 循环能感知 await 操作符,所以可以用它循序运行所有异步函数。

若要并行运行若干异步函数,可以使用 Promise.all

async function downloadContent(urls) {
  await Promise.all(urls.map(
    async url => {
      const content = await makeRequest(url);
      console.log(content);
    }));
}

我们将多个 URL 映射为异步函数的集合,这样一来就能在 promise 数组上调用 Promise.all 了。

调用该方法后会返回一个 promise,其解决值(resolved value)是一个包含了每一个 promise 解决值的数组。

立即调用异步函数表达式

我们也可以创建立即运行的异步函数。

举例来说,相比于以下写法:

async function foo() {
  console.log(await promiseFunc());
}
foo();

我们可以这么写:

(async function () {
  console.log(await promiseFunc());
})();

也可以写成箭头函数:

(async () => {
  console.log(await promiseFunc());
})();

未处理过的 rejection

在使用异步函数时,并不用担心未处理过的 rejection 。

这是因为当浏览器遇到它们时会自动报告。

举例来说,我们可以这样写:

async function foo() {
  throw new Error('error');
}
foo();

而后我们将在控制台中看到被记录的报错信息。

Shared Array Buffers

ES2017 引入的共享数组缓冲区(shared array buffers)使得我们可以构建并发的应用了。

这让我们可以在多个 worker 和主线程之间共享 SharedArrayBuffer 对象的字节数据。

被共享的缓冲由一个类型化数组(typed array)包裹,这样就能访问到它们了。

我们可以快速在 worker 间共享数据,而跨 worker 的数据协同也变得简便了。

举例来说,可以编写如下代码来创建一个共享数组缓冲区:

const worker = new Worker('worker.js');

const sharedBuffer = new SharedArrayBuffer(
  100 * Int32Array.BYTES_PER_ELEMENT);
  
worker.postMessage({
  sharedBuffer
});

const sharedArray = new Int32Array(sharedBuffer);

我们在 worker.js 中创建了一个 worker。

之后我们用 SharedArrayBuffer 创建了一个 shared buffer。

它包含 100 个元素。

接着,为了与其它 worker 共享缓冲区,我们调用了 postMessage 以发送缓冲数据。

要访问缓冲区中的数据,就得创建一个新的 Int32Array 实例。

接下来在 worker.js worker 中,这样编写以获得缓冲数据:

self.addEventListener('message', (event) => {
  const {
    sharedBuffer
  } = event.data;
  const sharedArray = new Int32Array(sharedBuffer);
  //...
});

我们监听了 message 事件并从 event.data 中取得了 sharedBuffer 属性。

之后就能用与先前相同的方式访问它了。

总结

异步函数并不适配既有的数组实例方法。

同时,我们可以使用共享数组缓冲区在主线程和 worker 线程之间共享数据。

--End--

文章分享自微信公众号:
云前端

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:云前端
原始发表时间:2020-10-22
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • ES2016 和 ES2017 学习

    ES6 发布之后,TC-39 小组每年发布一次 ECMAScript 语言新特性,这个 repository tc39/ecma262 中记录着最新版的提议。新...

    李振
  • JavaScript中的ES7/ES8/ES9/ES10

    自从前端开发流行起来,前端的各类技术如雨后春笋般出现,让人应接不暇,几年前还是jq一把梭,现在除了三大主流框架var,何种混合开发也接踵而至,还有可能取代JS的...

    刘亦枫
  • 2022年,马上都ES2022了,还只知道ES6的新特性?

    实际上,ES6都是2015年出的规范了,现在都是2022年,还考试这个,未免有些落伍。

    伯约同学
  • ES7、ES8新特性

    概述 JavaScript,作为一门处于高速发展期的开发语言,正在变的越来越完善、稳定。我们必须拥抱这些变化,并且我们需要把ES8加入到我们的技术栈中。 E...

    xiangzhihong
  • ES7和ES8新特性介绍

    概述 JavaScript,作为一门处于高速发展期的开发语言,正在变的越来越完善、稳定。我们必须拥抱这些变化,并且我们需要把ES8加入到我们的技术栈中。 ECM...

    xiangzhihong
  • 听说你还不知道Promise的allSettled()和all()的区别?

    从 ES2015 起, promises 的出现,让我们简化了异步操作。(所以 promise 越来越流行,掌握它的相关 API 变得至关重要)。

    秋风的笔记
  • ES6 系列之我们来聊聊 Async

    其实 async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。

    夜尽天明
  • ES2017异步函数现已正式可用

    ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数。如果你曾经被异步 JavaScript 的逻辑困扰,这么新函数正是为你设计的。

    葡萄城控件
  • vue2项目中如何使用es2020

    ECMAScript 基于多种原始技术,最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。截止2022年,正式...

    奋飛
  • vue2项目中如何使用es2020

    ECMAScript 基于多种原始技术,最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。截止2022年,正式...

    奋飛
  • 通过示例来学习ES2016, 2017, 2018的新特性

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    Fundebug
  • ES2018新特性学习

    ECMAScript 2018 (ES9) 在 6 月底正式发布,带来了很多新特性。关于 ES7 和 ES8 相关的知识,可以查看这篇文章 ES2016 和 E...

    李振
  • 浅习一波 JavaScript 高级程序设计(第4版)p1

    持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

    掘金安东尼
  • 90% 的前端都会使用 ES6 来简化代码,你都用过哪些?

    ECMA-262:主标准,由 ECMA 国际组织(Ecma International)负责管理(为了让最初的JavaScript 与最初的 JScript 能...

    coder_koala
  • Java计算机IT编程文档常见单词翻译

    | 英文 | 译法 1 | 译法 2 | 译法 3 | | query | 查询 | | | | query language | 查询语言 | | | ...

    JavaEdge
  • Java计算机IT编程文档常见单词翻译

    … 基本上 Rails、Ruby 有的特有名词,除了计算机科学中常见的词儿以外,在不造成读者困扰的情况下,尽量保持原汁原味。

    JavaEdge
  • ES5 to ESNext —  自 2015 以来 JavaScript 新增的所有新特性

    这篇文章的出发点是为了帮助前端开发者串联 ES6前后的 JavaScript 知识,并且可以快速了解 JavaScript 语言的最新进展。

    苏南

扫码关注腾讯云开发者

领取腾讯云代金券