当前位置：首页 > news >正文

JavaScript 中 “new Map()”的使用

news 来源：原创 2025/5/14 10:46:15

new Map() 是 JavaScript 中用于创建 Map 对象 的构造函数。Map 是一种键值对集合，类似于普通对象（Object），但有以下区别：

1. Map 的特点

1.1 键的类型

Map：键可以是任意类型（包括对象、函数、基本类型等）。
Object：键只能是字符串或 Symbol。

1.2 顺序

Map：键值对按照插入顺序排列。
Object：键的顺序不一定与插入顺序一致。

1.3 大小

Map：可以通过 size 属性直接获取键值对的数量。
Object：需要手动计算键的数量。

1.4 性能

Map：在频繁增删键值对的场景下，性能优于 Object。
Object：在静态键值对的场景下，性能优于 Map。

2. Map 的基本用法

2.1 创建 Map

const map = new Map();

2.2 添加键值对

使用 set(key, value) 方法添加键值对。

map.set('name', 'Alice');
map.set(1, 'One');
map.set({ key: 'obj' }, 'This is an object');

2.3 获取值

使用 get(key) 方法获取值。

console.log(map.get('name')); // 输出: "Alice"
console.log(map.get(1)); // 输出: "One"

2.4 检查键是否存在

使用 has(key) 方法检查键是否存在。

console.log(map.has('name')); // 输出: true
console.log(map.has('age')); // 输出: false

2.5 删除键值对

使用 delete(key) 方法删除键值对。

map.delete('name');
console.log(map.has('name')); // 输出: false

2.6 获取键值对数量

使用 size 属性获取键值对数量。

console.log(map.size); // 输出: 2

2.7 清空 Map

使用 clear() 方法清空所有键值对。

map.clear();
console.log(map.size); // 输出: 0

3. 遍历 Map

3.1 遍历键

使用 keys() 方法获取所有键。

for (const key of map.keys()) {
  console.log(key);
}

3.2 遍历值

使用 values() 方法获取所有值。

for (const value of map.values()) {
  console.log(value);
}

3.3 遍历键值对

使用 entries() 方法获取所有键值对。

for (const [key, value] of map.entries()) {
  console.log(`${key}: ${value}`);
}

3.4 使用 `forEach` 遍历

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

4. Map 的常见使用场景

4.1 存储复杂键

当键是对象或函数时，Map 是更好的选择。

const objKey = { id: 1 };
const funcKey = () => {};

const map = new Map();
map.set(objKey, 'This is an object key');
map.set(funcKey, 'This is a function key');

console.log(map.get(objKey)); // 输出: "This is an object key"
console.log(map.get(funcKey)); // 输出: "This is a function key"

4.2 维护插入顺序

当需要维护键值对的插入顺序时，Map 是更好的选择。

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// 输出:
// a: 1
// b: 2
// c: 3

4.3 缓存数据

Map 可以用于缓存数据，键可以是任意类型。

const cache = new Map();

function getData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const data = fetchDataFromServer(key); // 假设从服务器获取数据
  cache.set(key, data);
  return data;
}

5. Map 与 Object 的对比

特性	Map	Object
键的类型	任意类型	字符串或 Symbol
键的顺序	插入顺序	不一定
大小	通过 `size` 属性获取	需要手动计算
性能	频繁增删时性能更好	静态键值对时性能更好
默认键	无	有原型链上的默认键