当前位置:网站首页>关于new Map( )还有哪些是你不知道的
关于new Map( )还有哪些是你不知道的
2022-07-05 16:08:00 【Fx_cap】
1、Map 的特点
- Map 对象保存键值对,并且能够记住键的原始插入顺序, 任何值都可以作为一个键或一个值
- Map 对象在迭代时会根据对象中的元素插入顺序来进行
- Map 对象使用 for ... of 循环在每次迭代后会返回一个形式为
[key, value]
的数组 - Map 对象键的比较基于零值相等的算法,在目前的 ECMAScript 规范中,
-0
和+0
被认为是相等的,使用 Object.is(-0,+0)返回 false - Map 对象设置属性时,以下代码可以正常运行,但是不推荐,因为这种设置属性的方式不会改变 Map 的数据结构,无法被查询到
const map = new Map(); map['bla'] = 'blaa'; console.log(map); // {bla: 'blaa', size: 0} console.log(map.has('bla')); //false console.log(map.get('bla')); //undefined console.log(map.delete('bla')); //false
- NaN 也可以作为
Map
对象的键const map = new Map(); map.set(NaN, 'not a number'); console.log(map); //{NaN => 'not a number'}
- 正确的存储数据到 Map 中的方式是使用
set(key, value)
方法const map = new Map(); map.set('bla', 'blaa'); console.log(map); //{'bla' => 'blaa'} console.log(map.has('bla')); //true console.log(map.get('bla')); //blaa console.log(map.delete('bla')); //true
2、Map 的实例属性
size: 返回 Map 对象中的键值对的个数
const map = new Map();
map.set('bla', 'blaa');
console.log(map.size); //1
3、Map 的实例方法:
- set ( key, value ) : 在
Map
对象中设置与指定的键key
关联的值value
,并返回Map
对象 - has( key ) : 返回一个布尔值,用来表明
Map
对象中是否存在与key
关联的值 - get ( key ) : 返回与
key
关联的值,若不存在关联的值,则返回undefined
- delete(key) : 移除
Map
对象中指定的键值对,如果键值对存在并成功被移除,返回true
,否则返回false
。调用delete
后再调用Map.prototype.has(key)
将返回false
clear():
移除Map
对象中所有的键值对
const map = new Map();
map.set('name', 'Andy'); // {'name' => 'Andy'}
map.set('age', 18); // {'name' => 'Andy'}
map.has('name'); //true
map.get('name'); //Andy
map.delete('name'); //true
map.set('name', 'Andy'); // {'name' => 'Andy'}
map.clear();
4、迭代方法
- keys( ) : 返回一个新的迭代对象,其中包含
Map
对象中所有的键,并以插入Map
对象的顺序排列 - values( ) : 返回一个新的迭代对象,其中包含
Map
对象中所有的值,并以插入Map
对象的顺序排列 - entries( ) : 返回一个新的迭代对象,其为一个包含
Map
对象中所有键值对的[key, value]
数组,并以插入Map
对象的顺序排列 - forEach( callback ) :
const map = new Map();
map.set('name', 'Andy'); // {'name' => 'Andy'}
map.set('age', 18); // {'name' => 'Andy'}
map.keys(); // {'name', 'age'}
map.values(); // {'Andy', 18}
map.entries(); // {'name' => 'Andy', 'age' => 18}
map.forEach((item) => {
console.log(item); //Andy 18
});
5、使用 for ... of 迭代
const map = new Map();
map.set('name', 'Andy');
map.set('age', 14);
for (const [key, value] of map) {
console.log(`key: ${key},value: ${value}`);
// key: name,value: Andy
// key: age,value: 14
}
for (const [key, value] of map.entries()) {
console.log(`key: ${key},value: ${value}`);
// key: name,value: Andy
// key: age,value: 14
}
for (const key of map.keys()) {
console.log(`key: ${key}`);
// key: name
// key: age
}
for (const value of map.values()) {
console.log(`value: ${value}`);
// value: Andy
// value: 14
}
6、Map 与数组的关系
- 使用常规的 Map 构造函数可以将一个二维键值对数组转成一个 Map 对象
const arr = [['name', 'Andy'], ['age', 14]]; const map = new Map(arr); console.log(map); // {'name' => 'Andy', 'age' => 14}
- 使用 Array.from 或展开运算符可以将一个Map对象转成一个二维数组
const map = new Map(); map.set('name', 'Andy'); map.set('age', 14); console.log([...map]);//[['name','Andy'],['age',14]]
7、复制或合并Map
- 复制
const map1 = new Map([['name', 'zs']]); const map2 = new Map(map1); console.log(map2 === map1);//false 浅比较 不为同一个对象的引用 const map1 = new Map([ ['name', 'zs'], ['hobby', { sing: 'xxxx' }], ]); const map2 = new Map(map1); for (const [key, value] of map1) { if (key === 'hobby') { value.sing = 'sub'; } } console.log(map1, map2);// hobby 引用同一地址
- Map 对象间合并,但是会保持键的唯一性,相同的键,后面的会把前面的值覆盖掉
const map1 = new Map([ ['name', 'zs'], ['age', 18], ]); const map2 = new Map([ ['name', 'ls'], ['age', 20], ]); const map3 = new Map([...map1, ...map2]); console.log(map3); // {'name' => 'ls', 'age' => 20}
- Map 对象与数组的合并,但是会保持键的唯一性,相同的键,后面的会把前面的值覆盖掉
const map1 = new Map([ ['name', 'zs'], ['age', 18], ]); const arr = ['name', 'ls']; const newMap = new Map([...map1, arr]); //{'name' => 'ls', 'age' => 18}
边栏推荐
- Research and development efficiency measurement index composition and efficiency measurement methodology
- Record a 'very strange' troubleshooting process of cloud security group rules
- 树莓派4b安装Pytorch1.11
- [echart] resize lodash to realize chart adaptation when window is zoomed
- How to uninstall MySQL cleanly
- Reduce the cost by 40%! Container practice of redis multi tenant cluster
- 二叉树相关OJ题
- How was the middle table destroyed?
- Binary tree related OJ problems
- 降本40%!Redis多租户集群的容器化实践
猜你喜欢
Single merchant v4.4 has the same original intention and strength!
Data Lake (XIV): spark and iceberg integrated query operation
养不起真猫,就用代码吸猫 -Unity 粒子实现画猫咪
Fleet tutorial 09 basic introduction to navigationrail (tutorial includes source code)
新春限定丨“牛年忘烦”礼包等你来领~
如何将mysql卸载干净
为季前卡牌游戏 MotoGP Ignition Champions 做好准备!
效果编辑器新版上线!3D渲染、加标注、设置动画,这次一个编辑器就够了
scratch五彩糖葫芦 电子学会图形化编程scratch等级考试三级真题和答案解析2022年6月
Binary tree related OJ problems
随机推荐
[es6] add if judgment or ternary operator judgment in the template string
求解汉诺塔问题【修改版】
Enterprise backup software Veritas NetBackup (NBU) 8.1.1 installation and deployment of server
漫画:什么是服务熔断?
Global Data Center released DC brain system, enabling intelligent operation and management through science and technology
用键盘输入一条命令
You should have your own persistence
How to install MySQL
Spring Festival Limited "forget trouble in the year of the ox" gift bag waiting for you to pick it up~
File operation --i/o
【刷題篇】鹅廠文化衫問題
【 brosser le titre 】 chemise culturelle de l'usine d'oies
How was the middle table destroyed?
Apiccloud cloud debugging solution
Data verification before and after JSON to map -- custom UDF
Starkware: to build ZK "universe"
【漏洞预警】CVE-2022-26134 Confluence 远程代码执行漏洞POC验证与修复过程
If you can't afford a real cat, you can use code to suck cats -unity particles to draw cats
Sentinel-流量防卫兵
Flet教程之 11 Row组件在水平数组中显示其子项的控件 基础入门(教程含源码)