JavaScript 中的 Maps 介绍和使用

Question

JavaScript Map 是一个存储键/值对的对象。 你可以 get() 或者 set() 与键关联的值，或使用 has() 检查 Map 是否有给定的键。

const map = new Map();

map.get('answer'); // undefined
map.has('answer'); // false

map.set('answer', 42);

map.get('answer'); // 42
map.has('answer'); // true

在 ES6 之前，JavaScript 对象经常被用作映射。 与用于存储用户数据的对象相比，Map 有几个优点。 首先，对象具有可能与键名冲突的特殊属性。 如果您不小心，最终可能会出现 原型中毒安全漏洞 。 这就是为什么你需要小心 你是否使用 in 或者 hasOwnProperty() 如果您使用对象作为 Map。

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

obj.answer = 42;
map.set('answer', 42);

'answer' in obj; // true
map.has('answer'); // true

'prototype' in obj; // true
map.has('prototype'); // false

'__proto__' in obj; // true
map.has('constructor'); // false

映射也可以存储任意键，而对象只能将字符串存储为键。 例如，您可以将 JavaScript 日期 键存储在 Map 中。 如果您尝试将日期作为键存储在对象中，JavaScript 将首先将键转换为字符串。

const map = new Map();

const date = new Date('2019-06-01');

map.set(date, 'test1');
map.set(date.toString(), 'test2');

map.get(date); // 'test1'
map.get(date.toString()); // 'test2'

const obj = {};
obj[date] = 'test1';
obj[date.toString()] = 'test2';
obj[date]; // 'test2', because JavaScript converts object keys to strings

Map 构造器

这 Map构造函数接受一个参数 iterable. 在实践中， iterable通常是键/值对数组 [[key1, value1], [key2, value2]]. 但是，您也可以将 Map 传递给 Map 构造函数。

const date = new Date('2019-06-01');
const map1 = new Map([
  ['answer', 42],
  [date, 'test1']
]);

map1.get('answer'); // 42
map1.get(date); // test1

// If you pass `map1` to the Map constructor, JavaScript will create a
// copy of `map1`
const map2 = new Map(map1);
map2.get('answer'); // 42
map2.get(date); // test1

map2.set('hello', 'world');
map1.get('hello'); // undefined

您 不能 将对象传递给 Map 构造函数。 要将对象转换为 Map，您必须使用 Object.entries() 将对象转换为键/值对数组的函数 。

const obj = { answer: 42 };
// This throws an error because objects are **not** iterable
// "TypeError: undefined is not a function"
new Map(obj);

// Works, you need to use `Object.entries()` to convert the object
// to a key/value array
const map = new Map(Object.entries(obj));
map.get('answer'); // 42

遍历 Map

您可以使用 a 遍历 Map 的键或键/值对 for/of环形。 Map 有一个 keys() 功能 ，以及 entries() 函数 为您提供 Map 的键/值对的

const map = new Map([
  ['key1', 1],
  ['key2', 2],
  ['key3', 3]
]);

for (const key of map.keys()) {
  // 'key1', 'key2', 'key3'
  key;
}

for (const [key, value] of map.entries()) {
  // 'key1', 'key2', 'key3'
  key;
  // 1, 2, 3
  value;
}