异步遍历器

同步遍历器的问题

在迭代器的实现方法中，next()内部只能同步操作，出现异步操作会有问题，需要异步遍历器,其next方法会返回一个Promise对象，异步遍历器部署在Symbol.asyncIterator属性上。

//可以对应地放到await后面
  const asyncIterator = asyncIterable[Symbol.asyncIterator]();
  console.log(await asyncIterator.next());
  //连续调用而不等待next方法：
  const asyncIterator = asyncIterable[Symbol.asyncIterator]();
const [{value: v1}, {value: v2}] = await Promise.all([
  asyncIterator.next(), asyncIterator.next()
]);
//或者一次性调用：
  const writer = openFile('someFile.txt');
  writer.next('hello');
  writer.next('world');
  await writer.return();

for await...of用来遍历异步接口,如果出错，使用try...catch解决。

async function f() {
  for await (const x of createAsyncIterable(['a', 'b'])) {
    console.log(x);
  }
}
// a
// b

异步生成函数：
async和生成函数的结合,可以和异步遍历器配合使用,异步生成函数返回的是Iterator：

async function* gen() {
  yield 'hello';
}
const genObj = gen();
genObj.next().then(x => console.log(x));
// { value: 'hello', done: false }

//配合异步遍历器
async function* prefixLines(asyncIterable) {
  for await (const line of asyncIterable) {
    yield '> ' + line;
  }
}

一系列按照顺序执行的异步操作使用async函数，一系列产生相同数据结构的异步操作使用异步生成器函数,yield* 后面也可以跟着一个异步遍历器，异步操作通过yield*展开。

ArrayBuffer

ArrayBuffer代表原始二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据,只有通过先建立视图后才可以修改内存中的数据。

• ArrayBuffer

只可读不可写

const buf = new ArrayBuffer(32);
const dataView = new DataView(buf);
dataView.getUint8(0) // 0
//另外TypeArray是一组构造函数
const buffer = new ArrayBuffer(12);
const x1 = new Int32Array(buffer);
x1[0] = 1;
const x2 = new Uint8Array(buffer);
x2[0]  = 2;
x1[0] // 2
//把内存的一部分拷贝成一个新的ArrayBuffer对象。
const buffer = new ArrayBuffer(8);
const newBuffer = buffer.slice(0, 3);

存放不同类型的数据叫做"复合视图",DataView适合用来处理网络设备传来的数据

对于canvas的使用,二进制数组在Fetch,WebSocket,FileAPI中广泛使用：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;

SharedArrayBuffer

// 主线程
w.postMessage('hi');
w.onmessage = function (ev) {
  console.log(ev.data);
}
// 主线程
// 新建 1KB 共享内存
const sharedBuffer = new SharedArrayBuffer(1024);
// 主线程将共享内存的地址发送出去
w.postMessage(sharedBuffer);
// 在共享内存上建立视图，供写入数据
const sharedArray = new Int32Array(sharedBuffer);

Atomics对象

实现原子操作

1. Atomic.store()//共享内存写入数据,Atomic.load()//共享内存读数据

// 主线程 main.js
ia[42] = 314159;  // 原先的值 191
Atomics.store(ia, 37, 123456);  // 原先的值是 163
// Worker 线程 worker.js
while (Atomics.load(ia, 37) == 163);
console.log(ia[37]);  // 123456
console.log(ia[42]);  // 314159

2. Atomic.store()返回被替换的值。
3. Atomic.wait()和wake(),用于等待通知，锁内存，即在一个线程进行操作时让其它线程休眠，结束操作后再唤醒休眠线程

// 主线程
console.log(ia[37]);  // 163
Atomics.store(ia, 37, 123456);
Atomics.wake(ia, 37, 1);
// Worker 线程
Atomics.wait(ia, 37, 163);
console.log(ia[37]);  // 123456