JavaScript，map数据类型如何使用？map增删改查

我们相信：世界是美好的，你是我也是。来玩一下解压小游戏吧！

本文说一下javascript的基础知识，如何使用map基础数据类型。map类型属于类数组的数据类型，属于key:value映射类型。本文讨论其定义、添加、删除、查找的过程。

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - js-map — JavaScript，map数据类型如何使用？map增删改查（图12-1）

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：node@16.14.2。

定义`map`

map其实就是传统的二维数据的一个变形，map的最小单位（二维数据的第二层）必须是两个元素。第一个是key，第二个是value。(听起来是不是和其他编程语言里面的dictionary很类似？) 请先体会下面的定义方式：

const _map2 = new Map([['name', '苏南大叔'], ['age', 18]]);
console.log(_map2);

当然，也可以一条数据一条数据的进行定义，比如：

let _map = new Map();
_map.set('name', "苏南大叔");
_map.set('age', 18);
console.log(_map);

输出：

Map(2) { 'name' => '苏南大叔', 'age' => 18 }
Map(2) { 'name' => '苏南大叔', 'age' => 18 }

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - map-1 — JavaScript，map数据类型如何使用？map增删改查（图12-2）

添加和修改，`.set`与`.get`

map最小单元的第一个值是key，后面的是value。以这个为基础，理解下面的两个函数：

.set(key,value)有两个作用，一个是添加，另外一个是修改。
.get(key)就是获取key所对应的value。

let _map = new Map();
_map.set('name', "苏南大叔");
_map.set('age', 18);
console.log(_map);

_map.set('age', 36);
console.log(_map);
console.log("age:", _map.get("age"));

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - map-2 — JavaScript，map数据类型如何使用？map增删改查（图12-3）

如果数字做key，还要想好到底是带不带引号，是普通数字还是字符型的数字。

let _map = new Map();
_map.set(1, "sunan");
_map.set("1", "苏南");
console.log(_map.get(1));      // sunan
console.log(_map.get('1'));    // 苏南

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - map-3 — JavaScript，map数据类型如何使用？map增删改查（图12-4）

删除和清空，`.delete`和`.clear`

.delete(key)就是删除这个key以及对应的value。
.clear()就是删除所有的数据。

let _map = new Map();
_map.set('name', "苏南大叔");
_map.set('age', 18);
console.log(_map);

_map.delete('age');
console.log(_map);

_map.clear();
console.log(_map);

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - map-4 — JavaScript，map数据类型如何使用？map增删改查（图12-5）

判断`key`是否存在`.has`

这里判断是否存在某个key，是使用.has(key)来进行判断的。

let _map = new Map();
_map.set(1, "sunan");
_map.set(2, "苏南");
console.log(_map);

console.log(_map.has(2));           // true
console.log(_map.has("sunan"));     // false

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - map-5 — JavaScript，map数据类型如何使用？map增删改查（图12-6）

检测`.size`，获取`.keys()`和`.values()`

let _map = new Map();
_map.set(1, "sunan");
_map.set(2, "苏南");
console.log(_map);

console.log("size:", _map.size);
console.log("keys:", _map.keys());
console.log("values:", _map.values());

输出：

Map(2) { 1 => 'sunan', 2 => '苏南' }
size: 2
[Map Iterator] { 1, 2 }
[Map Iterator] { 'sunan', '苏南' }

可见：.keys()和.values()都是个迭代器。

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - keys-values — JavaScript，map数据类型如何使用？map增删改查（图12-7）

遍历`keys`

let _map = new Map();
_map.set(1, "sunan");
_map.set(2, "苏南");
console.log(_map);

console.log("===01===");
var _p1 = _map.keys();
for (i = 0; i < _map.size; i++) {
    console.log(_p1.next().value);
}

console.log("===02===");
const _p2 = _map.keys();
console.log(_p2.next().value);
console.log(_p2.next().value);
console.log(_p2.next().value);

输出内容：

Map(2) { 1 => 'sunan', 2 => '苏南' }
===01===
1
2
===02===
1
2
undefined

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - 迭代器输出 — JavaScript，map数据类型如何使用？map增删改查（图12-8）

遍历`values`

let _map = new Map();
_map.set(1, "sunan");
_map.set(2, "苏南");
console.log(_map);

console.log("===03===");
const _p3 = _map.values();
let j = 0;
while (j < _map.size) {
    console.log(_p3.next().value);
    j++;
}

console.log("===04===");
const _p4 = _map.values();
console.log(_p4.next().value);
console.log(_p4.next().value);
console.log(_p4.next().value);

输出：

Map(2) { 1 => 'sunan', 2 => '苏南' }
===03===
sunan
苏南
===04===
sunan
苏南
undefined

遍历`map`内所有数据

let _map = new Map();
_map.set(1, "sunan");
_map.set(2, "苏南");
console.log(_map);

console.log("===05===");
let _p = _map.entries();
for (var i = 0; i < _map.size; i++) {
    let item = _p.next().value;       // [ 2, '苏南' ]
    let type = getType(item);         // Array
    console.log(item[0], item[1]);
    // console.log(_p.next().value[0]);  //Cannot read properties of undefined (reading '1')
}
function getType(payload) {
    return Object.prototype.toString.call(payload).slice(8, -1)
}

console.log("===06===");
_map.forEach((val, key) => {
    console.log(key, val);
});

输出：

Map(2) { 1 => 'sunan', 2 => '苏南' }
===05===
1 sunan
2 苏南
===06===
1 sunan
2 苏南

这里确定，map的最小单元是个array，相关文章：
https://newsn.net/say/js-type.html

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - map-8 — JavaScript，map数据类型如何使用？map增删改查（图12-10）

需要特别说明的是：forEach((val,key)=>{})，是val在前，key在后的，似乎与常识认知是不一样的。

然后，有些奇怪的是，下面这种写法居然报错：

_p.next().value[0]

分开写就不会报错：

let item = _p.next().value;
item[0];

题外话

下面有些不合常理的代码，没报错，但是不合常理。
map类型接收数组的写法，也接收object的写法（结果同数组）。但是，却和原始的key同时共存。

let _map = new Map();
_map.set('name', "苏南大叔");
_map.set('age', 18);
console.log(_map);

_map["name"] = "sunan大叔";
_map.age = "36";
console.log(_map);

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - 错误的用法 — JavaScript，map数据类型如何使用？map增删改查（图12-11）

这些错误的数据，连.clear()都无法清除。

_map.clear();
console.log(_map);

删除map的key和删除map的错误写法的数组key写法不同。

_map.set('age', 18);
_map.delete("age");
console.log(_map);

delete _map.age;
console.log(_map);

苏南大叔：JavaScript，map数据类型如何使用？map增删改查 - 试图解决错误 — JavaScript，map数据类型如何使用？map增删改查（图12-12）

在遍历这件事情上，map和array有着同样的forEach()写法：

["sunan", "苏南"].forEach((val, key) => {
    console.log(key, val);
});

结束语

更多javascript相关经验文章，请点击：

https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

【福利】腾讯云最新爆款活动！1核2G云服务器首年50元！

【源码】本文代码片段及相关软件，请点此获取更多信息

【绝密】秘籍文章入口，仅传授于有缘之人 js

	原创不易，转载请保留链接，谢绝镜像采集
	如果能解决您的困扰，那么想必定是极好的
	快来这里！大家都在这儿等你讨论这个问题

定义map

添加和修改，.set与.get

删除和清空，.delete和.clear

判断key是否存在.has

检测.size，获取.keys()和.values()

遍历keys

遍历values

遍历map内所有数据

题外话

相关链接

结束语