0

0

什么是javascript的map和set对象_它们与普通对象数组有何区别

幻影之瞳

幻影之瞳

发布时间:2026-01-08 18:51:08

|

706人浏览过

|

来源于php中文网

原创

Map和Set是ES6新增的独立数据结构,非语法糖;Map支持任意类型键、按插入顺序遍历、size属性直接获取长度;Set提供O(1)查找的唯一性集合,遍历也保持插入顺序。

什么是javascript的map和set对象_它们与普通对象数组有何区别

Map 和 Set 是 ES6 新增的原生数据结构,不是语法糖,也不等价于用 {}[] 模拟出来的“哈希表”或“去重数组”——它们有独立的内存模型、遍历顺序保证和不可替代的语义。

Map 为什么不能用普通对象代替

普通对象 {} 的键只能是字符串或 Symbol,而 Map 允许任意类型(包括对象、函数、nullundefined)作为键:

const obj = {};
const key1 = { id: 1 };
const key2 = [1, 2];

obj[key1] = 'a'; // 自动调用 key1.toString() → "[object Object]"
obj[key2] = 'b'; // 自动调用 key2.toString() → "1,2"
// 实际上 obj 里只有两个字符串键,原始引用已丢失

const map = new Map();
map.set(key1, 'a'); // ✅ 保留 key1 引用
map.set(key2, 'b'); // ✅ 保留 key2 引用
map.get(key1); // 'a'

其他关键区别:

  • Map键值对数量可通过 map.size 直接获取;对象需手动 Object.keys(obj).length,且不包含原型链属性
  • Map 保持插入顺序遍历(for...ofkeys()values()entries() 都按写入顺序);对象属性遍历顺序在 ES2015+ 虽有规范,但对数字键仍存在隐式排序(如 obj[100] 会排在 obj[2] 前面)
  • Maphas()delete()clear() 是明确语义的操作;对象需依赖 indelete(性能差)、for...in + hasOwnProperty 等组合,易出错

Set 为什么不是 Array.filter((v, i, a) => a.indexOf(v) === i)

Set 的核心价值不是“去重”,而是“成员唯一性 + 快速查找”的原子能力。它内部使用哈希表实现,has() 平均时间复杂度为 O(1),而数组的 indexOfincludes 是 O(n):

立即学习Java免费学习笔记(深入)”;

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const set = new Set(arr);

arr.includes(9); // ✅ 但要遍历到第9个元素
set.has(9);      // ✅ 直接定位(哈希计算后查桶)

常见误用场景:

  • [...new Set(arr)] 去重后又频繁查某个值是否存在 → 应直接用 Set,别转回数组
  • Set 当作“无序集合”而忽略其遍历顺序:它也保持插入顺序,for (const v of mySet) 和插入顺序一致
  • 误以为 Set 能自动 deep-equal 去重:它只做 SameValueZero 比较(即 ===),new Set([{a:1}, {a:1}]) 会存两个对象

Map/Set 与 JSON、localStorage 的互操作限制

JSON.stringify()localStorage.setItem() 都不支持 Map / Set

PatentPal专利申请写作
PatentPal专利申请写作

AI软件来为专利申请自动生成内容

下载
JSON.stringify(new Map([['a', 1]])); // "{}" —— 空对象
JSON.stringify(new Set([1, 2]));      // "{}"

// 正确序列化 Map(仅限键值都可 JSON 化)
JSON.stringify([...myMap.entries()]); // [["a",1],["b",2]]

// 正确序列化 Set
JSON.stringify([...mySet]); // [1,2,3]

反序列化时也要手动重建:

const data = JSON.parse(jsonStr);
const map = new Map(data); // ✅ 只要 data 是二维数组格式
const set = new Set(data); // ✅ 只要 data 是一维数组格式

注意:Map 的键如果是函数、DOM 元素、undefined 等,无法被 JSON 序列化,这种情况下不能走 JSON 流程。

什么时候该选 Map/Set,而不是对象/数组

Map 当:

  • 键不是字符串/Symbol(比如用 DOM 元素当 key 缓存计算结果)
  • 需要频繁增删查,且键动态变化(避免对象属性泄漏或 delete 性能陷阱)
  • 要可靠获取键值对数量或按插入顺序遍历

Set 当:

  • 核心需求是“是否存在”(如权限校验、URL 去重缓存、事件监听器去重)
  • 需要高效合并、交集、差集操作(配合 filter + has 手写,比嵌套循环快得多)
  • 不想意外覆盖原型属性({}.constructor 是常见坑,Set 没这个问题)

真正容易被忽略的一点:Map/Set 是可迭代对象Symbol.iterator),能直接用于 for...of、展开运算符、解构,但它们没有数组的 map/filter 方法——想用这些,得先转成数组,或者用 Array.from(map.keys()) 这类显式转换。这不是缺陷,而是设计意图:它们专注“存储+查找”,变换逻辑交给 Array 处理更清晰。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

457

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

549

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

337

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

233

2025.12.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号