JavaScript - 映射对象

欢迎，有抱负的程序员们！今天，我们将深入探索JavaScript中迷人的映射世界。作为你友好的计算机科学老师，我很高兴能引导你们进行这次旅行。所以，戴上你们的虚拟思考帽，让我们一起开始这次冒险吧！

JavaScript - Maps

什么是映射？

在我们深入了解之前，让我们先了解一下映射是什么。想象你有一个神奇的盒子，你可以放进去一个键，然后立刻得到一个相应的值。这在JavaScript中基本上就是映射的概念 - 一个键值对的集合，其中键和值都可以是任何类型。酷吧？

语法

创建映射的基本语法非常简单：

let myMap = new Map();

在这里，我们创建了一个新的映射对象并将其赋值给变量myMap。这就像打开我们之前提到的那个神奇的盒子！

参数

创建映射时，你可以选择传递一个包含键值对的迭代对象（比如数组）：

let myMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

在这个例子中，我们从一开始就创建了一个包含两个键值对的映射。这就像在我们的神奇盒子里预先装了一些好东西！

映射属性

映射带有以下便捷属性：

属性	描述
size	返回映射中键值对的数量

让我们看看它是如何工作的：

let myMap = new Map([
['apples', 5],
['bananas', 3],
['oranges', 2]
]);

console.log(myMap.size); // 输出：3

在这个水果例子中，我们的映射有3个键值对，所以size返回3。这就像数我们神奇盒子中有多少个装满的隔间！

映射方法

映射配备了几个有用的方法。让我们用表格的形式来看看它们：

方法	描述
set()	向映射中添加一个新的键值对
get()	返回与键相关联的值
has()	检查映射中是否存在键
delete()	从映射中移除键值对
clear()	从映射中移除所有键值对

现在，让我们通过一些例子来见识这些方法！

set() 方法

let petMap = new Map();

petMap.set('dog', 'Buddy');
petMap.set('cat', 'Whiskers');
petMap.set('fish', 'Nemo');

console.log(petMap);
// 输出：Map(3) { 'dog' => 'Buddy', 'cat' => 'Whiskers', 'fish' => 'Nemo' }

在这个例子中，我们在映射中添加了宠物及其名字。这就像在我们的神奇盒子上贴上不同的标签！

get() 方法

console.log(petMap.get('dog')); // 输出：Buddy
console.log(petMap.get('elephant')); // 输出：undefined

在这里，我们使用键来检索值。当我们请求'dog'时，我们得到'Buddy'。但是当我们请求'elephant'时，由于它不存在于我们的映射中，我们得到undefined。这就像把手伸进我们的神奇盒子，要么找到东西，要么空手而归！

has() 方法

console.log(petMap.has('cat')); // 输出：true
console.log(petMap.has('elephant')); // 输出：false

has()方法检查映射中是否存在键。这就像问我们的神奇盒子，“你有标着'cat'的隔间吗？”

delete() 方法

petMap.delete('fish');
console.log(petMap);
// 输出：Map(2) { 'dog' => 'Buddy', 'cat' => 'Whiskers' }

在这里，我们从映射中移除了'fish'条目。可怜的Nemo！

clear() 方法

petMap.clear();
console.log(petMap); // 输出：Map(0) {}

clear()方法清空我们的整个映射。这就像把我们的神奇盒子里的东西全部倒出来！

JavaScript Map 构造函数

Map构造函数可以创建一个新的Map对象：

let newMap = new Map();

你也可以用迭代对象初始化一个Map：

let initMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

这就像为我们的神奇盒子设置一些初始的隔间和物品！

示例

让我们用一个有趣的例子来把所有东西放在一起。想象我们在追踪一个电子游戏锦标赛的分数：

let gameScores = new Map();

// 添加分数
gameScores.set('Alice', 1000);
gameScores.set('Bob', 850);
gameScores.set('Charlie', 1200);

console.log(gameScores);
// 输出：Map(3) { 'Alice' => 1000, 'Bob' => 850, 'Charlie' => 1200 }

// 更新分数
gameScores.set('Bob', 900);

// 检查玩家是否存在
console.log(gameScores.has('David')); // 输出：false

// 获取玩家分数
console.log(gameScores.get('Charlie')); // 输出：1200

// 移除玩家
gameScores.delete('Alice');

console.log(gameScores);
// 输出：Map(2) { 'Bob' => 900, 'Charlie' => 1200 }

// 获取玩家数量
console.log(gameScores.size); // 输出：2

在这个例子中，我们把映射用作计分板。我们可以轻松地添加玩家、更新分数、检查玩家是否存在、获取他们的分数、移除玩家以及检查我们有多少玩家。这就像有一个神奇的计分板，我们可以轻松地操纵它！

映射与JavaScript对象

现在，你可能想知道，“既然JavaScript有对象，为什么还要用Map呢？”这是个好问题！让我们比较一下它们：

键类型：对象只允许字符串或符号键，而映射允许任何类型的键（甚至是对象！）。
顺序：映射维护元素的插入顺序，而对象不保证有任何顺序。
大小：你可以使用size属性轻松获取映射的大小，而对于对象，你需要手动计算属性。
性能：在涉及频繁添加和删除键值对的情况下，映射的性能更优。

下面是一个快速的示例来说明：

let obj = {
'string key': 'string value',
1: 'number value',
[{}]: 'object key' // 这实际上变成了'[object Object]'
};

let map = new Map([
['string key', 'string value'],
[1, 'number value'],
[{}, 'object key'] // 这按预期工作
]);

console.log(Object.keys(obj).length); // 输出：3
console.log(map.size); // 输出：3

console.log(obj['[object Object]']); // 输出：'object key'
console.log(map.get({})); // 输出：undefined（因为这是一个不同的对象）

在这个示例中，我们可以看到映射如何比对象更优雅地处理不同类型的键。这就像拥有一个更灵活、更强大的神奇盒子！

就这样，伙计们！我们已经穿越了JavaScript映射的土地，从创建它们到操纵它们，甚至将它们与它们的近亲对象进行比较。我希望这个知识的神奇盒子对你们来说既有趣又充满探索。记住，熟能生巧，所以不要害怕在你们自己的代码中尝试映射。快乐映射，愿你的代码永远无虫！

Credits: Image by storyset