JavaScript 中有了Object 为什么还需要 Map 呢

JavaScript 中的 Object 是一种键值对集合的数据结构，可以被用来存储和访问任意类型的数据。而 Map 是一种新的对象类型，它不同于普通的 Object，可以被用来存储键值对，其中键和值都可以是任意类型的数据。

虽然 Object 是 JavaScript 中最常用的数据结构之一，但是 Map 在某些情况下更为实用。下面列举了两个使用 Map 来改进代码的实例：

实例1：使用 Map 存储复杂对象

假设我们要存储一个包含学生信息的数据集合，每个学生的信息由姓名、年龄和性别构成，我们可以用 Object 来实现：

let student = {
  name: "张三",
  age: 20,
  gender: "男"
};

如果我们需要存储多个学生的信息，那么就需要将这些学生信息存储在一个数组中，由于 Object 只能保存字符串类型的键，我们无法直接使用学生的姓名作为键值来存储学生信息。因此，我们需要将每个学生信息的键设置为一个字符串，这样就需要进行一些字符串操作，才能访问学生的信息。

另外，如果需要在 Object 中存储一个复杂对象作为值，那么就需要使用特殊的键名来确保不会与其他键名发生冲突，这可能会导致一些错误。

使用 Map 来存储学生信息，就可以克服这些问题：

let students = new Map();
students.set("张三", {
  name: "张三",
  age: 20,
  gender: "男"
});
students.set("李四", {
  name: "李四",
  age: 22,
  gender: "女"
});

在这个例子中，我们使用学生的姓名作为 Map 中的键，值是一个包含学生信息的对象。通过这种方式，我们可以轻松地访问一个学生的信息，而不需要进行字符串操作，并且可以存储任意类型的值作为键或值。

实例2：使用 Map 进行数据缓存

假设我们要编写一个函数，它可以接受任意数量的参数，并返回这些参数的和。该函数被频繁调用，我们需要在执行该函数时保存参数和结果，这样下次调用时可以避免重复计算。我们可以使用 Object 来实现这个功能：

function add() {
  let cache = {};
  return function() {
    let key = JSON.stringify(arguments);
    if (cache[key]) {
      console.log("Cache hit");
      return cache[key];
    }
    let result = 0;
    for (let i = 0; i < arguments.length; i++) {
      result += arguments[i];
    }
    cache[key] = result;
    console.log("Cache miss");
    return result;
  };
}

let adder = add();

console.log(adder(1, 2, 3)); // Cache miss 6
console.log(adder(1, 2, 3)); // Cache hit 6

在这个例子中，我们在一个函数内部定义了一个对象 cache，用于存储参数和结果的键值对。使用 JSON.stringify 将传入的参数序列化为一个字符串，作为键来保存计算结果。

虽然这个方案可以工作，但是使用 Object 存储数据会存在几个问题。首先，JSON.stringify 和 Object 键转换的开销可能很大，这会影响函数的性能。此外，Object 中的键只能是字符串类型，这可能会出现键名冲突的问题，导致一些计算结果被错误地重用。

使用 Map 可以更好地解决这些问题：

function add() {
  let cache = new Map();
  return function() {
    let key = Array.from(arguments);
    if (cache.has(key)) {
      console.log("Cache hit");
      return cache.get(key);
    }
    let result = 0;
    for (let i = 0; i < arguments.length; i++) {
      result += arguments[i];
    }
    cache.set(key, result);
    console.log("Cache miss");
    return result;
  };
}

let adder = add();

console.log(adder(1, 2, 3)); // Cache miss 6
console.log(adder(1, 2, 3)); // Cache hit 6

在这个例子中，我们使用 Map 来存储参数和结果的键值对，键是一个由参数构成的数组，值为计算结果。在第二次调用这个函数时，我们使用 Map 的 has 方法来检查缓存中是否存在以当前参数为键的数据，如果缓存命中，我们直接从 Map 中获取结果，而不需要重新计算。这种方式可以避免字符串键的开销，并且更容易构建复杂的键值对数据结构。