es6——新增的数据类型 对象集合 Map

Map

特点:

  1. 类似于对象,本质上是键值对的集合
  2. “键”不局限于字符串,各种类型的值(包括对象)都可以当做键
  3. 对象“字符串-值”,map “值-值”,是一种更加完善的 hash 结构实现
  4. 键唯一,相同键后面的会覆盖前面的
 {
        let obj = {a: 1}, obj1 = {b: 2}, obj2 = {};
        obj2.c = 3;
        //无论键内传什么 最终都会转换为字符串
        obj2['d'] = 4;
        obj2[obj] = 5;

        console.log(obj.toString());//[object Object]
        console.log(obj, obj1, obj2);//{a: 1} {b: 2} {c: 3, d: 4, [object Object]: 5}
    }

map

    {
        let obj = {a: 1}, obj1 = {b: 2};
        //创建一个map
        const map = new Map([
            ['name', 'bob'],
            ['name', 'lucy'],//自动覆盖重复键值
            ['age', 18],
            [obj, 'good'],
            [obj1, 'bad'],
            [[1, 2], 'hhh']
        ]);

        console.log(map);//Map(5) {"name" => "lucy", "age" => 18, {…} => "good", {…} => "bad", Array(2) => "hhh"}
    }

属性

size

    {
        let obj = {a: 1}, obj1 = {b: 2};
        const map = new Map([
            ['name', 'bob'],
            ['name', 'lucy'],
            ['age', 18],
            [obj, 'good'],
            [obj1, 'bad'],
            [[1, 2], 'hhh']
        ]);

        console.log(map.size);//5 (重复的键值算是一个)
    }

方法

1.set 和 get

    {
        let obj = {a: 1}, obj1 = {b: 2},obj2=[1,2];
        const map = new Map([
            [obj, 'good'],
            [obj1, 'bad'],
            [obj2, 'hhh']
        ]);

        //set(支持链式编辑)
        console.log(map.set('friends', ['tom', 'john']).set('num', 20));//Map(5) {{…} => "good", {…} => "bad", Array(2) => "hhh", "friends" => Array(2), "num" => 20}
        console.log(map);//Map(5) {{…} => "good", {…} => "bad", Array(2) => "hhh", "friends" => Array(2), "num" => 20}

        //get(不支持链式编辑)
        console.log(map.get('num'));//20
        console.log(map.get(obj));//good
        console.log(map.get(obj2));//hhh
        console.log(map.get('friends'));//(2) ["tom", "john"]
    }

2.delete(不支持链式编辑)

    {
        let obj = {a: 1}, obj1 = {b: 2};
        //创建一个map
        const map = new Map([
            ['name', 'bob'],
            ['name', 'lucy'],//自动覆盖重复键值
            ['age', 18],
            [obj, 'good'],
            [obj1, 'bad'],
            [[1, 2], 'hhh']
        ]);

        console.log(map.delete('name'));//true
        console.log(map.delete('xxx'));//false
        console.log(map);//Map(4) {"age" => 18, {…} => "good", {…} => "bad", Array(2) => "hhh"}
    }

3.has

   {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        console.log(map.has('name'));//true
        console.log(map.has('xxx'));//false
    }

4.clear

 {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        console.log(map.clear());//undefined
        console.log(map);//Map(0) {}
    }

5.keys values entries

  {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        
        console.log(map.keys());//MapIterator {"name", "age"}
        console.log(map.values());//MapIterator {"bob", 18}
        console.log(map.entries());//MapIterator {"name" => "bob", "age" => 18}
    }

遍历

  {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        
        map.forEach(function(value,index){
            console.log(index);//name; age
            console.log(value);//bob; 18
        })
    }

注意事项

  {
        const map = new Map([
            ['name', 'bob'],
            ['age', 18],
        ]);
        map.set({},'hhhh');
        map.set({},'aaaa');
        //会创建两个空对象
        console.log(map);//Map(4) {"name" => "bob", "age" => 18, {…} => "hhhh", {…} => "aaaa"}
        console.log({}==={});//false
    }

与其他数据结构的互相转换

  • Map 转数组
  {
    const myMap = new Map().set(true, 7).set({ foo: 3 }, ['abc'])
    console.log([...myMap])// (2) [Array(2), Array(2)]
  }
  • 数组转 Map
  {
    const myMap = new Map([
      [true, 7],
      [{ foo: 3 }, ['abc']]
    ])
    console.log(myMap)// Map(2) {true => 7, {…} => Array(1)}
  }
  • Map 转对象
  {
    function strMapToObj (strMap) {
      let obj = Object.create(null)
      for (let [k, v] of strMap) {
        obj[k] = v
      }
      return obj
    }

    const myMap = new Map().set('yes', true).set('no', false)
    console.log(strMapToObj(myMap))// {yes: true, no: false}
  }
  • 对象转 Map
  {
    function objToStrMap (obj) {
      let strMap = new Map()
      for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k])
      }
      return strMap
    }

    console.log(objToStrMap({ yes: true, no: false }))// Map(2) {"yes" => true, "no" => false}
  }

WeakMap

  • 只接受对象作为键名,不接受其他类型值作为键名
  • 弱引用,键名所指对象不计入垃圾回收机制,防止内存泄漏
  • 无法遍历,也无 size 属性,并且无法清空(即不支持 clear 方法)
const wm = new WeakMap()
const dom = document.getElementById('id')

wm.set(dom, 'some information')
wm.get(dom)

你可能感兴趣的:(javascript,ES6)