ES6 Map与Object的对象的差异：探秘独特魅力

2023-11-15 21:21:14

ES6 Map与Object都是JavaScript中常用的数据结构，它们都可用于存储键值对。不过，它们之间存在着一些关键区别。

键的类型 ：Object的键只能是字符串或Symbol，而Map的键可以是任意值。这意味着Map可以存储更广泛类型的数据，包括对象、数组甚至函数。
键值对的数量 ：Map的键值对数量可以通过size属性获取，而Object则需要通过Object.keys(obj)来获取键的数组。
迭代：Map可以轻松地迭代其键值对，而Object则需要使用for...in循环来迭代其键。
性能：在某些情况下，Map的性能可能优于Object。这是因为Map使用哈希表来存储键值对，而Object则使用属性名来存储键值对。

为了更好地理解这些差异，我们来看一些具体示例。

示例1：创建一个Map和Object

const map = new Map();
map.set('name', 'John Doe');
map.set(123, '123 Main Street');

const object = {
  name: 'John Doe',
  address: '123 Main Street'
};

在这个示例中，我们创建了一个Map和一个Object，并向它们添加了键值对。

示例2：获取键值对的数量

console.log(map.size); // 2
console.log(Object.keys(object).length); // 2

在这个示例中，我们使用size属性获取Map中键值对的数量，并使用Object.keys()方法获取Object中键的数组，然后使用length属性获取数组的长度。

示例3：迭代键值对

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

for (const key in object) {
  console.log(key, object[key]);
}

在这个示例中，我们使用for...of循环迭代Map中的键值对，并使用for...in循环迭代Object中的键。

示例4：性能测试

const map = new Map();
const object = {};

for (let i = 0; i < 100000; i++) {
  map.set(i, i);
  object[i] = i;
}

console.time('Map get');
for (let i = 0; i < 100000; i++) {
  map.get(i);
}
console.timeEnd('Map get');

console.time('Object get');
for (let i = 0; i < 100000; i++) {
  object[i];
}
console.timeEnd('Object get');