【JS013】ES6的学习笔记之数据结构——Map

日期：2021年8月27日
作者：Commas
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
(ง •_•)ง 积跬步以致千里，ES6的学习笔记
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

---

---

一、Map的介绍

说明：ES6提供了新的数据结构Map，其类似于对象，但是键名却不再局限于字符串，任何值(对象或原始值) 都可以作为一个键，并且还实现了iterator接口，因此可以使用...（扩展运算符）和for...of...进行遍历。

• 语法：let newSet = new Set(param);
  注意：param参数应该实现了iterator接口
  本质：Set本身是一个构造函数，用来生成Set数据结构。

//（1）创建一个空的Map
let m1 = new Map();
console.log(m1);
//控制台输出：Map(0) {}

//（2）键名可以是字符串，数字，对象，数组等等
let m2 = new Map();
//（2-1）非链式调用
m2.set("name","张三");
m2.set(18,"不能说的秘密");
m2.set({"k":"v"},"键名是对象");
m2.set([1,2,3],"键名是数组");
//（2-2）链式调用
// m2.set("name","张三")
//   .set(18,"不能说的秘密")
//   .set({"k":"v"},"键名是对象")
//   .set([1,2,3],"键名是数组")
console.log(m2);
//控制台输出：
//Map(4) {"name" => "张三", 18 => "不能说的秘密", 
//{…} => "键名是对象", Array(3) => "键名是数组"}

//（3）Map 接受一个数组作为参数
let m3 = new Map([
    ["name","李四"],
    ["age",18]
]);
console.log(m3);
//控制台输出：Map(2) {"name" => "李四", "age" => 18}

//（4）Map 不可以接受一个对象作为参数
let m4 = new Map({name:"王五"});
console.log(m4);
//控制台输出：
//TypeError: object is not iterable 
//(cannot read property Symbol(Symbol.iterator))

也可以链式调用

m2 = new Map();
//（2-1）非链式调用
//m2.set("name","张三");
// m2.set(18,"不能说的秘密");
// m2.set({"k":"v"},"键名是对象");
// m2.set([1,2,3],"键名是数组");
//（2-2）链式调用
m2.set("name","张三")
  .set(18,"不能说的秘密")
  .set({"k":"v"},"键名是对象")
  .set([1,2,3],"键名是数组")
console.log(m2);
//控制台输出：
//Map(4) {"name" => "张三", 18 => "不能说的秘密", 
//{…} => "键名是对象", Array(3) => "键名是数组"}

二、Map属性和方法

序号	属性或方法	描述
1	size	返回Map的成员个数
2	set	新增一个成员，并返回当前Map
3	delete	删除成员，并返回boolean值
4	has	检测某个键是否在当前 Map 对象之中，并返回boolean值
5	keys	【遍历-方法1】：返回键名的遍历器
6	values	【遍历-方法2】：返回键值的遍历器
7	entries	【遍历-方法3】：返回键值对的遍历器
8	foreach	【遍历-方法4】：使用回调函数遍历每个成员
9	get	获取键名对应的值
10	clear	清空Map

（1）属性或方法

m = new Map();
m.set("name","张三")
  .set(18,"不能说的秘密")
  .set({"k":"v"},"键名是对象")
  .set([1,2,3],"键名是数组")
console.log(m);
//控制台输出：
//Map(4) {"name" => "张三", 18 => "不能说的秘密", 
//{…} => "键名是对象", Array(3) => "键名是数组"}

//（1）size
console.log(m.size);
//控制台输出：4

//（2）set
m.set(1,1);
console.log(m);
//控制台输出：
//Map(5) {"name" => "张三", 18 => "不能说的秘密", 
//{…} => "键名是对象", Array(3) => "键名是数组", 1 => 1}

//（3）delete
let del = m.delete("name"); 
console.log(del);
//控制台输出：true

//（4）has
let has = m.has(18); 
console.log(has);
//控制台输出：true

//（9）get
console.log(m.get(18));
//控制台输出：不能说的秘密

//（10）clear
m.clear();
console.log(m);
//控制台输出：Map(0) {}

（2）Map的遍历

let m = new Map()
  .set("k1","v1")
  .set("k2","v2")
  .set("k3","v3")

//（5）keys
for(let item of m.keys()){
    console.log(item);
}
//控制台输出：
//k1
//k2
//k3

console.log(...m.keys());
//控制台输出：k1 k2 k3

console.log([...m.keys()]);
//控制台输出：(3) ["k1", "k2", "k3"]


//（6）values
for(let item of m.values()){
    console.log(item);
}
//控制台输出：
//v1
//v2
//v3

console.log(...m.values());
//控制台输出：v1 v2 v3

console.log([...m.values()]);
//控制台输出：(3) ["v1", "v2", "v3"]


//（7）entries
for(let item of m.entries()){
    console.log(item);
}
//控制台输出：
//(2) ["k1", "v1"]
//(2) ["k2", "v2"]
//(2) ["k3", "v3"]
console.log(...m.entries());
//控制台输出：
//(2) ["k1", "v1"] (2) ["k2", "v2"] 

console.log([...m.entries()]);
//控制台输出：
//(3) [Array(2), Array(2), Array(2)]


//（8）foreach
m.forEach(item => {
    console.log(item);
});
//控制台输出：
//v1
//v2
//v3

m.forEach((v,k) => {
    console.log(k,v);
});
//控制台输出：
//k1 v1
//k2 v2
//k3 v3

知识加油站：Map的遍历顺序就是插入顺序。

三、Map的遍历

Map 结构原生提供三个遍历器生成函数和一个遍历方法，遍历顺序就是插入顺序。
总共有4种：keys、values、entries和foreach，如下：

• Map.prototype.keys()：返回键名的遍历器；
• Map.prototype.values()：返回键值的遍历器
• Map.prototype.entries()：返回所有成员的遍历器。
• Map.prototype.forEach()：遍历 Map 的所有成员。

示例请看【二、Map属性和方法】；

四、Map的注意事项

• Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键

let arr1=[1];
let arr2=[1];

let m = new Map()
  .set(arr1,"arr1")
  .set(arr2,"arr2")

console.log(m);
//控制台输出：Map(2) {Array(1) => "arr1", Array(1) => "arr2"}
console.log(m.get(arr1),m.get(arr1)===m.get(arr2));
//控制台输出：arr1 false
console.log(m.get(arr2),m.get(arr1)===m.get(arr2));
//控制台输出：arr2 false

let arr3=arr1;
m.set(arr3,"arr3")
console.log(m.get(arr3),m.get(arr1)===m.get(arr3));
//控制台输出：arr3 true
console.log(m);
//控制台输出：Map(2) {Array(1) => "arr3", Array(1) => "arr2"}

---

参考文章：
1、《Set 和 Map 数据结构》
2、《3.1.1 ES6 Map 与 Set》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/119950625