JavaScript 的 Map 指南

时间 2019-11-07

原文原文链接

做者：Valeri Karpov
翻译：疯狂的技术宅javascript

原文：http://thecodebarbarian.com/t...html

未经容许严禁转载前端

在JavaScript中，Map 是存储键/值对的对象。Map 相似于通常 JavaScript 对象，但对象与 Map 之间一些关键的差别使 Map 颇有用。java

Map 与 Object

若是你要建立一个存储一些键/值路径的 JavaScript 对象，能够定义一个普通 JavaScript 对象（plain-old JavaScript object），其简称为“ POJO”，以下所示。jquery

const obj = {
  name: 'Jean-Luc Picard',
  age: 59,
  rank: 'Captain'
};

obj.name; // 'Jean-Luc Picard'

你还能够定义一个包含以下所示的键和值的映射。程序员

const map = new Map([
    // 你能够经过二维数组定义 Map。 首先
  // 每一个嵌套数组的元素是键，第二个是值
  ['name', 'Jean-Luc Picard'],
  ['age', 59],
  ['rank', 'Captain']
]);

// 要得到与 Map 中给定的“键”关联的值，你须要
// 调用 map.get(key)`。 使用 map.key 将不起做用。
map.get('name'); // 'Jean-Luc Picard'

假设你想得到 Picard 船长的 age。对于一个对象，你能够用 obj.age。对于 map，你要用 map.get('age')。对于与内置 JavaScript 功能没有冲突的属性来讲这很好用，可是若是你想获取对象的 constructor 属性会怎样呢？在这种状况下，只定义了 obj.constructor，但未定义 map.get('constructor')。面试

obj.constructor; // [Function: Object]
map.get('constructor'); // undefined

映射没有继承的任何概念：映射没有任何继承的键。这使 map 成为存储原始数据的理想选择，而没必要担忧数据与现有方法和属性发生冲突。例如，map 不受原型污染这个安全漏洞的影响，用户数据的简单复制可能会使恶意用户覆盖类方法。segmentfault

另外一个关键差别是，映射容许你存储对象键，而不只仅是字符串。可是当你把日期或数字等对象存储为键时，可能会引发一些混乱。数组

const map = new Map([]);

const n1 = new Number(5);
const n2 = new Number(5);

map.set(n1, 'One');
map.set(n2, 'Two');

// n1 和 n2 是对象，所以 n1！== n2。 
// 这意味着 map 具备分别用于 n1 和 n2 的键。
map.get(n1); // 'One'
map.get(n2); // 'Two'
map.get(5); // undefined

//若是要对一个对象执行此操做，则 n2 会覆盖 n1
const obj = {};
obj[n1] = 'One';
obj[n2] = 'Two';

obj[n1]; // 'Two'
obj[5]; // 'Two'

Map 还具备 size 属性，该属性返回 map 中键/值对的数量。为了得到一个对象中键的数量，你必需要调用 Object.keys(obj).length。浏览器

map.size; // 3

另外一个区别是，这保证了键在 map 中的顺序。换句话说，若是你调用 map.keys()，你将老是按照将键添加到 map 的顺序获取键。在 Picard 船长的示例中，map.keys() 将始终按该顺序返回 name, age 和 rank 。

这也可以保证符合ES6的浏览器的对象键顺序。例如在与 ES6 兼容的 JavaScript 运行时中，Object.keys(obj) 将始终返回 ['name', 'age', 'rank']。可是在较早的运行时（例如 Internet Explorer 等）中，Object.keys(obj) 可能会以不一样的顺序返回键。

`Map#keys()`, `Map#values()`, `Map#entries()`

map 具备3种内置的迭代方法：keys()，values()）和entries()。与Object.keys（）不一样，Map#keys() 函数返回一个 iterator 而不是数组。这意味着迭代 map 键的最简单方法是使用 for/of 循环。

const map = new Map([
  ['name', 'Jean-Luc Picard'],
  ['age', 59],
  ['rank', 'Captain']
]);

const iterator = map.keys();
console.log(iterator); // MapIterator { 'name', 'age', 'rank' }

// `map.keys()` returns an iterator, not an array, so you can't
// access the values using `[]`
iterator[0]; // undefined

// The `for/of` loop can loop through iterators
for (const key of map.keys()) {
  key; // 'name', 'age', 'rank'
}

有时将迭代器转换为数组很方便，所以你能够用 filter() 和 map() 。将迭代器转换成数组的最简单方法是使用内置的 Array.from() 函数。

const arr = Array.from(map.keys());

arr.length; // 3
arr[0]; // 'name'
arr[1]; // 'age'
arr[2]; // 'rank'

Map#entries() 函数还返回一个迭代器。迭代器遍历 map 的值：

for (const v of map.values()) {
  v; // 'Jean-Luc Picard', 59, 'Captain'
}

最后， Map#entries() 返回一个迭代器，该迭代器以与 Map 构造函数相似的格式遍历 map 的键/值对。 Map#entries() 函数是 Map 类的等效项，它等效于 `Object.entries。

for (const [key, value] of map.entries()) {
  key; // 'name', 'age', 'rank'
  value; // 'Jean-Luc Picard', 59, 'Captain'
}

Map#entries() 函数使复制 map 变得很容易。克隆 map 就像将 Map.entries() 转换成数组同样简单：

// `clone` is now a separate map that contains the same keys/values
// as `map`.
const clone = new Map(Array.from(map.entries));

扩展

尽管 JavaScript 开发人员一般用对象来存储数据，可是 map 具备一些优势：没有原型污染或 JSON 数据覆盖类方法的风险。若是要在不设置 symbol 的状况下将数据与对象相关联，映射还容许你存储对象键，这会颇有用。Map 在开源 JavaScript 中仍然不多见，我惟一见过的重要用例子是 Mongoose's map type 。可是 map 值得去取代 JSON ，由于它避免了原型污染的风险。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...