如何创建Web Worker数组并向其中的Worker发送postMessage

嘿，我来帮你搞定这个需求，下面是完全可运行的代码方案，还会帮你解释之前示例里的问题~

核心思路说明 #

之前你提到示例里workers[迭代器]返回undefined，是因为数组没有被正确填充Worker实例。我们需要先获取设备核心数，再逐个创建Worker并添加到数组中，之后就能正常调用每个Worker的postMessage方法了。

完整可运行代码 #

步骤1：获取设备核心数 #

浏览器提供了navigator.hardwareConcurrency API，可以直接获取设备的逻辑核心数，这是我们确定Worker数量的依据。

步骤2：创建Web Worker数组 + 批量发送消息 #

这里用Blob创建内联Worker脚本，不需要额外的单独Worker文件，直接就能运行：

async function setupWorkers() {
  // 1. 获取设备核心数，若浏览器不支持则默认用4个
  const coreCount = navigator.hardwareConcurrency || 4;
  const workers = [];

  // 2. 创建Worker脚本内容（内联方式，无需额外文件）
  const workerScript = `
    self.onmessage = function(e) {
      console.log('Worker收到消息:', e.data);
      // 可以在这里添加Worker的处理逻辑
      self.postMessage('Worker已处理消息: ' + e.data);
    };
  `;
  const blob = new Blob([workerScript], { type: 'application/javascript' });
  const workerUrl = URL.createObjectURL(blob);

  // 3. 循环创建Worker并加入数组
  for (let i = 0; i < coreCount; i++) {
    const worker = new Worker(workerUrl);
    // 可选：监听Worker的反馈消息
    worker.onmessage = function(e) {
      console.log(`来自Worker ${i}的反馈:`, e.data);
    };
    workers.push(worker);
  }

  // 4. 向每个Worker发送消息
  workers.forEach((worker, index) => {
    worker.postMessage(`这是发给Worker ${index}的任务`);
  });

  // 记得在不需要的时候释放Blob URL，避免内存泄漏
  // 比如所有Worker完成任务后调用：URL.revokeObjectURL(workerUrl);
}

// 调用启动函数
setupWorkers();

关键细节解释 #

• Blob内联脚本：解决了必须单独创建Worker文件的麻烦，适合快速演示和集成。
• Worker实例存储：通过workers.push(worker)把每个创建好的Worker实例存入数组，这样遍历数组时就能拿到有效的Worker对象，不会出现undefined的问题。
• 兼容性处理：如果浏览器不支持navigator.hardwareConcurrency，默认使用4个Worker，保证代码能正常运行。

内容的提问来源于stack exchange，提问作者static660