JavaScript 中对象解构怎么在前端 Worker 线程接收 message 时解构数据-js教程-PHP中文网

Worker中解构event.data需在self.onmessage回调内进行，仅适用于结构化可克隆对象；应加默认值、重命名及类型校验，ArrayBuffer等二进制数据不可解构。

javascript 中对象解构怎么在前端 worker 线程接收 message 时解构数据

在 Worker 线程中接收主线程发来的消息时，可以直接用对象解构提取 event.data 中的字段，语法和主线程完全一致，但需注意两点：一是必须写在 self.onmessage 回调里，二是解构目标必须是结构化可克隆的对象（不能是函数、DOM 节点等）。

Worker 中直接解构 event.data

主线程发送的是普通对象（如 { type: 'sort', list: [3, 1, 4] }），Worker 可以在 onmessage 回调中用解构快速取值：

self.onmessage = ({ data: { type, list } }) => {
  if (type === 'sort') {
    const result = [...list].sort((a, b) => a - b);
    self.postMessage({ type, result });
  }
};

这里用了嵌套解构：{ data: { type, list } } 直接从 MessageEvent 对象中取出 data，再从中解出 type 和 list，省去中间变量。

带默认值和重命名的解构更稳妥

实际场景中数据结构可能不完整，建议加上默认值或安全重命名：

精英前端设计-专业版

企业级前端设计系统，支持多页面应用、React/Vue组件、品牌一致性与高级动效编排。

下载

用 data = {} 防止 undefined 报错
用 payload 重命名避免和内置 data 混淆
对数组字段加默认空数组 items = []

self.onmessage = ({ data: payload = {} }) => {
  const { type = '', items = [], id } = payload;
  if (type === 'process' && items.length > 0) {
    const sum = items.reduce((a, b) => a + b, 0);
    self.postMessage({ id, sum });
  }
};

解构前先校验数据类型

解构本身不校验类型，如果主线程误传了非对象（比如字符串或 null），会静默失败或报错。推荐加一层判断：

用 typeof payload === 'object' && payload !== null 初步过滤
对关键字段用 Array.isArray(items) 显式检查
避免直接解构 payload.items.map 类操作，先确保存在

self.onmessage = (e) => {
  const payload = e.data;
  if (typeof payload !== 'object' || payload === null) return;
<p>const { type, config } = payload;
if (type === 'render' && config && typeof config === 'object') {
// 安全使用 config 中的字段
self.postMessage({ ok: true });
}
};</p>