JavaScript 数组去重怎么在 Web Worker 中执行-js教程-PHP中文网

在 web worker 中执行数组去重可避免主线程阻塞，适用于大数据量场景；支持基础类型直接用 set，对象数组需按字段（如 id）配合 set 或 map 去重；数据须可序列化，postmessage 自动深拷贝。

javascript 数组去重怎么在 web worker 中执行

在 Web Worker 中执行 JavaScript 数组去重，核心是把耗时的去重逻辑从主线程移出，避免阻塞 UI。Web Worker 本身不支持直接访问 DOM 或全局对象（如 window），但可以正常运行标准 JavaScript，包括数组操作和 Set、Map 等内置结构。

为什么要在 Web Worker 中去重？

当数组非常大（例如数万甚至百万级元素）时，去重可能消耗几十到几百毫秒，导致页面卡顿、响应延迟。Worker 在后台线程运行，不影响主线程渲染和交互，适合这类纯计算任务。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

基础实现：传递数据 + 返回结果

主线程创建 Worker，将数组序列化后传入；Worker 收到后去重，再把结果发回。注意：传递的数据需可被 structuredClone（现代浏览器默认支持），不能含函数、Date 对象、RegExp 等不可序列化值。

主线程中：

const worker = new Worker('dedupe-worker.js');
const largeArray = [1, 2, 2, 3, 4, 4, 5];
worker.postMessage(largeArray); // 自动深拷贝
worker.onmessage = (e) => { console.log('去重后:', e.data); };

dedupe-worker.js 中：

self.onmessage = function(e) {
  const arr = e.data;
  const unique = [...new Set(arr)]; // 最简方式，适用于基础类型
  self.postMessage(unique);
};

处理复杂对象数组（按字段去重）

Set 无法直接去重对象，需手动提取唯一标识（如 id 或 name）。Worker 中可用 Map 或对象缓存已见 key，避免重复。

Worker 内示例（按 id 去重）：

self.onmessage = function(e) {
  const arr = e.data;
  const seen = new Set();
  const unique = arr.filter(item => {
    if (seen.has(item.id)) return false;
    seen.add(item.id);
    return true;
  });
  self.postMessage(unique);
};