讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

updream

一键生成高质量推广成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laper
Laper

剧本策划到成片协作

JS Map数据结构_与Object对比

夏明酱_2487

夏明酱_2487

发布时间:2025-11-23 02:31:16

|

674人浏览过

|

来源于php中文网

原创

Map支持任意类型键且有序,性能更优;Object键仅限字符串或Symbol,语法简洁但无序,适合简单配置和JSON操作。

js map数据结构_与object对比

Map 和 Object 都是 JavaScript 中用于存储键值对的数据结构,但它们在使用方式、性能和功能上有明显区别。 选择哪一个取决于具体场景。下面从多个维度进行对比,帮助你更清楚地理解它们的差异。

1. 键的类型支持

Object 的键只能是字符串或 Symbol。 即使你用其他类型(如数字或对象)作为键,JavaScript 也会自动将其转换为字符串。

例如:
const obj = {};
obj[{}] = 'test';
console.log(obj); // {'[object Object]': 'test'}

Map 允许任何类型的值作为键,包括对象、函数、原始类型等,不会发生类型转换。

例如:
const map = new Map();
const key = {};
map.set(key, 'test');
console.log(map.get(key)); // 'test'

2. 数据的有序性

Map 是有序的。 它会按照插入顺序遍历键值对,这在需要顺序处理数据时非常有用。

Object 在 ES5 及之前是无序的,虽然现代 JavaScript 引擎通常按插入顺序返回属性(尤其是字符串键),但这不保证适用于所有情况(比如整数键会被优先排序)。

举例:
const obj = { b: 1, a: 2, 3: 3 };
console.log(Object.keys(obj)); // ['3', 'b', 'a'] —— 数字键排前面

而 Map 始终保持插入顺序:

const map = new Map();
map.set('b', 1).set('a', 2).set(3, 3);
console.log([...map.keys()]); // ['b', 'a', 3]

3. 获取大小与遍历操作

Map 提供了 size 属性直接获取键值对数量。

console.log(map.size); // 3

Object 没有内置的 size 属性,必须手动通过 Object.keys(obj).length 来计算,略显繁琐。

Expanso yaml-to-json
Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

遍历时,Map 原生支持 forEach,并且提供 entries()、keys()、values() 方法,使用更一致:

map.forEach((value, key) => {
  console.log(key, value);
});

Object 虽然也能用 for...in 或 Object.keys() 遍历,但 for...in 会遍历原型链上的可枚举属性,需要注意过滤。

4. 性能与适用场景

频繁增删键值对时,Map 性能更好。 特别是在大量动态数据操作中,Map 的设计更高效。

Map 的键值删除操作更简洁: 使用 map.delete(key),而 delete obj[key] 在某些情况下可能较慢,且影响性能(如 V8 引擎中可能导致对象去优化)。

JSON 支持方面,Object 更方便。 因为 JSON.stringify() 和 JSON.parse() 原生支持对象,而 Map 不支持,需要额外转换。

例如要序列化 Map:
const serialized = JSON.stringify([...map]);
// 反序列化时需要重新构造 Map
const restored = new Map(JSON.parse(serialized));

5. 初始化与语法简洁性

Object 创建和访问语法更简洁: 字面量 {} 和点语法或中括号访问都很直观。

const obj = { name: 'Alice' };
obj.age = 25;

Map 需要实例化,并使用 set/get 方法: 语法稍显冗长,但在逻辑复杂时更清晰。

const map = new Map([['name', 'Alice']]);
map.set('age', 25);

基本上就这些。如果你只是存储简单配置或需要 JSON 序列化,Object 更合适;如果涉及非字符串键、频繁增删、或要求顺序,Map 是更好的选择。

热门AI工具

更多
Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

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

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

2295

2023.08.07

json是什么
json是什么

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

3742

2023.08.23

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

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

1236

2023.10.13

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

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

4319

2025.09.10

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

838

2025.12.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1898

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

3084

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6324

2023.10.24

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn