JavaScript 中的地图

这篇文章最初发表在attacomsian.com/blog上。

Map 是 JavaScript 中一种新的数据结构，可用于创建键值对的集合。它们是在 ES6（也称为 ES2015）中与JavaScript 中的集合一起引入的。Map 对象可以将对象和原始数据作为键和值进行存储。

Map 类似于对象，也用于存储键值数据。但主要区别在于，Map 的键可以是任意类型，而不仅限于字符串和符号。与对象不同，Map 的大小也更容易获取。

初始化地图

就像集合一样，您可以使用Map()构造函数来创建一个空映射：

const items = new Map();

您还可以将可迭代对象（例如数组）传递给构造函数来初始化映射：

const items = new Map([['🦅', 'Eagle'], ['🐶', 'Dog']]);

地图方法

主要方法和属性有set()、get()、has()、、和。下面是一个简单的地图示例，展示了这些方法的用法size：delete()clear()

const items = new Map();

// add items
items.set('🐶', 'Dog');
items.set('🦅', 'Eagle');
items.set('🚄', 'Train');
items.set(45, 'Number');
items.set(true, 'Boolean');

// get item
items.get(45); // Number
items.get('🐶'); // Dog
items.get('🐺'); // undefined

// check if key exists
items.has('🚄'); // true
items.has('🐺'); // false

// get items count
items.size; // 5

// delete item
items.delete('🦅'); // true
items.delete('🦅'); // false - already removed

// delete all items
items.clear();

与集合类似，map 的键也是唯一的。set()使用同一个键多次调用不会添加多个键值对。相反，值部分会被替换为最新的值：

const animals = new Map();

animals.set('🐺', 'Wolf');
animals.set('🐺', 'Wolf Face');

console.log(animals); // Map(1) {"🐺" => "Wolf Face"}

地图中的对象

由于映射允许我们将任何数据类型存储为键或值，因此我们可以存储复杂的对象，如对象文字、数组甚至函数：

const props = {
    browser: 'Chrome',
    os: 'Ubuntu 19.04'
};

const hamburger = () => '🍔'; 

const things = new Map();

things.set('birds', ['🦉', '🦅']);
things.set('user', {name: 'John Doe', planet: 'Earth'});
things.set(props, 59);
things.set(hamburger, 'What is the food?');

things.get(props); // 59
things.get(hamburger); // What is the food?

迭代 Map

与对象不同，当我们迭代 Map 时，键值对会按照插入的顺序返回。我们可以使用for...of循环来迭代所有键值对：

const foods = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber'],
    ['🌽', 'Maize'],
]);

for (const [key, value] of foods) {
    console.log(`${key}: ${value}`);
}

// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber
// 🌽: Maize

同样的，我们也可以使用内置forEach()方法来迭代所有元素：

foods.forEach((key, value) => {
    console.log(`${key}: ${value}`);
});

键和值

Map 提供了keys()和values()方法来访问键和值。这些方法返回一个新的可迭代对象，该对象也可用于迭代所有键或值：

for (const key of foods.keys()) {
    console.log(key);
}

for (const value of foods.values()) {
    console.log(value);
}

该Map对象还具有entries()返回条目的可迭代对象的方法[key, value]。此方法在循环中默认使用for...of。以下是一个例子：

for (const [key, value] of foods.entries()) {
    console.log(`${key}: ${value}`);
}

与集合类似，您可以next()对该方法返回的迭代器调用该entries()方法，逐个遍历键值对：

const entries = foods.entries();

console.log(entries.next()); // {value: ["🍌", "Banana"], done: false}

结论

映射 (Map) 是键值对的集合，它允许我们将对象和原始数据存储为键和值。与对象不同，映射的键可以是任意类型：对象、数组、函数，甚至是其他映射。与集合类似，键是唯一的；它们在映射中只能出现一次。当我们迭代映射对象时，键值对将按照它们插入映射的顺序返回。

✌️ 我撰写有关现代 JavaScript、Node.js、Spring Boot以及所有Web 开发方面的文章。订阅我的新闻通讯，每周获取 Web 开发教程和专业技巧。

喜欢这篇文章吗？ 请在 Twitter 上关注 @attacomsian。你也可以在LinkedIn和DEV上关注我。

鏂囩珷鏉ユ簮锛�https://dev.to/attacomsian/maps-in-javascript-4148