JavaScript Web Worker 怎么传递 Date-js教程-PHP中文网

在 javascript 中，web worker 无法直接传递 date 对象实例，因为跨线程通信基于结构化克隆算法（structured clone algorithm），该算法不支持日期对象。正确的做法是将 date 转换为时间戳（毫秒数）或 iso 8601 字符串进行传输，接收方再将其还原为新的 date 对象。

JavaScript Web Worker 怎么传递 Date

Worker 端如何发送 Date 数据

Worker 端通过 postMessage() 发送数据时，必须先将 Date 实例序列化为基本类型。推荐使用 .getTime() 获取毫秒时间戳，或者使用 .toISOString() 获取标准字符串。主线程收到消息后，通过 new Date(data.timestamp) 重新实例化对象。

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

// 创建当前时间的 Date 对象
const now = new Date();

// 错误做法：直接发送 Date 对象
// worker.postMessage(now); // 结果为 null 或 undefined

// 正确做法：发送时间戳
worker.postMessage({
  type: 'date-update',
  timestamp: now.getTime()
});

// 或者发送 ISO 字符串
worker.postMessage({
  type: 'date-string',
  isoString: now.toISOString()
});

上述代码展示了两种常见的序列化方式。第一种发送的是数字类型的时间戳，第二种发送的是字符串类型的 ISO 格式。这两种方式都能被结构化克隆算法正确处理并传输到 Worker 线程。

主线程如何接收并还原 Date 数据

主线程监听 Worker 的 message 事件，从 event.data 中提取序列化后的数据，并使用构造函数还原为 Date 对象。如果 Worker 发送的是时间戳，主线程直接使用数字；如果发送的是 ISO 字符串，主线程同样可以使用 new Date(string) 进行解析。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

worker.onmessage = function(event) {
  const data = event.data;
  
  if (data.type === 'date-from-worker') {
    // 假设 Worker 发送了时间戳
    const restoredDate = new Date(data.timestamp);
    console.log(restoredDate instanceof Date); // true
    console.log(restoredDate.getTime() === data.timestamp); // true
  }
};

// Worker 内部逻辑示例 (worker.js)
self.onmessage = function(event) {
  const receivedTimestamp = event.data.timestamp;
  const workerDate = new Date(receivedTimestamp);
  
  // 处理完业务逻辑后，将结果发回主线程
  self.postMessage({
    type: 'date-from-worker',
    timestamp: workerDate.getTime()
  });
};

这段代码演示了完整的双向通信流程。主线程发送时间戳，Worker 接收并可能进行计算，最后将处理后的时间戳返回。主线程接收到后，立即将其转换回 Date 对象，确保后续操作可以正常使用日期方法。