前端 - Map对象详解

最新推荐文章于 2024-05-13 14:47:15 发布

kelly0721

最新推荐文章于 2024-05-13 14:47:15 发布

阅读量7k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/kelly0721/article/details/126783347

版权

前端专栏收录该内容

47 篇文章 3 订阅

订阅专栏

一、Map对象

1. 初始化Map

使用Array

let obj = new Map([[1, "111"], [2, "222"], [3, "333"]])
 
console.log(obj); // Map(4) {1 => '111', 2 => '222', 3 => '333'}

使用set() 方法

let obj = new Map();
 
obj.set(1, '111');
obj.set(2, '222');
obj.set(3, '333');

console.log(obj); // Map(4) {1 => '111', 2 => '222', 3 => '333'}

2. 内置方法

get() 方法

该方法返回key对应的value，如果不存在，则返回undefined。

let obj = new Map();
 
obj.set(1, '111');

console.log(obj.get(1)); // '111'
console.log(obj.get(2)); // undefined

has() 方法

该方法用于检查Map是否有指定key对应的value。

let obj = new Map();
 
obj.set(1, '111');

console.log(obj.has(1)); // true
console.log(obj.has(2)); // false

clear() 方法

该方法用于清空指定map对象中的所有内容。

let obj = new Map();
obj.set(1, '111');
console.log(obj); //  Map(1) {1 => '111'}

obj.clear();
console.log(obj); // Map(0) {size: 0}

delete() 方法

该方法用于删除map中指定key对应的一组key-value元素。

let obj = new Map();
 
obj.set(1, '111');
console.log(obj.get(1)); // '111'
console.log(obj.has(1)); // true

obj.delete(1)
console.log(obj.get(1)); // undefined
console.log(obj.has(1)); // false

3. Map遍历的方式

keys() 方法

该方法返回Map对象中每个元素的key。

let obj = new Map();
 
obj.set(1, '111');
obj.set(2, '222');
obj.set(3, '333');

console.log(obj.keys()); // MapIterator {1, 2, 3}

values() 方法

和keys方法对应，values方法返回的就是Map对象中的value集合。

let obj = new Map();
 
obj.set(1, '111');
obj.set(2, '222');
obj.set(3, '333');

console.log(obj.values()); // MapIterator {'111', '222', '333'}

entries() 方法

该方法返回Map集合中每个 [key，value] 元素的对象。

let obj = new Map();
 
obj.set(1, '111');
obj.set(2, '222');
obj.set(3, '333');

console.log(obj.entries()); // MapIterator {1 => '111', 2 => '222', 3 => '333'}

遍历

for (const [key, value] of obj.entries()) {
    console.log(key, value);
}
obj.forEach((value, key) => {
    console.log(key, value);
})
1 '111'
2 '222'
3 '333'

4. Map 的特点

Map 默认情况下不包含任何键，所有键都是自己添加进去的。不同于 Object 原型链上有一些默认的键。
Map 的键可以是任意类型数据，就连函数都可以。
Map 的键值对个数可以轻易通过size属性获取，Object 需要手动计算。
Map 在频繁增删键值对的场景下性能要比 Object 好。

5. 什么时候用 Map

要添加的键值名和 Object 上的默认键值名冲突，又不想改名时，用 Map
需要 String 和 Symbol 以外的数据类型做键值时，用 Map
键值对很多，有需要计算数量时，用 Map
需要频繁增删键值对时，用 Map

二、Map对象和普通对象的区别

在 JavaScript 中，普通对象和 ES6 的新对象 Map 都可以存储键值对，但还是有些区别。

1. 初始化与使用

普通对象可以直接使用字面量进行初始化，而 Map 需要 Map() 构造函数进行初始化，如果想要有初始值，则需要传递一个数组或其他元素为键值对的可迭代对象。这些键值对中的每一个都将被添加到一个新的 Map 中。

let a = {
    1: "111",
    2: "222",
    3: "333",
    0: "000",
}

let b = new Map([[1, "111"], [2, "222"], [3, "333"], [0,"000"]])

2. 密钥类型

Map类似于对象，但是键名不限于字符串，可以说Object结构提供键-值对应，Map结构提供值-值对应因此其实采用map结构会优于传统对象。

普通对象只能用字符串作为键名，而 Map 可以接受任何类型的键值（包括函数、对象或任何原语）。

const obj = {};
const map = new Map();
const key = function () {};
obj[key] = 1;
map.set(key, 1);

console.log('obj: ', obj); // { 'function () {}': 1 }
console.log('map: ', map); // Map(1) { [Function: key] => 1 }

3. Accidental keys

普通对象从原型继承了许多属性键，例如构造函数等。因此，自己的密钥很可能与原型上的密钥发生冲突。但是 Map 默认不包含任何键，它只包含那些显式放入的。

const obj = {};
const map = new Map();
console.log(obj.constructor); // ƒ Object() { [native code] }
console.log(map.get('constructor')); // undefined

4. Key order

虽然现在对普通对象的键进行了排序，但情况并非总是如此，而且排序很复杂。例如，如果对象中有键需要转换为字符串，则不保留对象键的原始顺序。虽然 Map 以简单的方式排序，但它始终与我们插入的顺序相同。

let a = {
    1: "111",
    2: "222",
    3: "333",
    0: "000",
}
let b = new Map([[1, "111"], [2, "222"], [3, "333"], [0,"000"]])

console.log(a);  // {0: '000', 1: '111', 2: '222', 3: '333'}
console.log(Object.keys(a));  // ['0', '1', '2', '3']
console.log(b); // Map(4) {1 => '111', 2 => '222', 3 => '333', 0 => '000'}

5. 迭代

可以使用 for…of 语句或 Map.prototype.forEach 直接迭代 Map 的属性，而普通对象不能直接迭代

let b = new Map([[1, "111"], [2, "222"]])

for (const [key,value] of b) { console.log(key, value)}
// 1 111
// 2 222

6. 序列化和解析

普通对象支持 JSON 序列化，但 Map 默认无法获取正确数据

const obj = {
  name: 1,
  age: 2,
};
const map = new Map([
  ['name', 1],
  ['age', 2],
]);
console.log(JSON.stringify(obj)); // "{"name":1,"age":2}"
console.log(JSON.stringify(map)); // "{}"