JavaScript 中的 Map 和对象有什么区别?
大多数 JavaScript 开发人员都熟悉对象,并且可能每天都在使用它们。另一方面,Map 并不常见,但仍然非常有用。虽然与表面上的物体非常相似,但它们有一些非常重要的区别,让我们来看看它们。
键类型
对象键仅限于使用字符串和符号。另一方面,Map 可以使用任何类型的值作为它们的键,包括函数和对象。这可以在许多不同的场景中派上用场,例如记忆和数据关联。
const people = [
{ id: 1, name: 'John', surname: 'Doe', age: 30 },
{ id: 2, name: 'Jane', surname: 'Doe', age: 28 },
];
const peopleIndex = people.reduce((index, person) => {
index[person.id] = `${person.name} ${person.surname}`;
return index;
}, {});
// peopleIndex = {
// '1': 'John Doe',
// '2': 'Jane Doe',
// }
const peopleIndexMap = new Map(
people.map(person => [person, `${person.name} ${person.surname}`])
);
// peopleIndexMap = Map {
// { id: 1, name: 'John', surname: 'Doe', age: 30 } => 'John Doe',
// { id: 2, name: 'Jane', surname: 'Doe', age: 28 } => 'Jane Doe',
// }
迭代
对象迭代通常使用 Object.keys() 、 Object.values() 或 Object.entries() 来完成。所有这些方法都可以作为其原型的一部分在 Map 上使用,但它们的效率要高得多。原因是这些 Map 方法返回迭代器,这些迭代器是惰性的,仅在需要时迭代键或值。此外,Map 公开了一个迭代器,它可以与 for...of 循环一起使用。
const obj = { a: 1, b: 2, c: 3 };
const objEntries = Object.entries(obj);
// ['a', 1], ['b', 2], ['c', 3]
for (const [key, value] of objEntries)
console.log(`${key}: ${value}`);
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const mapEntries = [...map.entries()]; // Same as [...map]
// [['a', 1], ['b', 2], ['c', 3]]
for (const [key, value] of map)
console.log(`${key} => ${value}`);
其他差异
除了已经提到的两个主要区别之外,还有其他一些不太明显的区别。其中包括:
对象大小需要手动计算。另一方面,Map 具有 size 可用于跟踪键值对数量的内置属性。
我们可以使用 in 运算符或 Object.prototype.hasOwnProperty() 检查对象中是否存在给定键。Map.prototype.has() 为 Map 完成同样的事情。
清除对象需要手动操作,并且在某些情况下可能并不简单。Map 通过使用 Map.prototype.clear() 方法完成清除对象。对象从原型继承了一些键,而 Map 则没有。
更多内容请访问我的网站: https://www.icoderoad.com