怎么通过HTML的Set的union方法将两个集合合并为包含所有元素的新集合-html教程-PHP中文网

JavaScript 原生 Set 无 union() 方法，需用 new Set([...setA, ...setB]) 模拟；自定义原型方法有污染风险；不可与 Python 的 set.union() 混淆。

怎么通过html的set的union方法将两个集合合并为包含所有元素的新集合

Set

是 JavaScript 中的数据结构，不是 HTML 的；HTML 本身没有 union() 方法。你真正想用的是 **JavaScript 的 Set 对象的 union() 方法**——但它**并不存在于原生 JavaScript 中**。这是最容易混淆的第一步：很多人搜“HTML Set union”，实际是把浏览器环境、DOM、HTML 标签和 JS 内置对象混在一起了。下面直说怎么做、为什么、以及踩坑点。

JavaScript 原生 Set 没有 union() 方法

截至 2026 年 5 月，标准 Set API 仍不提供 union() 方法。你调用 mySet.union(otherSet) 会直接报错：TypeError: mySet.union is not a function。

常见错误现象：

复制网上“Python 示例”代码到 JS 环境运行，报错
误以为浏览器兼容性已支持，实则未进入标准

用扩展运算符 + Set 构造器模拟 union 行为

最轻量、无依赖、兼容所有现代浏览器（包括 Node.js）的做法是手动合并：

把两个 Set 转成数组，用扩展运算符拼接，再套一层 new Set() 去重
const union = new Set([...setA, ...setB]);
支持任意多个 Set：new Set([...setA, ...setB, ...setC])
性能注意：对超大集合（>10 万项），多次展开可能触发内存抖动，但日常场景完全够用

用 Set.prototype 自定义 union 方法（慎用）

如果你坚持要写 setA.union(setB) 这种调用形式，可以给原型加方法：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

if (!Set.prototype.union) {
  Set.prototype.union = function(otherSet) {
    return new Set([...this, ...otherSet]);
  };
}

但要注意：

污染全局原型，在团队项目或第三方库共存时可能引发冲突
不能链式调用多个 union()（如 a.union(b).union(c) 可以，但语义上不如原生设计清晰）
TypeScript 用户需额外声明类型，否则类型推导失败

别把 Python 的 set.union() 和 JS 混了

Python 的 set.union() 是语言级内置方法，JS 没有对应物。两者语法看似相似，但：

Python：set1.union(set2, set3) —— 接收多个参数
JS 模拟：new Set([...set1, ...set2, ...set3]) —— 本质是构造新实例，非方法调用
传入非 Set 类型（如数组、字符串）时行为不同：Python union() 支持任意可迭代对象；JS 展开运算符要求目标是可迭代的，但 ['a','b'] 或 "ab" 都能直接展开，无需额外转换

真正容易被忽略的一点：**不要在循环里反复创建 Set 实例来模拟 union**。比如写成 for (x of setB) setA.add(x)，这其实是 update() 行为（原地修改），不是返回新集合——和你要的“包含所有元素的新集合”语义不符。