Map对象在JavaScript循环中的使用

在JavaScript中,Map对象是一种新的键值对集合数据结构,与传统的Object有着本质的差异。一个Map的键可以是任意值,包括函数、对象或任何原始值。Map对象与传统的Object相比,有以下几个显著的优点:

  • 键的范围不限于字符串和Symbol。
  • Map对象的键值对是有序的,即键值对的插入顺序是如何,迭代顺序就是如何。
  • Map 的大小可以通过 size 属性轻松获取,而不是像Object那样必须手动计算。
  • Map 是可迭代的,可以直接使用 for...of 循环进行迭代。
  • Map 进行迭代效率比Object的迭代(例如,使用 Object.keys 或者 Object.entries)要来得高。

在JavaScript中进行循环操作时,使用Map对象,你可以采用多种方式进行迭代,它们分别有着不同的用途和语法结构。

for...of 循环

for...of 循环直接迭代Map中的键值对,它返回每个项的[key, value]数组。

复制代码
let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

for (let [key, value] of myMap) {
  console.log(key, value);
}
​

forEach() 方法

Map对象的 forEach() 方法类似于数组的 forEach() 方法,它按照插入顺序迭代每个键值对,并执行提供的回调函数。

复制代码
myMap.forEach((value, key) => {
  console.log(key, value);
});
​

迭代器方法

Map对象提供了三个迭代器方法:keys()values()entries()。这些方法返回新的迭代器对象,你可以用 for...of 循环或者其他迭代器协议的方法来遍历。

  • keys() 迭代Map中的键。

  • values() 迭代Map中的值。

  • entries() 迭代Map中的项即键值对。

    for (let key of myMap.keys()) {
    console.log(key);
    }

    for (let value of myMap.values()) {
    console.log(value);
    }

    for (let [key, value] of myMap.entries()) {
    console.log(key, value);
    }

使用展开运算符

你还可以通过展开运算符 ... 去将Map对象的 keysvalues、或 entries 迭代器转换成数组。

复制代码
console.log([...myMap.keys()]);   // 输出所有的键
console.log([...myMap.values()]); // 输出所有的值
console.log([...myMap.entries()]); // 输出所有的键值对
​

由于Map对象跟传统的对象类似,但提供了更多的迭代功能,它被广泛用来代替Object存储键值对。适当的使用Map和配套的迭代方法,可以让代码更加清晰,提高数据操作的灵活性和效率。在数据量大或者对迭代顺序有特定需求时,Map会是一个很好的选择。

相关推荐
兰亭妙微8 分钟前
2026年UX/UI五大趋势:AI、AR与包容性设计将重新定义用户体验
开发语言·ui·1024程序员节·界面设计·设计趋势
fhsWar27 分钟前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
懒羊羊不懒@30 分钟前
Java—枚举类
java·开发语言·1024程序员节
m0_7482402532 分钟前
C++智能指针使用指南(auto_ptr, unique_ptr, shared_ptr, weak_ptr)
java·开发语言·c++
Evand J42 分钟前
【MATLAB例程】自适应渐消卡尔曼滤波,背景为二维雷达目标跟踪,基于扩展卡尔曼(EKF)|附完整代码的下载链接
开发语言·matlab·目标跟踪·1024程序员节
百锦再1 小时前
低代码开发的约束性及ABP框架的实践解析
android·开发语言·python·低代码·django·virtualenv·rxjava
泷羽Sec-静安1 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
csbysj20201 小时前
Scala 字符串
开发语言
小时前端1 小时前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4961 小时前
Web Components简介及如何使用
前端·javascript·html