JS Map

本文详细介绍了JavaScript中的Map对象,包括如何创建Map,通过key获取value,使用map.size获取大小,以及通过for of和forEach遍历Map。还讨论了如何将Map转换为数组。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Create map

//MAPS = key-val pairs - can use ANY type as a key or value
const map1 = new Map();

将key,value传入map

//Set Keys
const key1=`some string`,
      key2={},
      key3=function(){};
//Set map values by key
map1.set(key1,'Value of key1');
map1.set(key2,'Value of key2');
map1.set(key3,'Value of key3');

通过key得到map中的val

//Get value by key
console.log(map1.get(key1));
console.log(map1.get(key2));
console.log(map1.get(key3));

map.size

//Count values
console.log(map1.size); //size 

遍历map(for of)

for (let [key,value] of map)

//Loop using for...of to get keys and values
for(let [key,value] of map1){
  console.log(`${key} = ${value}`);
}

for (let key of map.keys())

// Iterate keys only
for(let key of map1.keys()){
  console.log(key);
}

for (let value of map.values())

//Iterate values only
for(let value of map1.values()){
  console.log(value);
}

注意点
for in 返回键名;
for of 返回元素;

foreach 遍历map

参数val在前,key在后;

//Loop with forEach
map1.forEach(function(val,key){
  console.log(key,val);
})

Map 转为 array

Array.from(map)

//Convert to Arrays

//Create an array of the key value pairs
const keyValArr=Array.from(map1);
console.log(keyValArr); //得到嵌套array
<think>好的,我现在需要回答用户关于JavaScript中Map对象的用法和示例的问题。首先,我要回忆Map的基本概念,确保自己理解正确。Map是ES6引入的键值对集合,和传统的Object不同,它允许任何类型的键,并且保持插入顺序。 接下来,我应该分步骤介绍Map的用法。可能需要包括创建Map、添加元素、获取元素、检查存在性、删除元素、遍历方法等。每个部分都要有示例代码,这样用户更容易理解。 然后,要强调Map与普通Object的区别,比如键的类型、顺序维护、性能等。用户可能想知道何时使用Map而不是Object,所以这部分需要详细说明。 用户的问题中还提到了示例,所以我要准备几个常见的使用场景,比如用对象作为键、遍历Map的方法、与其他数据结构的转换等。此外,可能需要提到Map的常用方法,如set、get、has、delete、size属性,以及clear方法。 还需要检查是否有常见的错误或注意事项,例如引用类型的键导致的内存泄漏问题,或者JSON序列化的限制,因为Map无法直接转为JSON,可能需要转换为数组或其他结构。 最后,根据用户提供的引用,特别是引用[2],提到循环引用导致无法转换为JSON的情况,可能需要在回答中提及这一点,说明Map在处理某些数据结构时的优势或需要注意的地方。 现在需要组织这些内容,确保结构清晰,使用中文,代码示例正确,并且符合系统级指令中的格式要求,比如行内公式用$...$,独立公式用$$...$$,但这里主要是代码,可能不需要数学公式。不过要检查是否有需要数学表达的地方,比如算法复杂度,可能需要用行内公式,比如时间复杂度$O(1)$。 还要生成相关问题,可能涉及Map和Object的比较、Map的性能、实际应用案例、如何遍历或转换Map等。 在写作过程中,要确保LaTeX语法正确,比如方法名用代码块,变量也用代码块。引用用户提供的引用[1]和[2]在适当的地方,比如提到循环引用时引用[2]。 现在开始组织内容,确保每个部分简洁明了,示例代码正确,并自然插入引用。</think>### JavaScript中Map对象的用法与示例 #### 1. Map对象的基本特性 Map是ES6引入的键值对集合,与普通Object相比有以下特点: - 键可以是任意类型(包括对象、函数等),而Object的键只能是字符串或Symbol[^1]。 - 严格维护插入顺序,遍历时按插入顺序返回键值。 - 提供更直观的API(如`set()`、`get()`、`has()`等)。 #### 2. 基础用法示例 **创建与操作Map**: ```javascript // 创建Map const map = new Map(); // 添加键值对(支持链式调用) map.set('name', 'Alice').set({ id: 1 }, 'User Object'); // 获取值 console.log(map.get('name')); // 输出: Alice // 检查键是否存在 console.log(map.has('age')); // 输出: false // 删除键值对 map.delete({ id: 1 }); // 注意:此处无法删除,因为对象引用不同 // 获取元素数量 console.log(map.size); // 输出: 1 ``` **遍历Map**: ```javascript map.forEach((value, key) => { console.log(`${key}: ${value}`); }); // 使用迭代器 for (const [key, value] of map.entries()) { console.log(key, value); } ``` #### 3. 实际应用场景 **场景1:使用对象作为键** 存储与DOM元素关联的元数据: ```javascript const buttons = document.querySelectorAll('button'); const metadata = new Map(); buttons.forEach(button => { metadata.set(button, { clicks: 0 }); }); button.addEventListener('click', () => { const data = metadata.get(button); data.clicks++; }); ``` **场景2:数据转换** 将Map转换为数组: ```javascript const map = new Map([['a', 1], ['b', 2]]); const array = Array.from(map); // [['a', 1], ['b', 2]] ``` **场景3:替代对象实现有序存储** 当需要按顺序处理键值对时: ```javascript const orderedMap = new Map(); orderedMap.set('z', 3).set('a', 1); console.log([...orderedMap.keys()]); // 输出: ['z', 'a'] ``` #### 4. 与Object的对比 | 特性 | Map | Object | |--------------------|----------------------|----------------------| | 键类型 | 任意类型 | 字符串/Symbol | | 顺序维护 | 插入顺序 | ES6后部分保留[^1] | | 内置方法 | `set()`/`get()`等 | 无直接API | | 序列化 | 需手动转换 | 支持JSON序列化[^2] | #### 5. 注意事项 - **内存泄漏**:若使用对象作为键,需确保移除键时释放引用。 - **JSON序列化**:Map无法直接转为JSON,需先转换为数组: ```javascript const map = new Map([['name', 'Bob'], ['age', 30]]); const json = JSON.stringify(Array.from(map)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值