讲师中心 微信公众号
AI工具推荐 视频效率加速

JS 地图

浅瑶同学_3463

浅瑶同学_3463

发布时间:2024-07-19 09:01:01

|

870人浏览过

|

来源于dev.to

转载

js 地图

javascript 中的 map 是键值对的集合,其中键可以是任何类型。它保留插入的顺序,这意味着项目按照添加的顺序进行迭代。

地图的主要特征;

  1. 唯一键:地图中的每个键都是唯一的。
  2. 键的任何数据类型:与对象不同,键可以是任何数据类型,包括函数、对象或任何原始类型。
  3. 可迭代: 您可以迭代 map 的键、值或条目。

基本操作

创建地图

let funnymap = new map();

将元素添加到地图

funnymap.set('a', 1); // string key
funnymap.set(2, 'two'); // number key
funnymap.set(true, 'yes'); // boolean key
funnymap.set({name: 'obj'}, 'object'); // object key

// funny example
funnymap.set('knock-knock', 'who’s there?');

从地图获取值

console.log(funnymap.get('a')); // 1
console.log(funnymap.get(2)); // two
console.log(funnymap.get(true)); // yes

// funny example
console.log(funnymap.get('knock-knock')); // who’s there?

检查密钥

console.log(funnymap.has('a')); // true
console.log(funnymap.has(42)); // false

// funny example
console.log(funnymap.has('chicken')); // false (it crossed the road)

删除元素

funnymap.delete('a');
console.log(funnymap.has('a')); // false

// funny example
funnymap.delete('knock-knock');
console.log(funnymap.get('knock-knock')); // undefined (no one answered)

获取地图的大小

console.log(funnymap.size); // 3 after deletion

// funny example
console.log(`the map has ${funnymap.size} jokes left.`);

清除地图

funnymap.clear();
console.log(funnymap.size); // 0

// funny example
console.log(`all jokes are cleared from the map.`);

迭代地图

用于...的

funnymap.set('banana', 'yellow');
funnymap.set('apple', 'red');
funnymap.set('grape', 'purple');

// iterating over keys
for (let key of funnymap.keys()) {
    console.log(`key: ${key}`);
}

// iterating over values
for (let value of funnymap.values()) {
    console.log(`value: ${value}`);
}

// iterating over entries
for (let [key, value] of funnymap.entries()) {
    console.log(`key: ${key}, value: ${value}`);
}

// funny example
funnymap.set('dad joke', 'what do you call fake spaghetti? an impasta!');
for (let [key, value] of funnymap.entries()) {
    console.log(`here’s a ${key}: ${value}`);
}

使用 foreach

funnymap.foreach((value, key) => {
    console.log(`key: ${key}, value: ${value}`);
});

// funny example
funnymap.set('bad pun', 'i’m reading a book on anti-gravity. it’s impossible to put down!');
funnymap.foreach((value, key) => {
    console.log(`here’s a ${key}: ${value}`);
});

实际用途

字数统计(搞笑版)

想象一下您想要计算某些单词在笑话集中出现的次数:

let jokeText = "Why did the scarecrow win an award? Because he was outstanding in his field!";

// Splitting text into words
let words = jokeText.split(/\W+/);

let wordCount = new Map();

words.forEach(word => {
    word = word.toLowerCase();
    if (wordCount.has(word)) {
        wordCount.set(word, wordCount.get(word) + 1);
    } else {
        wordCount.set(word, 1);
    }
});

wordCount.forEach((count, word) => {
    console.log(`Word: ${word}, Count: ${count}`);
});

// Funny example
console.log('Word counts in our joke:');
wordCount.forEach((count, word) => {
    console.log(`"${word}": ${count} times`);
});

概括

javascript 中的 map 是一种通用的数据结构,可以保存任何数据类型的键值对,提供简单的迭代方法,并维护元素的顺序。它对于需要比常规对象更灵活的密钥管理的场景非常有用,例如计算笑话中的单词数或存储对各种谜语的响应。

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

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

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

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

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

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

DeepSeek

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

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

相关专题

更多
数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3231

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

554

2025.10.31

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

542

2026.02.12

php中foreach用法
php中foreach用法

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

798

2025.12.04

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2721

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

376

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

417

2026.01.06

C++ 数据结构与算法实现教程合集
C++ 数据结构与算法实现教程合集

以 C++ 为实现语言,系统讲解核心数据结构与算法,涵盖链表(单链表/双链表/环检测)、栈与队列(单调栈/优先队列)、二叉树(遍历/BST/AVL/红黑树)、哈希表(开地址法/链地址法)、图(邻接表/BFS/DFS/Dijkstra/拓扑排序)、常见排序算法(快排/归并/堆排/计数排序)的实现与复杂度分析,同时分享 LeetCode 刷题技巧、竞赛编程常用模板(二分/前缀和/滑动窗口/动态规划),帮助开发者夯实算法基础。

472

2026.05.09

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

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

精品课程

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

共17课时 | 6.5万人学习

第三期培训_PHP开发
第三期培训_PHP开发

共116课时 | 33万人学习

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

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