全球观速讯丨es6 map有序吗

时间:2022-11-03 19:07:24       来源:PHP中文网

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

一、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:123LEO:456Z-: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元素

                Document        <script>        let btn = document.querySelector("#btn");        let wmap = new WeakMap();        wmap.set(btn,{timesClicked:0})//在map中放一个键值对,btn为键         btn.addEventListener("click",function(){            let temp = wmap.get(btn);//从这里获取键名为btn的值            temp.timesClicked++;            console.log(temp.timesClicked)        },false)    </script>
登录后复制

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

(2)注册监听事件的listener对象

                Document        <script>        let btn = document.querySelector("#btn");        let wmap = new WeakMap();        wmap.set(btn,{timesClicked:0})//在map中放一个键值对,btn为键         // btn.addEventListener("click",function(){        //     let temp = wmap.get(btn);//从这里获取键名为btn的值        //     temp.timesClicked++;        //     console.log(temp.timesClicked)        // },false)        function f1(){            let temp = wmap.get(btn);//从这里获取键名为btn的值            temp.timesClicked++;            console.log(temp.timesClicked)        }        btn.addEventListener("click",f1,false)    </script>
登录后复制

所体现的效果是一样的

(3)部署私有属性

function Person(name){    this._name = name;} Person.prototype.getName = function(){    return this._name;}//但这是,创建一个Person对象的时候,我们可以直接访问namelet 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()) /*输出:undefinedjack*/
登录后复制

【相关推荐:javascript视频教程、web前端】

以上就是es6 map有序吗的详细内容,更多请关注php中文网其它相关文章!

关键词: 垃圾回收 数据结构 相关文章