Map 对象的基础知识介绍

引言

Map 对象是一种键值对存储的数据结构，它可以用于存储任意类型的值，并提供了快速的查找和迭代功能。Map 中的键可以是任意类型的值，包括字符串、数字、符号、对象等，而值也可以是任意类型的值，包括数字、字符串、布尔值、对象等。

Map 对象的出现极大地提高了前端处理数据的效率，今天我们来总结一下 Map 的一些基本方法。

get(key)

获取指定键对应的值，如果键不存在则返回 undefined。

javascript 复制代码

let map = new Map();
map.set('a', 1);
console.log(map.get('a')); // 1
console.log(map.get('b')); // undefined

set(key, value)

设置指定 key 对应的值，如果 key 已存在则会覆盖原有的值。

JavaScript 复制代码

let map = new Map();
map.set('a', 1);
const obj1 = {
    name: "obj"
};
const obj2 = {
    age: 99
};
map.set(obj1, obj2);
console.log(map.get('a')); // 1
console.log(map.get(obj1)); // {age: 99}
map.set('a', 2);
console.log(map.get('a')); // 2

delete(key)

删除指定键值对，删除成功则返回 true，如果键不存在则返回 false。

javascript 复制代码

let map = new Map();
map.set('a', 1);
console.log(map.delete('a')); // true
console.log(map.get('a')); // undefined
map.delete('a'); // false

has(key)

判断指定 key 是否存在于 Map 中，如果存在则返回 true，否则返回 false。

javascript 复制代码

let map = new Map();
map.set('a', 1);
console.log(map.has('a')); // true
console.log(map.has('b')); // false

clear()

清空 Map 中所有的键值对。

javascript 复制代码

let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.clear();
console.log(map.size); // 0

entries()

Map.entries() 返回 Map 中所有键值对的迭代器，其中包含了 Map 中所有的键值对。

可以使用 for...of 循环或者 reduce() 方法遍历 Map.entries() 返回的迭代器。

javascript 复制代码

let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

const entries = map.entries();
console.log(entries); // MapIterator {'a' => 1, 'b' => 2, 'c' => 3}

for (const entry of entries) {
  console.log(entry[0] + ': ' + entry[1]);
}

// 输出：
// a: 1
// b: 2
// c: 3

keys()

Map.keys() 返回 Map 中所有键的迭代器。

javascript 复制代码

let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

const keys = map.keys();
console.log(keys); // MapIterator {'a', 'b', 'c'}

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

// 输出：
// a
// b
// c

values()

Map.values() 返回 Map 中所有值的迭代器。

js 复制代码

let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

const values = map.values();
console.log(values); // MapIterator {1, 2, 3}

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

// 输出：
// 1
// 2
// 3

forEach(callbackFn, thisArg)

对 Map 中的键值对执行回调函数，并对每个键值对执行一次。

回调函数可以接受三个参数：

当前键值对的值
当前键值对的键
Map 本身

javascript 复制代码

let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

map.forEach((value, key) => {
  console.log(key + ': ' + value);
});

// 输出：
// a: 1
// b: 2
// c: 3

size

获取 Map 中键值对的数量。

javascript 复制代码

let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
console.log(map.size); // 3

Map 对象的遍历方法

Map 的遍历除了上面介绍的 forEach 方法，还有 for...of 方法。

javascript 复制代码

let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

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

// 输出：
// a: 1
// b: 2
// c: 3

结束语

关于 Map 对象的一些基础知识就总结这么多，希望能够对大家有所帮助。

~ 全文完，感谢阅读！