Map对象和普通对象的7个区别

最新推荐文章于 2024-05-28 16:39:12 发布

Iam_楠

最新推荐文章于 2024-05-28 16:39:12 发布

阅读量3.6k

点赞数 5

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_56650035/article/details/123964528

版权

JavaScript 专栏收录该内容

7 篇文章 5 订阅

订阅专栏

前言：

普通对象和 ES6 的新对象 Map 都可以存储键值对，但是，它们之间有什么区别？今天来聊一聊！

1、初始化与使用

普通对象可以直接使用字面量进行初始化，而 Map 需要 Map() 构造函数进行初始化，如果想要有初始值，则需要传递一个数组或其他元素为键值对的可迭代对象。这些键值对中的每一个都将被添加到一个新的 Map 中。

    const obj = {
      name: 1,
      age: 18
    }
    // console.log('obj', obj); // obj {name: 1, age: 18}


    const map = new Map([
      ['name', 1],
      ['age', 11]
    ])
    map.set('address', 'ShenZhen'); //为 Map 对象中的键设置值。
    console.log(map.get('age')); // 获取 Map 对象中键的值。
    console.log(map.entries()); // 返回 Map 对象中键/值对的数组。
    console.log(map.keys()); // 返回 Map 对象中键的数组。
    console.log(map.values()); // 返回 Map 对象中值的数组。

    console.log('map', map); // map Map(3) {'name' => 1, 'age' => 11, 'address' => 'ShenZhen'}

与普通对象相比，Map 作为哈希表提供了许多有用的功能。比如判断一个 key 是否在 hash 表中，在 map 中可以使用 hash 方法轻松判断，但是在普通对象中可能会增加复杂度。

另外，set 方法可以为 Map 设置 key 值，get 方法可以获取 value ，size 属性可以返回当前 Map 中 key/value 对的数量，而 plain 对象需要手动计算使用自己的方法等。。。

其他 Map() 方法

方法	描述
clear()	删除 Map 中的所有元素。
delete()	删除由键指定的元素。
has()	如果键存在，则返回 true。
forEach()	为每个键/值对调用回调。

2、密钥类型

普通对象只接受字符串和符号作为键值，其他类型将被强制转换为字符串类型，而 Map 可以接受任何类型的键值（包括函数、对象或任何原语）

    const obj = {};
    const map = new Map();
    const key = function () { };
    obj[key] = 1;
    map.set(key, 1);

    console.log('obj', obj); // obj {function key() {}: 1} --> function key() {}: 1
    console.log('map', map); // map Map(1) {ƒ => 1} --> {function key() {} => 1}

3、Accidental Key

普通对象从原型继承了许多属性键，例如构造函数等。因此，自己的密钥很可能与原型上的密钥发生冲突。但 Map 默认不包含任何键，它只包含那些显式放入的。

    const obj = {};
    const map = new Map();

    console.log('obj', obj.constructor); // obj ƒ Object() { [native code] }
    console.log('map', map.get('constructor')); // map undefined

4、key order

虽然现在普通对象的键进行了排序，但情况并非总是如此，而且排序很复杂。例如，如果对象中有键需要转换为字符串，则不保留对象键的原始顺序，虽然 Map 以简单的方式排序，但他始终与我们插入的顺序相同

    const obj = {
      name: 1,
      age: 11,
      3: 111
    };
    const map = new Map([
      ['name', 1],
      ['age', 11],
      [3, 111]
    ]);

    console.log('obj', obj); // obj {3: 111, name: 1, age: 11}
    console.log('map', map); // Map(3) {'name' => 1, 'age' => 11, 3 => 111}

5、迭代

我们可以使用 for...of 语句或 Map.prototype.forEach 直接迭代 Map 的属性，而普通对象不能直接迭代。

    const obj = {
      name: 1,
      age: 11,
    };
    const map = new Map([
      ['name', 1],
      ['age', 11],
    ]);

    for (const [key, value] of map) {
      console.log(`${key}:`, value); // name:1,age:2
    }
    map.forEach((t, key) => {
      console.log(`${key}:`, t); // name:1,age:2
    })

    Object.keys(obj).forEach(t => {
      console.log(`${t}:`, obj[t]); // name:1,age:2
    })

6、序列化和解析

普通对象支持 JSON 序列化，但 Map 默认无法获取正确数据。

    const obj = {
      name: 1,
      age: 11,
    };
    const map = new Map([
      ['name', 1],
      ['age', 11],
    ]);

    console.log('obj', JSON.parse(JSON.stringify(obj))); // obj {name: 1, age: 11}
    console.log('map', JSON.parse(JSON.stringify(map))); // map {}