【ES6】Map

77 阅读3分钟

一、Map

由于对象Object本质上是键值对的集合(Hash结构),但是传统上只能用字符串当做键(范围不限于字符串,各种类型的值【包括对象】都可以当做键。总之,Object结构提供“字符串——值”的对应,Map结构提供了“值——值”的对应。

二、Map的方法和属性

1、在Map里增加键值对使用:map.set(key,value),读取键值使用:map.get(key)

 let map = new Map()
    let obj={name:"Obj"}
    map.set(obj,"我是Obj")
    console.log(map.get(obj));//我是Obj

2、删除键值对使用:map.delete(key)

   let map = new Map()
   map.set(1,"x")
   map.set(2,"y")
   map.delete(2)
   console.log(map);//Map { 1 → "x" }

4、判断Map中是否含有某个键使用:map.has(key)

   let map= new Map()
   map.set(1,"a")
   map.set(2,"b")
   map.set(3,"c")
   map.set(4,"d")
   console.log(map.has(2));//true
   console.log(map.has(0));//false

5、获取Map的大小使用:map.size

   let map= new Map()
   map.set(1,"a")
   map.set(2,"b")
   map.set(3,"c")
   map.set(4,"d")
   console.log(map.size);//4

6、清除Map中的所有成员使用:map.clear()

   let map= new Map()
   map.set(1,"a")
   map.set(2,"b")
   map.set(3,"c")
   map.set(4,"d")
   map.clear()
   console.log(map);//Map(0)

7、遍历方法

(1)for(of+map.keys())

    let map = new Map()
    map.set("x",1)
    map.set("y",2)
    map.set("z",3)
    for(let i of map.keys())
    {
        console.log(i);
    }
    //x
    //y
    //z

(2)for(of+map.values())

    let map = new Map()
    map.set("x",1)
    map.set("y",2)
    map.set("z",3)
    for(let i of map.values())
    {
        console.log(i);
    }
    //1
    //2
    //3

(3)for(of+map.entries())

    let map = new Map()
    map.set("x",1)
    map.set("y",2)
    map.set("z",3)
    for(let i of map.entries())
    {
        console.log(i);
    }
    // Array [ "x", 1 ]
    // Array [ "y", 2 ]
    // Array [ "z", 3 ]
    let map = new Map()
    map.set("x",1)
    map.set("y",2)
    map.set("z",3)
    for(let [key,value]of map)
    {
        console.log(key,value);
    }
    // x 1
    // y 2
    // z 3

(4)map.forEach()

    let map = new Map()
    map.set("x",1)
    map.set("y",2)
    map.set("z",3)
    map.forEach(function(value,key,map){
        console.log("value",value);//value 1
        console.log("key",key);// key x
        console.log("map",map);//map Map(3) { x → 1, y → 2, z → 3 }...
    })

(5)使用扩展运算把Map结构转为数组

    let map = new Map()
        .set("x", 1)
        .set("y", 2)
        .set("z", 3)

    console.log([...map.keys()]);//Array(3) [ "x", "y", "z" ]
    console.log([...map.values()]);//Array(3) [ 1, 2, 3 ]
    console.log([...map.entries()]);//Array(3) [ (2) […], (2) […], (2) […] ]
    console.log([...map]);//Array(3) [ (2) […], (2) […], (2) […] ]

(6)Map结构+map/filter实现遍历或过滤

Map+filter实现过滤获取奇偶数集合

    let map = new Map()
        .set("x", 1)
        .set("y", 2)
        .set("z", 3)
        .set("k", 4)
    let mapOdd=new Map([...map].filter(([key,value])=>value%2==1))
    console.log(mapOdd);//Map { x → 1, z → 3 }
    let mapEven=new Map([...map].filter(([key,value])=>value%2==0))
    console.log(mapEven);//Map { y → 2, k → 4 }

Map+map实现遍历所有元素实现遍历操作

    let map = new Map()
        .set("x", 1)
        .set("y", 2)
        .set("z", 3)
        .set("k", 4)
    let map2=new Map([...map].map(([key,value])=>[key+"2",value+"变化"]))
   console.log(map2);
   //Map(4) { x2 → "1变化", y2 → "2变化", z2 → "3变化", k2 → "4变化" }

三、Map与其他数据类型的转换

1、Map转为数组:使用扩展运算

    let map = new Map()
        .set("x", 1)
        .set("y", 2)
    console.log([...map]);
    //Array [ Array [ "x", 1 ], Array [ "y", 2 ] ]

2、数组转为Map

    let map = new Map([["x",1],["y",2]])
    console.log(map);//Map { x → 1, y → 2 }

3、Map转为Object

    function mapToObject(map){
        let obj=Object.create(null)
        for(let [key,value] of map.entries()){
            obj[key]=value
        }
        return obj
    }
    let map = new Map()
    .set("x",1)
    .set("y",2)
    .set("z",3)
    console.log(mapToObject(map));
    //Object { x: 1, y: 2, z: 3 }

4、Object转为Map

    let obj={ x: 1, y: 2, z: 3 }
    let map = new Map(Object.entries(obj))
    console.log(map);//Map(3) { x → 1, y → 2, z → 3 }

5、Map转为JSON

(1)键名都是字符串

// 把Map转为Object
    function mapToObject(map) {
        let obj = Object.create(null)
        for (let [key, value] of map.entries()) {
            obj[key] = value
        }
        return obj
    }
    function mapToJSON(map) {
        return JSON.stringify(mapToObject(map))
    }
    let map = new Map()
        .set("x", 1)
        .set("y", 2)
        .set("z", 3)

    console.log(mapToJSON(map));//{"x":1,"y":2,"z":3}

(2)键名不都是字符串

    function mapToJSON(map) {
        return JSON.stringify([...map])
    }
    let map = new Map()
        .set({"x":111}, 1)
        .set("y", [111,222,333])
        .set("z", 3)

    console.log(mapToJSON(map));//[[{"x":111},1],["y",[111,222,333]],["z",3]]

6、JSON转为Map

    let j='{"name":"yt","age":11,"sex":"男"}'
    console.log(new Map(Object.entries(JSON.parse(j))));
    //Map(3) { name → "yt", age → 11, sex → "男" }