分享更有价值
被信任是一种快乐

es6 map是不是引用类型

文章页正文上

本篇内容主要讲解“es6 map是不是引用类型”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6 map是不是引用类型”吧! map是引用类型;map(集合)是es6新增的一种引用数据类型,表示数据的映射关系。map集合数据类型中数据是以“键/值”的方式存储的,可以使用对象的属性作为键,使用属性来引用值;map可以使用new来创建,例“const myMap = new Map();”。map是引用类型。在ES6之前,在JavaScript中实现‘键’=>‘值’,也就是我们常说的键值对,是用Object来完成的。但这种实现方式在特殊场景下的有问题的,ES6又出了一个为Map的新集合类型,为这门语言带来正真的键值对存储机制。map(集合)是es6新增的一种引用数据类型,表示数据的映射关系;map集合数据类型中数据是以“键/值”的方式存储的,可以使用对象的属性作为键,使用属性来引用值。1-1 创建Map使用new关键字来实例一个map

letm=newMap();

console.log(m);
//Map(0){}

创建时初始化:
传入一个二维数组参数(可迭代对象,内部以数组的方式传入键值)
每个子数组,第一个元素是map对应的key, 第二个元素是map对应的value

letm=newMap([[{},222],[{},'123']]);

console.log(m);
//Map(2){{}=>222,{}=>'123'}

1-2 Map Api通过set()方法添加,传入两个参数,第一个传入映射的键,第二个传入映射的值。返回的是该映射集合(意味着可以链式添加)

letm=newMap();

m.set('prop','值');

console.log(m);
//Map(1){'prop'=>'值'}

链式添加键值

letm=newMap();

m.set('prop','值').set('prop2',false).set('num',{id:13});

console.log(m);
//Map(3){'prop'=>'值','prop2'=>false,'num'=>{id:13}}

使用size属性可以获取到当前集合元素数量

letm=newMap();

m.set('prop','值').set('prop2',false).set('num',{id:13});

console.log(m.size);

通过get()方法获取到元素,传入获取目标的key

letm=newMap();

m.set('prop','值').set('prop2',false).set('num',{id:13});

console.log(m.get('prop2'));
//false

通过delete()方法删除映射集合中的某个元素,返回删除成功或失败的布尔值

letm=newMap();

m.set('prop','值').set('prop2',false).set('num',{id:13});

m.delete('prop2');
//true

console.log(m.get('prop2'),m.size);
//undefined2

使用has()方法检测目标元素是否存在,返回检测结果的布尔值

letm=newMap();

m.set('prop','值').set('prop2',false).set('num',{id:13});

m.delete('prop2');
//true

console.log(m.has('prop2'),m.has('num'));
//falsetrue

使用clear()方法可以清除所有的元素, 返回清除成功的布尔值

letm=newMap();

m.set('prop','值').set('prop2',false).set('num',{id:13});

m.clear();
//true

console.log(m免费云主机、域名);
//Map(0){}

1-3 顺序与迭代map可以根据插入顺序迭代元素
映射实例会提供(iterator).能够以插入的顺序生成[key, value]形式的数组, 可以通过entries()方法(或者提供的Symbol.iterator)迭代器接口遍历。

letm=newMap();

m.set('prop','值').set('prop2',false).set('num',{id:13});

console.log(m.entries===m[Symbol.iterator]);//true

for(letk1ofm.entries()){
console.log(k1);
//['prop','值']
//['prop2',false]
//['num',{id:13}]
//遍历的属性即对应映射元素的键值对数组
}

for(letk2ofm.keys()){
console.log(k2);
//prop
//prop2
//num
//遍历的属性对应映射元素的键
}

for(letk3ofm.values()){
console.log(k3);
//值
//false
//{id:13}
//遍历的属性对应映射元素的值
}

for(letk4ofm[Symbol.iterator]()){
console.log(k4);
//['prop','值']
//['prop2',false]
//['num',{id:13}]
//遍历的属性即对应映射元素的键值对数组
}

1-4 与Object对比内存占用浏览器的差异会导致两种存储方式占用的内存占用所不同,不过在给定内存大小的情况下,map比Object多存储大约50%的键值对插入性能插入速度上面 map 和 Object性能大致相同, 但是如果代码涉及大量的插入,建议使用map查找速度差异较小,只包含少量键值对的情况下Object更好删除性能Object 的delete()性能较差,而map的删除delete()性能好,如果数据涉及到大量的删除操作,建议使用map到此,相信大家对“es6 map是不是引用类型”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: 如何使用css实现箭头

这篇文章主要介绍“如何使用css实现箭头”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用css实现箭头”文章能帮助大家解决问题。一、基础箭头样式在CSS中实现一个简单的箭头非常简单,它只需要一个简单的CSS伪元素…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册