Map对象

作者: 颖小李 | 来源:发表于2020-07-15 15:55 被阅读0次

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
    ————————————————
    1.Map对象在遍历时的顺序是确定的,由插入顺序决定。用 for ... of 遍历,不能通过 for in 遍历。
    2.可以通过size属性,获取键值对的个数,而不是length。
    3.Map的基础用法

    let myMap = new Map();
    myMap.set('a',1)
    myMap.set('b',2)
    myMap.get('a')
    for (let [key, value] of myMap) {
      console.log(key + " = " + value);
    }
    for (let key of myMap.keys()) {
      console.log(key);
    }
    for (let value of myMap.values()) {
      console.log(value);
    }
    for (let [key, value] of myMap.entries()) { // 只能通过数组来解构
      console.log(key + " = " + value);
    }
    myMap.forEach(function(value, key) { // value 在前,key 在后
      console.log(key + " = " + value);
    })
    myMap.delete('a')
    

    4.Map与数组
    (1)直接用二维数组生成Map对象
    内部数组里只取前两个值,多的直接丢弃,一个值时value值为undefined,空数组 key\value 均为undefined

    (2)可以用Array.from 将Map对象转成二维数组,或者直接用展开运算符 ... 。
    (3)Map 的复制和合并

    let first = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    let second = new Map([
      [1, 'uno'],
      [2, 'dos']
    ]);
    let merged = new Map([...first, ...second]); //如果有重复的键值,则后面的会覆盖前面的
    
    let original = new Map([
      [1, 'one']
    ]);
    let clone = new Map(original); //直接用Map对象做参数
    

    5.可以在Map上设置对象的属性,但是有些操作会引起混乱,最好别混用

    let wrongMap = new Map()
    wrongMap['bla'] = 'blaa'
    wrongMap['bla2'] = 'blaaa2'
    console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }
    
    wrongMap.has('bla')    // false
    wrongMap.delete('bla') // false
    console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }
    

    6.Map 和Object的比较

    Map Object
    意外的键 只有显式插入的键 有原型,原型上可能有冲突的
    键的类型 任意值,函数、对象、数字等等 只能是String和Symbol
    键的顺序 有序,以插入顺序为准 无序,每次遍历顺序可能都不同
    size size属性 只能手动计算键值对个数
    迭代 是iterable的,可直接迭代 以某种方式获取键后才能迭代??
    性能 在频繁增删键值对的场景下表现更好。 在频繁添加和删除键值对的场景下未作出优化。

    相关文章

      网友评论

          本文标题:Map对象

          本文链接:https://www.haomeiwen.com/subject/lhwfhktx.html