【ES6】Map对象-阿里云开发者社区

【ES6】Map对象

2023-06-28 41

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【ES6】Map对象

数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、概述

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

Map 对象是键值对的集合。Map 中的一个键只能出现一次；它在 Map 的集合中是独一无二的。Map 对象按键值对迭代——一个 for...of 循环在每次迭代后会返回一个形式为 [key，value] 的数组。

// 实例化一个 Map 对象
const map1 = new Map();
// set() 方法在 Map 对象中设置与指定的键 key 关联的值，并返回 Map 对象。 
map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
// get() 方法返回与指定的键 key 关联的值，若不存在关联的值，则返回 undefined。
console.log(map1.get('a'));
// expected output: 1
map1.set('a', 97);
console.log(map1.get('a'));
// expected output: 97
// size 属性返回 Map 对象中的键值对数量
console.log(map1.size);
// expected output: 3
//delete() 方法用于移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false。
map1.delete('b');
console.log(map1.size);
// expected output: 2

二、实例属性

Map.prototype.size 返回 Map 对象中的键值对数量。

三、实例方法

Map.prototype.set()在 Map 对象中设置与指定的键 key 关联的值，并返回 Map 对象。

Map.prototype.get()返回与指定的键 key 关联的值，若不存在关联的值，则返回 undefined。

Map.prototype.has()返回一个布尔值，用来表明 Map 对象中是否存在与指定的键 key 关联的值。

Map.prototype.delete()移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false。调用 delete 后再调用 map.has(key) 将返回 false。

Map.prototype.clear()移除 Map 对象中所有的键值对。

Map.prototype.keys()返回一个新的迭代对象，其中包含 Map 对象中所有的键，并以插入 Map 对象的顺序排列。

Map.prototype.values()返回一个新的迭代对象，其中包含 Map 对象中所有的值，并以插入 Map 对象的顺序排列。

Map.prototype.entries()返回一个新的迭代对象，其为一个包含 Map 对象中所有键值对的 [key, value] 数组，并以插入 Map 对象的顺序排列。

Map.prototype.forEach()以插入的顺序对 Map 对象中存在的键值对分别调用一次 callbackFn。如果给定了 thisArg 参数，这个参数将会是回调函数中 this 的值。

四、for…of 迭代Map

const myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one
for (const key of myMap.keys()) {
  console.log(key);
}
// 0
// 1
for (const value of myMap.values()) {
  console.log(value);
}
// zero
// one
for (const [key, value] of myMap.entries()) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

五、Map与数组的关系

const kvArray = [['key1', 'value1'], ['key2', 'value2']];
// 使用常规的 Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象
const myMap = new Map(kvArray);
console.log(myMap.get('key1')); // "value1"
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
console.log(Array.from(myMap)); // 输出和 kvArray 相同的数组
// 更简洁的方法来做如上同样的事情，使用展开运算符
console.log([...myMap]);
// 或者在键或者值的迭代器上使用 Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

六、Map对象合并

Map 对象之间的合并

const first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
const second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的。
// 展开语法本质上是将 Map 对象转换成数组。
const merged = new Map([...first, ...second]);
console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

Map 对象与数组的合并

const first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
const second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);
// Map 对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
const merged = new Map([...first, ...second, [1, 'eins']]);
console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three