碎片时间学编程「24]:JavaScript 中的 Map 和对象有什么区别?

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 

你可能感兴趣的:(碎片时间学编程「24]:JavaScript 中的 Map 和对象有什么区别?)