Map是一种数据结构,它类似于对象,是键值对的集合,但是键的范围不限于字符串,各种类型的值(包括对象)都可以当做键。
1、基础知识
重点就是相比传统的字符串,它的键可以很丰富。
它的初始化函数接收iterable类型的数据,比如Array、Set、Map等,与set类似。
let map1=new Map([['红色','red'],['黑色','black'],['白色','white']]);
console.log(map1);
练习:
let map=new Map();
map.set(1,"ABCDEFG");
map.set( 'func',function(a){ console.log(`这是函数的输出:${a*2}`) } );
map.set( 'obj',{ name:'小明',age:9 } );
map.set('array',[1,2,3,4]);
map.set({name:'PolyCOM'},[1,2,3,4]);
console.log(map);
console.log(map.size);
//输出某个键值对应的项目
console.log(map.get(1));
map.get('func')(3);
console.log(map.get('obj').name);
console.log('---------------------');
//输出全部
for(let item of map){
console.log(item);
}
console.log('---------------------');
//输出全部
for(let item of map.entries()){
console.log(item);
}
console.log('---------------------');
//输出全部的键
for(let item of map.keys()){
console.log(item);
}
console.log('---------------------');
//输出全部的值
for(let item of map.values()){
console.log(item);
}
console.log('---------------------');
map.forEach(e=>{
console.log(e);
})
输出结果:
感觉它比array、set更实用,因为它类似字典,键可以很灵活地设置。
2、注意点
⑴ 非对象的数据做为键,值如果相等,Map也将其视为一个键,-0和+0是同一个值。
let map2=new Map();
map2.set(-0,"Fsou");
map2.set(+0,"稀土掘金");//将前者赋值覆盖
console.log(map2.get(0));//输出:稀土掘金
⑵ 对象类型做为键,除非地址赋给某个变量保存,否则即使同一对象也视为不同键。
let map3=new Map();
map3.set([9],"百度");
map3.set([9],"CSDN");
console.log(map3.get([9]));//输出:undefined
let arr=[9];
map3.set(arr,"CSDN");
console.log(map3.get(arr));//输出:CSDN
⑶ undefined和null是两个不同的键,而两个NaN
为同一个键。
let map4=new Map();
map3.set(NaN,1);
map3.set(NaN,2);
console.log(map3.get(NaN));//输出:2
⑷ Map与数组
let week=[
['星期日','Sunday'],
['星期一','Monday'],
['星期二','Tuesday'],
['星期三','Wednesday'],
['星期四','Thursday'],
['星期五','Friday'],
['星期六','Saturday'] ]
const map1=new Map();
week.forEach( ([key,value]) => map1.set(key,value) );
console.log(map1);
console.log([...map1]);
console.log([...map1.keys()]);
console.log([...map1.values()]);
输出结果:
利用数组的filter和map方法。
let map5 = new Map().set(1, '红色').set(2, '黑色').set(3, '白色').set(4, '绿色');
console.log(map5);
let map6 = new Map(
[...map5].map(
([k,v]) => [k*2,v+'的形状']
)
);
console.log(map6);
let map7 = new Map(
[...map5].filter(
([k,v]) => k
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?