M

MLOG

ไทย

สำรวจ JavaScript Async Iterator Helpers เพื่อปฏิวัติการประมวลผลสตรีม เรียนรู้วิธีจัดการสตรีมข้อมูลแบบอะซิงโครนัสอย่างมีประสิทธิภาพด้วย map, filter, take, drop และอีกมากมาย

JavaScript Async Iterator Helpers: การประมวลผลสตรีมที่ทรงพลังสำหรับแอปพลิเคชันสมัยใหม่

ในการพัฒนา JavaScript สมัยใหม่ การจัดการกับสตรีมข้อมูลแบบอะซิงโครนัสเป็นสิ่งที่จำเป็นต้องเจออยู่บ่อยครั้ง ไม่ว่าคุณจะดึงข้อมูลจาก API, ประมวลผลไฟล์ขนาดใหญ่ หรือจัดการกับอีเวนต์แบบเรียลไทม์ การจัดการข้อมูลแบบอะซิงโครนัสอย่างมีประสิทธิภาพนั้นมีความสำคัญอย่างยิ่ง Async Iterator Helpers ของ JavaScript มอบวิธีการที่ทรงพลังและสวยงามในการประมวลผลสตรีมเหล่านี้ โดยนำเสนอแนวทางการจัดการข้อมูลแบบฟังก์ชันและประกอบกันได้

Async Iterators และ Async Iterables คืออะไร?

ก่อนที่จะลงลึกในเรื่อง Async Iterator Helpers เรามาทำความเข้าใจแนวคิดพื้นฐานกันก่อน นั่นคือ Async Iterators และ Async Iterables

Async Iterable คืออ็อบเจ็กต์ที่กำหนดวิธีการวนซ้ำค่าต่างๆ ของมันแบบอะซิงโครนัส โดยการ implement เมธอด @@asyncIterator ซึ่งจะคืนค่าเป็น Async Iterator

Async Iterator คืออ็อบเจ็กต์ที่มีเมธอด next() เมธอดนี้จะคืนค่า promise ที่จะ resolve เป็นอ็อบเจ็กต์ซึ่งมีสองคุณสมบัติ:

นี่คือตัวอย่างง่ายๆ:


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // จำลองการทำงานแบบอะซิงโครนัส
    yield i;
  }
}

const asyncIterable = generateSequence(5);

(async () => {
  for await (const value of asyncIterable) {
    console.log(value); // ผลลัพธ์: 1, 2, 3, 4, 5 (โดยมีดีเลย์ 500ms ระหว่างแต่ละตัว)
  }
})();

ในตัวอย่างนี้ generateSequence เป็นฟังก์ชัน async generator ที่สร้างลำดับของตัวเลขแบบอะซิงโครนัส การใช้ลูป for await...of เพื่อดึงค่าจาก async iterable

ขอแนะนำ Async Iterator Helpers

Async Iterator Helpers ขยายฟังก์ชันการทำงานของ Async Iterators โดยมีชุดเมธอดสำหรับการแปลง, กรอง, และจัดการสตรีมข้อมูลแบบอะซิงโครนัส ช่วยให้สามารถเขียนโปรแกรมในสไตล์ฟังก์ชันและประกอบกันได้ ทำให้ง่ายต่อการสร้างไปป์ไลน์การประมวลผลข้อมูลที่ซับซ้อน

Async Iterator Helpers หลักๆ ประกอบด้วย:

เรามาสำรวจแต่ละ helper พร้อมตัวอย่างกัน

map()

helper map() จะแปลงแต่ละองค์ประกอบของ async iterable โดยใช้ฟังก์ชันที่ให้มา และจะคืนค่าเป็น async iterable ใหม่ที่มีค่าที่ถูกแปลงแล้ว


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(5);

const doubledIterable = asyncIterable.map(x => x * 2);

(async () => {
  for await (const value of doubledIterable) {
    console.log(value); // ผลลัพธ์: 2, 4, 6, 8, 10 (โดยมีดีเลย์ 100ms)
  }
})();

ในตัวอย่างนี้ map(x => x * 2) จะคูณสองให้กับทุกตัวเลขในลำดับ

filter()

helper filter() จะเลือกองค์ประกอบจาก async iterable ตามเงื่อนไขที่ให้มา (predicate function) และจะคืนค่าเป็น async iterable ใหม่ที่ประกอบด้วยเฉพาะองค์ประกอบที่ตรงตามเงื่อนไขเท่านั้น


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(10);

const evenNumbersIterable = asyncIterable.filter(x => x % 2 === 0);

(async () => {
  for await (const value of evenNumbersIterable) {
    console.log(value); // ผลลัพธ์: 2, 4, 6, 8, 10 (โดยมีดีเลย์ 100ms)
  }
})();

ในตัวอย่างนี้ filter(x => x % 2 === 0) จะเลือกเฉพาะตัวเลขคู่จากลำดับ

take()

helper take() จะคืนค่า N องค์ประกอบแรกจาก async iterable และจะคืนค่าเป็น async iterable ใหม่ที่ประกอบด้วยจำนวนองค์ประกอบที่ระบุเท่านั้น


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(5);

const firstThreeIterable = asyncIterable.take(3);

(async () => {
  for await (const value of firstThreeIterable) {
    console.log(value); // ผลลัพธ์: 1, 2, 3 (โดยมีดีเลย์ 100ms)
  }
})();

ในตัวอย่างนี้ take(3) จะเลือกตัวเลขสามตัวแรกจากลำดับ

drop()

helper drop() จะข้าม N องค์ประกอบแรกจาก async iterable และคืนค่าส่วนที่เหลือ และจะคืนค่าเป็น async iterable ใหม่ที่ประกอบด้วยองค์ประกอบที่เหลือ


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(5);

const afterFirstTwoIterable = asyncIterable.drop(2);

(async () => {
  for await (const value of afterFirstTwoIterable) {
    console.log(value); // ผลลัพธ์: 3, 4, 5 (โดยมีดีเลย์ 100ms)
  }
})();

ในตัวอย่างนี้ drop(2) จะข้ามตัวเลขสองตัวแรกจากลำดับ

toArray()

helper toArray() จะใช้งาน async iterable ทั้งหมดและรวบรวมองค์ประกอบทั้งหมดลงในอาร์เรย์ และจะคืนค่า promise ที่จะ resolve เป็นอาร์เรย์ที่ประกอบด้วยองค์ประกอบทั้งหมด


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(5);

(async () => {
  const numbersArray = await asyncIterable.toArray();
  console.log(numbersArray); // ผลลัพธ์: [1, 2, 3, 4, 5]
})();

ในตัวอย่างนี้ toArray() จะรวบรวมตัวเลขทั้งหมดจากลำดับลงในอาร์เรย์

forEach()

helper forEach() จะทำงานตามฟังก์ชันที่ให้มาหนึ่งครั้งสำหรับแต่ละองค์ประกอบใน async iterable มันจะ *ไม่* คืนค่าเป็น async iterable ใหม่ แต่จะทำงานตามฟังก์ชันเพื่อให้เกิดผลข้างเคียง (side-effect) ซึ่งอาจมีประโยชน์สำหรับการดำเนินการต่างๆ เช่น การบันทึก log หรือการอัปเดต UI


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(3);

(async () => {
  await asyncIterable.forEach(value => {
    console.log("Value:", value);
  });
  console.log("forEach completed");
})();
// ผลลัพธ์: Value: 1, Value: 2, Value: 3, forEach completed

some()

helper some() จะทดสอบว่ามีองค์ประกอบอย่างน้อยหนึ่งตัวใน async iterable ที่ผ่านการทดสอบตามฟังก์ชันที่ให้มาหรือไม่ และจะคืนค่า promise ที่จะ resolve เป็นค่าบูลีน (true หากมีอย่างน้อยหนึ่งองค์ประกอบที่ตรงตามเงื่อนไข, มิฉะนั้นจะเป็น false)


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(5);

(async () => {
  const hasEvenNumber = await asyncIterable.some(x => x % 2 === 0);
  console.log("Has even number:", hasEvenNumber); // ผลลัพธ์: Has even number: true
})();

every()

helper every() จะทดสอบว่าทุกองค์ประกอบใน async iterable ผ่านการทดสอบตามฟังก์ชันที่ให้มาหรือไม่ และจะคืนค่า promise ที่จะ resolve เป็นค่าบูลีน (true หากทุกองค์ประกอบตรงตามเงื่อนไข, มิฉะนั้นจะเป็น false)


async function* generateSequence(end) {
  for (let i = 2; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(4);

(async () => {
  const areAllEven = await asyncIterable.every(x => x % 2 === 0);
  console.log("Are all even:", areAllEven); // ผลลัพธ์: Are all even: true
})();

find()

helper find() จะคืนค่าองค์ประกอบตัวแรกใน async iterable ที่ตรงตามฟังก์ชันทดสอบที่ให้มา หากไม่มีค่าใดตรงตามฟังก์ชันทดสอบ จะคืนค่าเป็น undefined และจะคืนค่า promise ที่จะ resolve เป็นองค์ประกอบที่พบหรือ undefined


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(5);

(async () => {
  const firstEven = await asyncIterable.find(x => x % 2 === 0);
  console.log("First even number:", firstEven); // ผลลัพธ์: First even number: 2
})();

reduce()

helper reduce() จะทำงานตามฟังก์ชัน callback "reducer" ที่ผู้ใช้ให้มากับแต่ละองค์ประกอบของ async iterable ตามลำดับ โดยส่งผ่านค่าที่ได้จากการคำนวณขององค์ประกอบก่อนหน้า ผลลัพธ์สุดท้ายของการทำงานของ reducer กับทุกองค์ประกอบคือค่าเดียว และจะคืนค่า promise ที่จะ resolve เป็นค่าที่สะสมสุดท้าย


async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(5);

(async () => {
  const sum = await asyncIterable.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  console.log("Sum:", sum); // ผลลัพธ์: Sum: 15
})();

ตัวอย่างและกรณีการใช้งานจริง

Async Iterator Helpers มีประโยชน์ในหลากหลายสถานการณ์ มาดูตัวอย่างการใช้งานจริงกัน

1. การประมวลผลข้อมูลจาก Streaming API

สมมติว่าคุณกำลังสร้างแดชบอร์ดแสดงข้อมูลแบบเรียลไทม์ที่รับข้อมูลจาก Streaming API ซึ่ง API จะส่งการอัปเดตมาอย่างต่อเนื่อง และคุณต้องประมวลผลการอัปเดตเหล่านี้เพื่อแสดงข้อมูลล่าสุด


async function* fetchDataFromAPI(url) {
  let response = await fetch(url);

  if (!response.body) {
    throw new Error("ReadableStream not supported in this environment");
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const chunk = decoder.decode(value);
      // สมมติว่า API ส่งอ็อบเจ็กต์ JSON ที่คั่นด้วยการขึ้นบรรทัดใหม่
      const lines = chunk.split('\n');
      for (const line of lines) {
        if (line.trim() !== '') {
          yield JSON.parse(line);
        }
      }
    }
  } finally {
    reader.releaseLock();
  }
}

const apiURL = 'https://example.com/streaming-api'; // แทนที่ด้วย URL ของ API ของคุณ
const dataStream = fetchDataFromAPI(apiURL);

// ประมวลผลสตรีมข้อมูล
(async () => {
  for await (const data of dataStream.filter(item => item.type === 'metric').map(item => ({ timestamp: item.timestamp, value: item.value }))) {
    console.log('Processed Data:', data);
    // อัปเดตแดชบอร์ดด้วยข้อมูลที่ประมวลผลแล้ว
  }
})();

ในตัวอย่างนี้ fetchDataFromAPI จะดึงข้อมูลจาก Streaming API, แยกวิเคราะห์อ็อบเจ็กต์ JSON, และ yield ค่าเหล่านั้นเป็น async iterable โดย helper filter จะเลือกเฉพาะข้อมูลที่เป็น metric และ helper map จะแปลงข้อมูลให้อยู่ในรูปแบบที่ต้องการก่อนที่จะอัปเดตแดชบอร์ด

2. การอ่านและประมวลผลไฟล์ขนาดใหญ่

สมมติว่าคุณต้องประมวลผลไฟล์ CSV ขนาดใหญ่ที่มีข้อมูลลูกค้า แทนที่จะโหลดไฟล์ทั้งหมดเข้าสู่หน่วยความจำ คุณสามารถใช้ Async Iterator Helpers เพื่อประมวลผลทีละส่วน (chunk by chunk)


async function* readLinesFromFile(filePath) {
  const file = await fsPromises.open(filePath, 'r');

  try {
    let buffer = Buffer.alloc(1024);
    let fileOffset = 0;
    let remainder = '';

    while (true) {
      const { bytesRead } = await file.read(buffer, 0, buffer.length, fileOffset);
      if (bytesRead === 0) {
        if (remainder) {
          yield remainder;
        }
        break;
      }

      fileOffset += bytesRead;
      const chunk = buffer.toString('utf8', 0, bytesRead);
      const lines = chunk.split('\n');

      lines[0] = remainder + lines[0];
      remainder = lines.pop() || '';

      for (const line of lines) {
        yield line;
      }
    }
  } finally {
    await file.close();
  }
}

const filePath = './customer_data.csv'; // แทนที่ด้วยพาธไฟล์ของคุณ
const lines = readLinesFromFile(filePath);

// ประมวลผลบรรทัดต่างๆ
(async () => {
  for await (const customerData of lines.drop(1).map(line => line.split(',')).filter(data => data[2] === 'USA')) {
    console.log('Customer from USA:', customerData);
    // ประมวลผลข้อมูลลูกค้าจากสหรัฐอเมริกา
  }
})();

ในตัวอย่างนี้ readLinesFromFile จะอ่านไฟล์ทีละบรรทัดและ yield แต่ละบรรทัดเป็น async iterable โดย helper drop(1) จะข้ามแถวหัวข้อ, helper map จะแยกบรรทัดออกเป็นคอลัมน์, และ helper filter จะเลือกเฉพาะลูกค้าจากสหรัฐอเมริกา

3. การจัดการอีเวนต์แบบเรียลไทม์

Async Iterator Helpers ยังสามารถใช้จัดการอีเวนต์แบบเรียลไทม์จากแหล่งต่างๆ เช่น WebSockets ได้อีกด้วย คุณสามารถสร้าง async iterable ที่ปล่อย (emit) อีเวนต์เมื่อมีอีเวนต์เข้ามา และจากนั้นใช้ helpers เพื่อประมวลผลอีเวนต์เหล่านี้


async function* createWebSocketStream(url) {
  const ws = new WebSocket(url);

  yield new Promise((resolve, reject) => {
      ws.onopen = () => {
          resolve();
      };
      ws.onerror = (error) => {
          reject(error);
      };
  });

  try {
    while (ws.readyState === WebSocket.OPEN) {
      yield new Promise((resolve, reject) => {
        ws.onmessage = (event) => {
          resolve(JSON.parse(event.data));
        };
        ws.onerror = (error) => {
          reject(error);
        };
        ws.onclose = () => {
           resolve(null); // Resolve ด้วย null เมื่อการเชื่อมต่อปิดลง
        }
      });

    }
  } finally {
    ws.close();
  }
}

const websocketURL = 'wss://example.com/events'; // แทนที่ด้วย URL ของ WebSocket ของคุณ
const eventStream = createWebSocketStream(websocketURL);

// ประมวลผลสตรีมอีเวนต์
(async () => {
  for await (const event of eventStream.filter(event => event.type === 'user_login').map(event => ({ userId: event.userId, timestamp: event.timestamp }))) {
    console.log('User Login Event:', event);
    // ประมวลผลอีเวนต์การล็อกอินของผู้ใช้
  }
})();

ในตัวอย่างนี้ createWebSocketStream สร้าง async iterable ที่ปล่อยอีเวนต์ที่ได้รับจาก WebSocket โดย helper filter จะเลือกเฉพาะอีเวนต์การล็อกอินของผู้ใช้ และ helper map จะแปลงข้อมูลให้อยู่ในรูปแบบที่ต้องการ

ประโยชน์ของการใช้ Async Iterator Helpers

การสนับสนุนในเบราว์เซอร์และ Runtime

Async Iterator Helpers ยังคงเป็นฟีเจอร์ที่ค่อนข้างใหม่ใน JavaScript ณ ปลายปี 2024 มันอยู่ใน Stage 3 ของกระบวนการกำหนดมาตรฐาน TC39 ซึ่งหมายความว่ามีแนวโน้มที่จะถูกกำหนดเป็นมาตรฐานในอนาคตอันใกล้ อย่างไรก็ตาม มันยังไม่ได้รับการสนับสนุนแบบเนทีฟในทุกเบราว์เซอร์และเวอร์ชันของ Node.js

การสนับสนุนในเบราว์เซอร์: เบราว์เซอร์สมัยใหม่เช่น Chrome, Firefox, Safari และ Edge กำลังค่อยๆ เพิ่มการสนับสนุนสำหรับ Async Iterator Helpers คุณสามารถตรวจสอบข้อมูลความเข้ากันได้ล่าสุดของเบราว์เซอร์ได้จากเว็บไซต์อย่าง Can I use... เพื่อดูว่าเบราว์เซอร์ใดรองรับฟีเจอร์นี้

การสนับสนุนใน Node.js: Node.js เวอร์ชันล่าสุด (v18 ขึ้นไป) ให้การสนับสนุนแบบทดลองสำหรับ Async Iterator Helpers ในการใช้งาน คุณอาจต้องรัน Node.js ด้วยแฟล็ก --experimental-async-iterator

Polyfills: หากคุณต้องการใช้ Async Iterator Helpers ในสภาพแวดล้อมที่ไม่สนับสนุนแบบเนทีฟ คุณสามารถใช้ polyfill ได้ polyfill คือส่วนของโค้ดที่ให้ฟังก์ชันการทำงานที่ขาดหายไป มีไลบรารี polyfill หลายตัวสำหรับ Async Iterator Helpers ตัวเลือกที่ได้รับความนิยมคือไลบรารี core-js

การสร้าง Custom Async Iterators

แม้ว่า Async Iterator Helpers จะมอบวิธีที่สะดวกในการประมวลผล async iterables ที่มีอยู่แล้ว แต่บางครั้งคุณอาจต้องสร้าง custom async iterators ของคุณเอง ซึ่งช่วยให้คุณสามารถจัดการข้อมูลจากแหล่งต่างๆ เช่น ฐานข้อมูล, API หรือระบบไฟล์ ในลักษณะของสตรีมมิ่งได้

ในการสร้าง custom async iterator คุณต้อง implement เมธอด @@asyncIterator บนอ็อบเจ็กต์ เมธอดนี้ควรคืนค่าอ็อบเจ็กต์ที่มีเมธอด next() โดยเมธอด next() ควรคืนค่า promise ที่ resolve เป็นอ็อบเจ็กต์ที่มีคุณสมบัติ value และ done

นี่คือตัวอย่างของ custom async iterator ที่ดึงข้อมูลจาก API ที่มีการแบ่งหน้า (paginated):


async function* fetchPaginatedData(baseURL) {
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const url = `${baseURL}?page=${page}`;
    const response = await fetch(url);
    const data = await response.json();

    if (data.results.length === 0) {
      hasMore = false;
      break;
    }

    for (const item of data.results) {
      yield item;
    }

    page++;
  }
}

const apiBaseURL = 'https://api.example.com/data'; // แทนที่ด้วย URL ของ API ของคุณ
const paginatedData = fetchPaginatedData(apiBaseURL);

// ประมวลผลข้อมูลที่แบ่งหน้า
(async () => {
  for await (const item of paginatedData) {
    console.log('Item:', item);
    // ประมวลผลรายการ
  }
})();

ในตัวอย่างนี้ fetchPaginatedData จะดึงข้อมูลจาก API ที่มีการแบ่งหน้า โดย yield แต่ละรายการเมื่อดึงข้อมูลมาได้ async iterator จะจัดการตรรกะการแบ่งหน้า ทำให้ง่ายต่อการใช้งานข้อมูลในลักษณะของสตรีมมิ่ง

ความท้าทายและข้อควรพิจารณาที่อาจเกิดขึ้น

แม้ว่า Async Iterator Helpers จะมีประโยชน์มากมาย แต่สิ่งสำคัญคือต้องตระหนักถึงความท้าทายและข้อควรพิจารณาที่อาจเกิดขึ้น:

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Async Iterator Helpers

เพื่อให้ได้ประโยชน์สูงสุดจาก Async Iterator Helpers ควรพิจารณาแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:

เทคนิคขั้นสูง

การสร้าง Custom Helpers

คุณสามารถสร้าง custom async iterator helpers ของคุณเองได้โดยการประกอบ helpers ที่มีอยู่หรือสร้างขึ้นใหม่ทั้งหมด ซึ่งช่วยให้คุณสามารถปรับแต่งฟังก์ชันการทำงานให้เข้ากับความต้องการเฉพาะของคุณและสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้


async function* takeWhile(asyncIterable, predicate) {
  for await (const value of asyncIterable) {
    if (!predicate(value)) {
      break;
    }
    yield value;
  }
}

// ตัวอย่างการใช้งาน:
async function* generateSequence(end) {
  for (let i = 1; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i;
  }
}

const asyncIterable = generateSequence(10);
const firstFive = takeWhile(asyncIterable, x => x <= 5);

(async () => {
  for await (const value of firstFive) {
    console.log(value);
  }
})();

การรวม Async Iterables หลายตัว

คุณสามารถรวม async iterables หลายตัวเข้าเป็น async iterable เดียวโดยใช้เทคนิคเช่น zip หรือ merge ซึ่งช่วยให้คุณสามารถประมวลผลข้อมูลจากหลายแหล่งพร้อมกันได้


async function* zip(asyncIterable1, asyncIterable2) {
    const iterator1 = asyncIterable1[Symbol.asyncIterator]();
    const iterator2 = asyncIterable2[Symbol.asyncIterator]();

    while (true) {
        const result1 = await iterator1.next();
        const result2 = await iterator2.next();

        if (result1.done || result2.done) {
            break;
        }

        yield [result1.value, result2.value];
    }
}

// ตัวอย่างการใช้งาน:
async function* generateSequence1(end) {
    for (let i = 1; i <= end; i++) {
        yield i;
    }
}

async function* generateSequence2(end) {
    for (let i = 10; i <= end + 9; i++) {
        yield i;
    }
}

const iterable1 = generateSequence1(5);
const iterable2 = generateSequence2(5);

(async () => {
    for await (const [value1, value2] of zip(iterable1, iterable2)) {
        console.log(value1, value2);
    }
})();

สรุป

JavaScript Async Iterator Helpers มอบวิธีการที่ทรงพลังและสวยงามในการประมวลผลสตรีมข้อมูลแบบอะซิงโครนัส โดยนำเสนอแนวทางการจัดการข้อมูลแบบฟังก์ชันและประกอบกันได้ ทำให้ง่ายต่อการสร้างไปป์ไลน์การประมวลผลข้อมูลที่ซับซ้อน ด้วยความเข้าใจในแนวคิดหลักของ Async Iterators และ Async Iterables และการใช้เมธอด helper ต่างๆ อย่างเชี่ยวชาญ คุณสามารถปรับปรุงประสิทธิภาพและความสามารถในการบำรุงรักษาโค้ด JavaScript แบบอะซิงโครนัสของคุณได้อย่างมาก ในขณะที่การสนับสนุนในเบราว์เซอร์และ runtime ยังคงเติบโตอย่างต่อเนื่อง Async Iterator Helpers ก็พร้อมที่จะกลายเป็นเครื่องมือที่จำเป็นสำหรับนักพัฒนา JavaScript สมัยใหม่