es6的map是有序吗

本篇内容主要讲解“es6的map是有序吗”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6的map是有序吗”吧!

成都创新互联公司是一家专注于网站制作、网站设计与策划设计,峡江网站建设哪家好?成都创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:峡江等地区。峡江做网站价格咨询:18982081108

map是有序的。ES6中的map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有数据类型；键名的等价性判断是通过调用“Objext.is()”方法来实现的，所以数字5与字符串“5”会被判定为两种类型，可以分别作为两种独立的键出现在程序中。

一、map集合

JavaScript的对象（object），本质是上键值对的集合，但是传统上只能用字符串当做键值对。

为了解决这个问题，ES6提供了map数据结构。它类似对象，也是键值对的集合。但是这个键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。也就是说object结构提供了（字符串-值）的对应，map结构实现

ES6中的map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有数据类型。键名的等价性判断是通过调用Objext.is()方法来实现的，所以数字5与字符串‘5’会被判定为两种类型，可以分别作为两种独立的键出现在程序中。

注意：有一个例外，map集合中将+0和-0视为相等，与Object.is()结果不同，如果需要“键值对”的数据结构，map比object更合适，具有极快的查找速度

1、属性：size

返回map的元素数

2、基本方法

（1）set()

给map添加数据，返回添加后的map（给已存在的键赋值后会覆盖掉之前的值）

（2）get()

获取某个key的值，返回key对应的值，没有则返回undefined

（3）has()

检测是否存在某个key，返回布尔值

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.size);
console.log(map.get('JacksonWang'));
console.log(map.get('LEO'));
console.log(map.has('Z-'));
 
//输出:    3
//        123
//        456
//        true

（4）delete()

删除某个key及其对应的value，返回布尔值，成功删除则为true

（5）clear()

清除所有的值，返回undefined

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
map.delete('Z-');
console.log(map.size);
 
console.log(map.clear())
 
//输出:  2
//      undefined

3、遍历方式

注意：map的遍历顺序就是插入顺序

（1）keys()

获取map的所有key

（2）values()

获取map的所有值

（3）entries()

获取map的所有成员

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.keys())//打印所有的键
console.log(map.values())//打印所有的值
console.log(map.entries())//以键值对的方式
 
/*输出：
[Map Iterator] { 'JacksonWang', 'LEO', 'Z-' }
[Map Iterator] { '123', '456', '789' }
[Map Entries] {
  [ 'JacksonWang', '123' ],
  [ 'LEO', '456' ],
  [ 'Z-', '789' ]
}*/

（4）forEach()

遍历map的所有成员

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
for(const [key,value] of map.entries()){
    console.log(`${key}:${value}`);
}
/*输出:
JacksonWang:123
LEO:456
Z-:789
*/

4、转为数组

map结构转为数组解构

let map1 = new Map([
    [1,'One'],
    [2,'Two'],
    [3,'Three']
])
 
console.log([...map1.keys()]);
console.log(...map1.entries())
console.log([...map1.entries()]);
 
/*输出:
[ 1, 2, 3 ]
[ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]
[ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
*/

二、weakmap集合

WeakMap是弱引用Map集合，也用于存储对象的弱引用。WeakMap集合中的键名必须是一个对象，如果使用非对象键名会报错：集合中保存的是这些对象的弱引用，如果在弱引用之外的不存在其他的强引用，引擎的垃圾回收机制会自动回收这个对象，同时会移出WeakMap集合中的键值对。但是只有集合的键名遵循这个规则，键名对应的值如果是一个对象，则保存的对象的强引用，不会触发垃圾回收装置

1、WeakMap集合的用途

（1）存储DOM元素

    
    
    
    


    WeskMap测试
    

代码中的myElement是一个DOM节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在WeakMap里，对应的键名就是myElement，一旦这个DOM节点删除，该状态就会自动消失，不存在内存泄漏的风险

（2）注册监听事件的listener对象

    
    
    
    


    WeskMap测试
    

所体现的效果是一样的

（3）部署私有属性

function Person(name){
    this._name = name;
}
 
Person.prototype.getName = function(){
    return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person('张三');
console.log(p._name)
 
//输出：张三

我们不想让用户直接访问name属性，直接使用下面的方法将name包装成私有属性

let Person = (function(){
    let privateData = new WeakMap();
    function Person(yourname){
        privateData.set(this,{_name:yourname})//this当前这个键的对象
    }
    Person.prototype.getName = function(){
        return privateData.get(this)._name;//
    }
    return Person;
})();//定义好了函数就开始执行
 
let p = new Person('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
 
/*输出:
undefined
jack
*/

到此，相信大家对“es6的map是有序吗”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！