JavaScript 中的 Map 对象。
javascriptweb developmentfront end technology更新于 2024/8/5 10:09:00
Map 对象是 JavaScript 中的原生数据结构，随 ES6 (ECMAScript 2015) 版本发布而添加。它提供了一种保存键值对的有用方法，并使数据检索和操作变得简单。在这篇文章中，我们将了解 javascript 中的映射以及如何使用它们有效地在 javascript 中存储键值对，并使数据修改和检索变得简单。
让我们看一些示例和方法，以更好地理解这个概念 -
示例 1
我们可以使用 set(key, value) 方法将键值对添加到 Map，并使用 get(key) 方法检索值。
在此示例中，我们将 -
创建一个 Map 对象并使用 set() 函数添加键值对
然后使用 get() 方法获取值
文件名 - index.html
<html>
<head>
<title>Map object in JavaScript.</title>
<script>
let myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
console.log(myMap.get('name')); // Output: John
console.log(myMap.get('age')); // Output: 30
</script>
</head>
<body>
<h1>Map Object - Creating and Retrieving Values</h1>
</body>
</html>
输出
结果将如下图所示。
示例 2
Map 对象提供了各种方法来迭代其元素，例如 forEach()、keys()、values()、entries() 等。
在此示例中，我们将 −
创建一个带有键值对的 Map 对象
使用不同的方法(如 forEach()、keys()、values() 和 entrys())迭代 Map 并显示键、值或键值对
文件名 - index.html
<!DOCTYPE html>
<html>
<head>
<title>Map object in JavaScript.</title>
<script>
let myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
myMap.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
for (let key of myMap.keys()) {
console.log(key);
}
for (let value of myMap.values()) {
console.log(value);
}
for (let [key, value] of myMap.entries()) {
console.log(`${key}: ${value}`);
}
</script>
</head>
<body>
<h1>Map Object - Iterating over a Map</h1>
</body>
</html>
输出
结果将如下图所示。
示例 3 - 删除属性
我们可以使用 delete(key) 方法从 map 对象中删除键。
在此示例中，我们将 -
创建一个 Map 对象并添加键值对
使用 delete 方法从 Map 中删除属性
使用 has 方法检查键是否存在，并使用 size 属性确定 map 对象中的条目数
文件名 - index.html
<html>
<head>
<title>Map object in JavaScript.</title>
<script>
let myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
myMap.delete('name');
console.log(myMap.has('name')); // Output: false
console.log(myMap.size); // Output: 1
</script>
</head>
<body>
<h1>Map Object - Removing Entries</h1>
</body>
</html>
输出
结果将如下图所示。
结论
总之，通过在 JavaScript 中使用 map 对象，我们可以有效地存储和操作键值对。它提供的功能包括轻松插入和检索数据、大小跟踪、迭代支持以及键类型的灵活性。我们通过不同的方法了解了什么是 javascript 中的 map 对象，并看到了一些解释相同内容的示例。
