Map vs Object

What’s the difference between Map and Object?

对于这个问题,前段时间我就查过相关的信息,今日做一下总结(翻译)。参考链接在全文最下方。

ES6加入了被大众翘首期盼的Map数据结构类型,存储类型是<key, value>键值对,和JS中原生object中间键值对很像但是又不相同。

  1. Map中的key可以是任意类型。而object中的key只能是string或者Symbol,或者先转换为string,再作为key。

    1
    2
    3
    4
    5
    6
    console.log({100: "abc"}) // 100: "abc"
    console.log({1e2: "abc"}) // 100: "abc"

    for (key in {100: "abc"}){
    console.log(typeof key) // string
    }
  2. Map实现了iterable接口,便于快速查找和遍历。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const myMap = new Map();
    myMap.set('0', 'foo');
    myMap.set(1, 'bar');
    myMap.set({}, 'baz');

    const mapIter = myMap[Symbol.iterator]();

    console.log(mapIter.next().value); // ["0", "foo"]
    console.log(mapIter.next().value); // [1, "bar"]
    console.log(mapIter.next().value); // [Object, "baz"]

    // the same result as top codes.
    for (const entry of myMap) {
    console.log(entry);
    }
  3. Map中元素的顺序和插入顺序有关,object一般按照字母顺序。

  4. Map继承自Object

  5. 使用size属性,可以快速获取Map的大小,而对于object需要手动维护。

  6. 更多对比详见第一个参考链接,绝对好文,强烈推荐👍👍

When to use Map? And when to use Object?

  1. object适用于简单存储数据。

  2. object和JSON无缝配合。

  3. object里面可以写方法。

  4. 如果需要频繁的增加或者移除键值对,Map是首选。

  5. 如果数据量大,建议使用Map

Bonus

  1. 怎么样判断一个类型是否实现了iterable接口?

    1
    2
    3
    //typeof <obj>[Symbol.iterator] === “function”
    console.log(typeof obj[Symbol.iterator]); //undefined
    console.log(typeof map[Symbol.iterator]); //function
  2. Symbol虽然可以作为objectkey,但是此键值对不会出现在for...in等循环中,只能通过Object.getOwnPropertySymbols()来获取。

Reference