JavaScript中的地图简介

我们在 JavaScript 中引入了 sets，因此我们接下来讨论地图是合乎逻辑的，这也是在 ES2015 中引入的。 Maps 是一种新的对象类型，允许存储键值对的集合。

与对象不同，映射键可以是任何类型，甚至是对象或函数。获取地图的大小也很容易，但对于对象来说并不那么简单。最重要的是，使用地图，我们可以按照添加值的顺序进行迭代，这与无法保证顺序的对象相反。

这是一个简单的地图示例，展示了一些可用的方法和属性，例如 set、get、size、has、删除和清除：

let things = new Map();

const myFunc = () => '🍕';

things.set('🚗', 'Car');
things.set('🏠', 'House');
things.set('✈️', 'Airplane');
things.set(myFunc, '😄 Key is a function!');

things.size; // 4

things.has('🚗'); // true

things.has(myFunc) // true
things.has(() => '🍕'); // false, not the same reference
things.get(myFunc); // '😄 Key is a function!'

things.delete('✈️');
things.has('✈️'); // false

things.clear();
things.size; // 0

// setting key-value pairs is chainable
things.set('🔧', 'Wrench')
      .set('🎸', 'Guitar')
      .set('🕹', 'Joystick');

const myMap = new Map();

// Even another map can be a key
things.set(myMap, 'Oh gosh!');
things.size; // 4
things.get(myMap); // 'Oh gosh!'

从数组初始化映射

您可以从包含两个值的数组的数组初始化映射：

const funArray = [
  ['🍾', 'Champagne'],
  ['🍭', 'Lollipop'],
  ['🎊', 'Confetti'],
];

let funMap = new Map(funArray);
funMap.get('🍾'); // Champagne

遍历地图

使用 for...of 和 array destructuring 很容易迭代地图：

let activities = new Map();

activities.set(1, '🏂');
activities.set(2, '🏎');
activities.set(3, '🚣');
activities.set(4, '🤾');

for (let [nb, activity] of activities) {
  console.log(`Activity ${nb} is ${activity}`);
}

// Activity 1 is 🏂
// Activity 2 is 🏎
// Activity 3 is 🚣
// Activity 4 is 🤾

…您还可以使用 forEach 以相同的方式迭代地图。但是请注意，forEach 回调函数的第一个参数是 value，第二个参数是 key。以下将与 for...of 示例具有相同的结果：

activities.forEach((value, key) => {
  console.log(`Activity ${key} is ${value}`);
});