JavaScript Map用法详解

小蓝 • 2024-12-20 15:02 • 编程

一、Map简介

Map是JavaScript中ES6新增的一种数据结构，用于存储键值对的集合。与Object类似，但是Map提供了更为灵活与强大的数据结构。

二、Map的基础用法

1. 创建Map实例

const map = new Map();

2. 添加键值对

map.set('name', 'Alice');
map.set('age', 28);

3. 获取键值对

map.get('name'); // 'Alice'

4. 检查键是否存在

map.has('name'); // true

5. 获取键值对数量

map.size; // 2

三、Map的高级用法

1. 可以使用任何类型作为键

除了undefined，可以使用任何类型的值作为键：

const map2 = new Map();
const key1 = {};
const key2 = {};
map2.set(key1, 'value1');
map2.set(key2, 'value2');
map2.get(key1); // 'value1'

这是Object无法做到的。

2. 链式调用

Map的set方法返回Map实例本身，因此可以使用链式调用：

map.set('name', 'Bob')
   .set('age', 30);

3. 可以使用迭代器遍历Map

可以使用for…of语句遍历Map，或者使用forEach()方法遍历键值对：

for (const [key, value] of map) {
  console.log(key, value);
}
map.forEach((value, key) => {
  console.log(key, value);
});

4. 可以使用数组初始化Map

可以使用数组创建Map对象。数组的每一项应为一个键值对的数组：

const arr = [['name', 'Charlie'], ['age', 32]];
const map3 = new Map(arr);

5. 可以使用spread运算符初始化Map

可以使用spread运算符将一个Map转化为数组，或者将一个数组转化为Map：

// Map转化为数组
const map4 = new Map([['name', 'David'], ['age', 22]]);
const arr2 = [...map4];

// 数组转化为Map
const arr3 = [['name', 'Emma'], ['age', 25]];
const map5 = new Map(arr3);

四、Map的应用场景

由于Map可以使用任何类型作为键，因此在处理一些特殊的数据结构且需要设置其他类型的键时，Map更加方便。以下是一些Map常见的使用场景：

1. 存储函数的参数和返回值

const memoize = (fn) => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log('Cache hit!');
      return cache.get(key);
    }
    console.log('Cache miss!');
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }
};

const fibonacci = memoize((n) => {
  if (n < 2) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
});

fibonacci(10); // 第一次计算，输出Cache miss!，计算结果为55
fibonacci(10); // 第二次计算，输出Cache hit!，返回缓存中的结果55

2. 存储DOM元素的数据

当需要在DOM元素上存储数据时，使用Map比在元素上设置属性更安全。因为在某些情况下，属性的名字可能会被覆盖，而Map不会出现这个问题。

const map6 = new Map();
const button = document.querySelector('button');
map6.set(button, { count: 0 });

button.addEventListener('click', () => {
  const data = map6.get(button);
  data.count += 1;
  console.log(`Button clicked ${data.count} times!`);
});

3. 存储异步操作的状态

Map可以容易存储异步操作的状态，并且保持键值对的顺序不变。以下是一个Map存储Promise对象的例子：

const map7 = new Map();
const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Promise 1 resolved!');
  }, 1000);
});
const p2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Promise 2 resolved!');
  }, 2000);
});

map7.set(p1, 1);
map7.set(p2, 2);

Promise.all([p1, p2]).then((values) => {
  values.forEach((value) => {
    console.log(map7.get(value));
  });
});

// 输出为
// 1
// 2

五、总结

通过本篇文章，我们介绍了JavaScript中Map的基础用法和高级用法，学习了Map与Object的区别和应用场景。在日常的开发中，我们可以根据具体情况选择使用Map或者Object，以提高代码的效率和可读性。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/278990.html