ES6学习之路9----Map数据结构

最新推荐文章于 2021-01-14 11:35:54 发布

Rattenking

最新推荐文章于 2021-01-14 11:35:54 发布

阅读量517

点赞数

分类专栏： Rattenking 的前端笔记文章标签： es6

本文链接：https://blog.csdn.net/m0_38082783/article/details/78774786

版权

Rattenking 的前端笔记专栏收录该内容

93 篇文章 7 订阅

订阅专栏

什么是Map数据结构

Map数据结构类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
实例：

//ES5:
var obj = {},arr = {'a':1};
obj[arr] = 'Array';
console.log(obj);//{'[object Object]':'Array'}

//ES6:
let map = new Map(),obj = {'a':1};
map.set(obj,'Array');
console.log(map);//{{…} => "Array"}
map.get(obj);//"Array"
map.has(obj);//true
map.delete(obj);//true
map.has(obj);//false

从上边实例可以看出在ES5的时候，对象的键值都是字符串，如果不是字符串会进行隐式转换为字符串，保存的结果就不是最开始的初衷。map数据结构就是让键值可以是各种类型的值。

创建Map初始化成员的格式

Map 作为构造函数，可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

实例：

let map = new Map([
  ['autnor', 'Rattenking'],
  ['age', '26'],
  ['sex','gentleman']
]);

map.size // 3
map.has('autnor'); // true
map.get('autnor'); // "Rattenking"
map.has('age'); // true
map.get('age'); //"26"
map.has('sex'); // true
map.get('sex'); //"gentleman"
console.log(map);//{"autnor" => "Rattenking", "age" => "26", "sex" => "gentleman"}

实现map初始数据的原理

let arr = [
  ['autnor', 'Rattenking'],
  ['age', '26'],
  ['sex','gentleman']
]
let map = new Map();
arr.forEach(current => map.set(current[0],current[1]));
console.log(map);//{"autnor" => "Rattenking", "age" => "26", "sex" => "gentleman"}

注意事项

1.任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。

let set = new Set([['autnor', 'Rattenking'],['age', '26']]);
let map = new Map(set);
console.log(map);//{"autnor" => "Rattenking", "age" => "26"}

2.对同一个键多次赋值，后面的值将覆盖前面的值。

let map = new Map();
map.set('autnor','Rattenking');
map.set('autnor','Stone');
map.get('autnor');//"Stone"

读取一个未知的键，则返回undefined。

let map = new Map([['a',1]]);
map.get('a');//1
map.get('b');//undefined

4.只有对同一个对象的引用，Map 结构才将其视为同一个键。

let map = new Map();
map.set(['autnor'],'Rattenking');
map.get(['autnor']);//undefined

5.同理可推：同样的值的两个实例，在 Map 结构中被视为两个键。

let map = new Map();
let arr1 = ['autnor', 'Rattenking'];
let arr2 = ['autnor', 'Rattenking'];
map
.set(arr1,'Rattenking')
.set(arr2,'Stone');
console.log(map);//{Array(2) => "Rattenking", Array(2) => "Stone"}
map.get(arr1);//"Rattenking"
map.get(arr2);//"Stone"

结论：Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。

6.NaN虽然不严格相等，但是在map中会认为是同一键值。其他键值根据严格相等（===）来判断是否为同一键值。

let map = new Map();

NaN === NaN//false
map.set(NaN,1);
map.get(NaN);//1

-0 === 0 && 0 === +0 && -0 === +0//true
map.set(-0,'num');
map.get(+0);//'num'

undefined === null//false
map.set(undefined, undefined);
map.set(null, null);
map.get(undefined);//undefined
map.get(null);//null

true === 'true'//false
map.set(true,'bool');
map.get('true');//undefined