JavaScript Map 和 Object 的区别

╰+哭是因爲堅強的太久メ 2023-08-17 17:37 82阅读 0赞

**不同点**

**Key filed**

在 Object 中， key 必须是简单数据类型（整数，字符串或者是 symbol），而在 Map 中则可以是 JavaScript 支持的所有数据类型，也就是说可以用一个 Object 来当做一个Map元素的 key。

**元素顺序**

Map 元素的顺序遵循插入的顺序，而 Object 的则没有这一特性。

**继承**

Map 继承自 Object 对象。

**新建实例**

Object 支持以下几种方法来创建新的实例：

var obj = {...};
    
    var obj = new Object();
    
    var obj = Object.create(null);

Map 仅支持下面这一种构建方法：

var map = new Map([1, 2], [2, 3]); // map = {1 => 2, 2 => 3}

**数据访问**

Map 想要访问元素，可以使用 Map 本身的原生方法：

map.get(1) // 2

Object 可以通过 . 和 \[ \] 来访问

obj.id;
    
    obj['id'];

判断某个元素是否在 Map 中可以使用

map.has(1);

判断某个元素是不是在 Object 中需要以下操作：

obj.id === undefined;
    
    // 或者
    
    'id' in obj;

另外需要注意的一点是，Object 可以使用 Object.prototype.hasOwnProperty() 来判断某个key是否是这个对象本身的属性，从原型链继承的属性不包括在内。

**新增一个数据**

Map 可以使用 set() 操作：

map.set(key, value)       // 当传入的 key 已经存在的时候，Map 会覆盖之前的值

Object 新增一个属性可以使用：

obj['key'] = value;
    
    obj.key = value;
    
    // object也会覆盖

**删除数据**

在 Object 中没有原生的删除方法，我们可以使用如下方式：

delete obj.id;
    
    // 下面这种做法效率更高
    
    obj.id = undefined

需要注意的是，使用 delete 会真正的将属性从对象中删除，而使用赋值 undefined 的方式，仅仅是值变成了 undefined。属性仍然在对象上，也就意味着 在使用 for … in… 去遍历的时候，仍然会访问到该属性。

Map 有原生的 delete 方法来删除元素：

var isDeleteSucceeded = map.delete(1);
    
    console.log(isDeleteSucceeded ); // true
    
    // 全部删除
    
    map.clear();

**获取size**

Map 自身有 size 属性，可以自己维持 size 的变化。

Object 则需要借助 Object.keys() 来计算

console.log(Object.keys(obj).length);

**Iterating**

Map 自身支持迭代，Object 不支持。

如何确定一个类型是不是支持迭代呢？ 可以使用以下方法：

console.log(typeof obj[Symbol.iterator]); // undefined
    
    console.log(typeof map[Symbol.iterator]); // function

**何时使用 Map ，何时使用 Object？**

虽然Map 在很多时候优于 Object，但是作为 JavaScript 最基础的数据类型，还是有很多情景更适合使用 Object。

*  　　当所要存储的是简单数据类型，并且 key 都为字符串或者整数或者 Symbol 的时候，优先使用 Object ，因为Object可以使用 字符变量 的方式创建，更加高效。
 *  　　当需要在单独的逻辑中访问属性或者元素的时候，应该使用 Object，例如：

var obj = {
    
        id: 1, 
    
        name: "It's Me!", 
    
        print: function(){ 
    
            return `Object Id: ${
        this.id}, with Name: ${
        this.name}`;
    
        }
    
    }
    
    console.log(obj.print());//Object Id: 1, with Name: It's Me.
    
    // 以上操作不能用 Map 实现

*  　　JSON 直接支持 Object，但不支持 Map
 *  　　Map 是纯粹的 hash， 而 Object 还存在一些其他内在逻辑，所以在执行 delete 的时候会有性能问题。所以写入删除密集的情况应该使用 Map。
 *  　　Map 会按照插入顺序保持元素的顺序，而Object做不到。
 *  　　Map 在存储大量元素的时候性能表现更好，特别是在代码执行时不能确定 key 的类型的情况。

转载于:https://www.cnblogs.com/ysx215/p/11387938.html