JavaScript Map 对象
JavaScript基础 2022-04-25 01:50:05小码哥的IT人生shichen
JavaScript Map 对象
Map 对象存有键值对，其中的键可以是任何数据类型。
Map 对象记得键的原始插入顺序。
Map 对象具有表示映射大小的属性。
基本的 Map() 方法
| Method | Description |
|---|---|
| new Map() | 创建新的 Map 对象。 |
| set() | 为 Map 对象中的键设置值。 |
| get() | 获取 Map 对象中键的值。 |
| entries() | 返回 Map 对象中键/值对的数组。 |
| keys() | 返回 Map 对象中键的数组。 |
| values() | 返回 Map 对象中值的数组。 |
Map() 属性
| Property | Description |
| size | 获取 Map 对象中某键的值。 |
创建 Map 对象
能够使用对象作为键是 Map 的一个重要特性。
示例代码：
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>创建 Map 对象</h1>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = "apples value is : " + fruits.get(apples) + ", bananas value is: " + fruits.get(bananas) + ", oranges value is: " + fruits.get(oranges) ;
</script>
</body>
</html>
运行结果：
创建 Map 对象 apples value is : 500, bananas value is: 300, oranges value is: 200
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您可以将 Array 传递给 new Map() 构造函数：
示例代码：
// 返回
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map([
[apples, 500],
[bananas, 300],
[oranges, 200]
]);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>创建 Map 对象</h1>
<p id="demo"></p>
<script>
// 返回
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map([
[apples, 500],
[bananas, 300],
[oranges, 200]
]);
document.getElementById("demo").innerHTML = "apples value is : " + fruits.get(apples) + ", bananas value is: " + fruits.get(bananas) + ", oranges value is: " + fruits.get(oranges) ;
</script>
</body>
</html>
运行结果：
创建 Map 对象 apples value is : 500, bananas value is: 300, oranges value is: 200
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
获取键的值
get() 方法获取 Map 中键的值：
示例代码：
fruits.get(apples); // 返回 500
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>获取 Map 对象值</h1>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
document.getElementById("demo").innerHTML = "apples value is : " + fruits.get(apples);
</script>
</body>
</html>
运行结果：
获取 Map 对象值 apples value is : 500
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Remember: The key is an object (apples), not a string ("apples"):
示例代码：
fruits.get("apples"); // 返回 undefined
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>获取 Map 对象值</h1>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
document.getElementById("demo").innerHTML = "apples value is : " + fruits.get("apples");
</script>
</body>
</html>
运行结果：
获取 Map 对象值 apples value is : undefined
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
其他 Map() 方法
| 方法 | 描述 |
|---|---|
| clear() | 删除 Map 中的所有元素。 |
| delete() | 删除由键指定的元素。 |
| has() | 如果键存在，则返回 true。 |
| forEach() | 为每个键/值对调用回调。 |
Map() 属性
| 属性 | 描述 |
|---|---|
| size | 获取 Map 中键的值。 |
Map.size
Map.size 返回 Map 中元素的数量：
示例代码：
fruits.size;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>获取 Map 中元素的数量</h1>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = fruits.size ;
</script>
</body>
</html>
运行结果：
获取 Map 中元素的数量 3
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Map.delete()
Map.delete() 删除 Map 元素：
示例代码：
fruits.delete(apples);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>删除 Map 中的元素</h1>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
fruits.delete(apples);
document.getElementById("demo").innerHTML = fruits.size ;
</script>
</body>
</html>
运行结果：
删除 Map 中的元素 2
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Map.clear()
Map.clear() 从 Map 中移除所有元素：
示例代码：
fruits.clear();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>移除 Map 中所有元素</h1>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
fruits.clear();
document.getElementById("demo").innerHTML = fruits.size ;
</script>
</body>
</html>
运行结果：
移除 Map 中所有元素 0
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Map.has()
如果 Map 中存在键，则 Map.has() 返回 true：
示例代码：
fruits.has(apples);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>判断 Map 中是否存在元素</h1>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建新的 Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = 'has apples ? ' + fruits.has(apples) ;
</script>
</body>
</html>
运行结果：
判断 Map 中是否存在元素 has apples ? true
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 对象 vs Map
JavaScript 对象和 Map 之间的差异：
| 对象 | Map | |
|---|---|---|
| Size | 对象没有 size 属性 | Maps 有 size 属性 |
| 键类型 | 对象键必须是字符串（或符号） | Map 键可以是任何数据类型 |
| 键顺序 | 对象键没有很好地排序 | Map 键按插入排序 |
| 默认 | 对象有默认键 | Map 没有默认键 |
浏览器支持
除了 Internet Explorer 之外，所有主要浏览器都支持 JavaScript Map：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
