JavaScript ES6新特性——Map的全面理解和运用案例分享

引言

JavaScript 中的 Map 数据结构是一种特殊的键值对集合，它的键可以是任何类型的值（包括对象），且键值对的顺序是可以被保留的。相比传统的 Object，Map 提供了更加强大且灵活的数据存储和检索功能。

Map 对象创建

// 1.创建一个空的 Map 对象
let myMap = new Map();

// 2. 或者通过 new Map(iterable) 初始化，参数是键值对的数组或其他可迭代对象
let myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  [123, 'numericValue'],
  [{objKey: true}, 'objectValue']
]);

Map 方法

• set(key, value)： 向 Map 对象添加或更新一个指定的键值对。

const myMap = new Map();

// 将一个新元素添加到 Map 对象
myMap.set("bar", "foo");
myMap.set(1, "foobar");

// 在 Map 对象中更新某个元素的值
myMap.set("bar", "baz");

// 链式添加元素
myMap.set("bar", "foo").set(1, "foobar").set(2, "baz");

• get(key)： 获取与给定键关联的值。

const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.get("bar")); // 返回 "foo"
console.log(myMap.get("baz")); // 返回 undefined

// 使用 get() 获取对对象的引用
const arr = [];
const myMap = new Map();
myMap.set("bar", arr);

myMap.get("bar").push("foo");

console.log(arr); // ["foo"]
console.log(myMap.get("bar")); // ["foo"]

• has(key)： 用于测试 Map 对象中是否存在的元素的键。如果 Map 对象中存在具有指定键的元素，则返回 true；否则返回 false。

const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.has("bar")); // true
console.log(myMap.has("baz")); // false

• delete(key)： 从该 map 中删除指定键的元素。如果 Map 对象中的元素存在并已被移除，则为 true；如果该元素不存在，则为 false。

const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.delete("bar")); // 返回 true。成功地移除元素
console.log(myMap.has("bar")); // 返回 false。"bar" 元素将不再存在于 Map 实例中

• clear()： 移除该 map 中的所有元素。

const myMap = new Map();
myMap.set("bar", "baz");
myMap.set(1, "foo");

console.log(myMap.size); // 2
console.log(myMap.has("bar")); // true

myMap.clear();

console.log(myMap.size); // 0
console.log(myMap.has("bar")); // false

• size： 访问器属性返回此 map 中元素的数量。

const myMap = new Map();
myMap.set("a", "alpha");
myMap.set("b", "beta");
myMap.set("g", "gamma");

console.log(myMap.size); // 3

• forEach(callback[, thisArg])： 按插入顺序对该 map 中的每个键/值对执行一次提供的函数。

function logMapElements(value, key, map) {
  console.log(`map.get('${key}') = ${value}`);
}
new Map([
  ["foo", 3],
  ["bar", {}],
  ["baz", undefined],
]).forEach(logMapElements);
// 打印：
// "map.get('foo') = 3"
// "map.get('bar') = [object Object]"
// "map.get('baz') = undefined"

• entries()： 返回一个新的 map 迭代器对象，该对象包含了此 map 中的每个元素的 [key, value] 对，按插入顺序排列。

const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap.entries();

console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]

• keys()： 返回一个新的 map 迭代器对象，该对象包含了此 map 中每个元素的键，按插入顺序排列。

const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap.keys();

console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // {}

• values()： 返回一个新的 map 迭代器对象，该对象包含此 map 中每个元素的值，按插入顺序排列。

const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap.values();

console.log(mapIter.next().value); // "foo"
console.log(mapIter.next().value); // "bar"
console.log(mapIter.next().value); // "baz"

应用场景案例分析

• 场景一：对象属性的快捷查找

在处理大量对象，尤其是对象属性众多时，直接通过 . 或 [] 访问属性可能效率不高，特别是在多次查找同一属性时。此时可以使用 Map 存储对象的唯一标识符（如 ID）与对应属性值的映射关系。

// 假设有一个用户列表
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ...
];

// 使用 Map 存储用户名
const userNameMap = new Map();
users.forEach(user => userNameMap.set(user.id, user.name));

// 快速查找用户名称
console.log(userNameMap.get(1)); // 输出 'Alice'

• 场景二：事件监听器管理

在实现自定义事件系统时，可以用 Map 存储事件类型和对应的处理函数列表，以便于添加和移除事件监听器。

class EventBus {
  constructor() {
    this.eventListeners = new Map();
  }

  on(eventType, listener) {
    if (!this.eventListeners.has(eventType)) {
      this.eventListeners.set(eventType, []);
    }
    this.eventListeners.get(eventType).push(listener);
  }

  off(eventType, listener) {
    const listeners = this.eventListeners.get(eventType);
    if (listeners) {
      this.eventListeners.set(
        eventType,
        listeners.filter(l => l !== listener)
      );
    }
  }

  emit(eventType, eventData) {
    const listeners = this.eventListeners.get(eventType);
    if (listeners) {
      listeners.forEach(listener => listener(eventData));
    }
  }
}

// 使用示例
const bus = new EventBus();
bus.on('message', (data) => console.log(`Received message: ${data}`));
bus.emit('message', 'Hello World!');

• 场景三：关联数据存储

在处理复杂的业务逻辑时，有时候需要将不同类型的数据关联起来。Map 可以用来存储这种关联关系。

const employeeProjects = new Map();
employeeProjects.set(employee1, [projectA, projectB]);
employeeProjects.set(employee2, [projectC, projectD]);

// 查找员工参与的项目
console.log(employeeProjects.get(employee1)); // 输出 [projectA, projectB]

• 场景四：缓存

在需要临时存储数据且不关心数据何时被垃圾回收时，可以使用 Map 作为简单的缓存结构。

const cache = new Map();

function fetchExpensiveData(id) {
  let data = cache.get(id);
  if (data) {
    return Promise.resolve(data);
  } else {
    return fetchDataFromServer(id)
      .then(data => {
        cache.set(id, data);
        return data;
      });
  }
}

// 缓存远程获取的数据以减少服务器请求次数
fetchExpensiveData('some-id').then(handleData);

• 场景五：通用去重（适用于简单类型和可哈希对象）

function removeDuplicates(arr) {
  return Array.from(new Map(arr.map(item => [item, item])).values());
}

let arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 4, 5, 'a', 'a'];
let uniqueArray = removeDuplicates(arrayWithDuplicates);
console.log(uniqueArray); // 输出：[1, 2, 3, 4, 5, 'a']

• 场景六：针对对象数组的去重（根据对象的某个或多个属性去重）

function removeDuplicatesByProperty(arr, property) {
  const map = new Map();
  return arr.filter(item => {
    const key = item[property];
    if (!map.has(key)) {
      map.set(key, true);
      return true;
    }
    return false;
  });
}

let objectArrayWithDuplicates = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 2, name: 'Charlie' },
  { id: 3, name: 'Dave' },
];

let uniqueObjectsById = removeDuplicatesByProperty(objectArrayWithDuplicates, 'id');
console.log(uniqueObjectsById); 
// 输出：[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Dave' }]

写在最后

JavaScript 的 Map 数据结构在实际开发中有多种广泛的应用场景，它可以提供高效、灵活的数据存储和检索方案。尤其在需要存储和操作键值对数据时，Map 提供了优于原生对象（如 Object）的诸多优势。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~