Javascript Map 与 Object — 何时使用哪个?


JavaScript 的Map是一种数据结构,它帮助我们以键值对的形式存储数据。每一对由一个唯一的键和映射到该键的值组成。它有助于防止重复。

JavaScript 的Object也遵循与 Map 相同的概念,即使用键值对存储数据。但有一些细微的差别,使得 Map 在某些情况下性能更好。

让我们在本文中进一步了解Map和 Object 之间的这些差异。

Map vs Object

以下是 Map 和 Object 之间的主要区别:

实体类型

在 Object 中,键字段的数据类型限制为整数、字符串和符号。而在 Map 中,键属性可以是任何数据类型(整数、数组和对象)。

元素的值

在 Map 中,元素的原始顺序得以保留,而 Object 中则并非如此。

实例

示例

Map 是 Object 的实例,但 Object 不是 Map 的实例。在下面的示例中,我们正在检查instanceof条件。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Instanceof</title>
</head>
<body>
<p>Map is the instanceof the object: true</p>
<p>Object is the instanceof Map: false</p>
   <script>
      var map = new Map([
         [2, 3],
         [8, 9],
      ]);
      document.write(map instanceof Object, “<br>”); // true
      var obj = new Object();
      document.write(obj instanceof Map); //false
   </script>
</body>
</html>

声明

示例

在 JavaScript 中,创建 Object 有多种方法。在下面的示例中,我们尝试通过向字面量传递值来直接创建 Object 和 Map。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Instanceof</title>
</head>
<body>
   <script>
      //Creating an object by passing literals
      var obj = {1:"name of object", 2:"demo"}
      document.write(JSON.stringify(obj), "<br>");
     
      //Using constructor Object
      var obj = new Object(12575);
      document.write(JSON.stringify(obj), "<br>");
     
      //Using the create method
      function user(){
        this.name = "tutorialspoint";
      }
      function aman(){
        user.call(this);
      }
      aman.prototype = Object.create(user.prototype);
      const use = new aman();
      document.write(use.name);
   </script>
</body>
</html>

示例

而 Map 只有一种创建方式。以下是一个例子:

<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
   <script>
      var map1 = new Map(); //empty Map
      var map2 = new Map([
        [1, "Aman"],
        [2, "Akash"],
      ]);
      map2.forEach (function(value, key) {
        document.write(""+ key+":"+value,"<br>");
      })
   </script>
</body>
</html>

访问元素

Map 使用其内置的 get() 方法访问其元素。

Map.get(1);

Object 只需使用带点运算符的名称即可访问其元素。

Obj.id;
Obj[id];

检查键是否存在

Map 使用其内置函数has()来实现这一点。

map.has(1); // return true or false

Object 使用 '===' 运算符来执行。

var exist = obj.1 === undefined; //returns Boolean value.

添加新元素

Map 使用set()方法添加新元素。

Map.set(1,2);

Object 直接进行。

Obj["Demo"] = "object value";

获取大小

Map 自动更新其大小,获取方式最简单。

console.log(map.size);

在 Object 中,需要借助…手动计算大小。

Object.keys()
Console.log(object.keys(obj).length);

因此,我们可以看到 Map 具有更好的性能和更简洁的代码结构,这使其优于 Object。

更新于:2022-12-19

299 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.