JavaScript 中 Array 、 Set 、 WeakSet 区别

JavaScript 中 Set 和 Array 的核心区别在于唯一性、顺序性和方法设计。Set 是唯一值集合,Array 是有序列表。

一、Set 与 Array 核心区别

二、关键差异示例

1. 唯一性处理

javascript 复制代码
const arr = [1, 2, 2, 3];
const set = new Set([1, 2, 2, 3]);

console.log(arr); // [1, 2, 2, 3]
console.log([...set]); // [1, 2, 3]

2. 存在性检查性能

javascript 复制代码
// Set 的 has() 是 { O(1): 常数时间,无论数据有多少,操作时间基本固定 },
set.has(2); // true,速度快

//  Array.includes() 是{O(n)  线性时间 } 就像一本本翻书,元素越多越慢
arr.includes(2); // true,数组大时较慢,最坏情况:100个元素,要检查到第100个,还能发现。

3. 转换技巧

javascript 复制代码
// 数组去重
const unique = [...new Set(array)];

// Set 转数组
const arrayFromSet = Array.from(set);

WeakSet 与 Set 核心区别

Set 可以存储任何类型,WeakSet只能存储对象。WeakSet是弱引用,不影响垃圾回收。

1、存储限制

javascript 复制代码
// Set 可以存储任何类型
const set = new Set();
set.add(1);           // ✅ 数字
set.add("hello");    // ✅ 字符串
set.add({});         // ✅ 对象
set.add(Symbol());   // ✅ Symbol
set.add(null);       // ✅ null
set.add(undefined);  // ✅ undefined
set.add([1, 2, 3]);  // ✅ 数组
set.add(function(){});// ✅ 函数

// WeakSet 只能存储对象
const weakSet = new WeakSet();
weakSet.add({});         // ✅ 对象
weakSet.add([]);         // ✅ 数组(也是对象)
weakSet.add(new Date()); // ✅ Date 对象
weakSet.add(function(){});// ✅ 函数(也是对象)

weakSet.add(1);          // ❌ TypeError: Invalid value used in weak set
weakSet.add("hello");    // ❌ TypeError: Invalid value used in weak set
weakSet.add(Symbol());   // ❌ TypeError: Invalid value used in weak set
weakSet.add(null);       // ❌ TypeError: Invalid value used in weak set
相关推荐
JieE2127 小时前
LeetCode 56. 合并区间|超清晰 JS 图解思路,面试高频区间题
javascript·算法·面试
candyTong10 小时前
RTK 技术原理:一次典型会话里,80% 上下文是怎么省下来的
javascript·后端·架构
_柳青杨14 小时前
深入理解 JavaScript 事件循环
前端·javascript
大家的林语冰20 小时前
ES5 凉凉,Babel 8 正式发布,默认不再编译为 ES5 和 CJS......
前端·javascript·前端工程化
weedsfly1 天前
异步编程全景与事件循环——彻底搞懂 JS 执行机制
前端·javascript
用户1733598075371 天前
纯前端 PDF 数字签名实战:Vue 3 + pdf-lib 在浏览器里完成签名嵌入
前端·javascript
JieE2121 天前
LeetCode 226. 翻转二叉树|JS 递归超详细拆解,二叉树入门经典题
javascript·算法
JieE2121 天前
LeetCode 104. 二叉树的最大深度|递归思路超详细拆解
javascript·算法
kyriewen2 天前
我用 AI 一周写完了整个项目,上线第一天就崩了——这是我踩过最贵的 5 个坑
前端·javascript·ai编程
Larcher2 天前
AI Loop:让AI像人一样自主完成任务的核心机制
javascript·人工智能·设计模式