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。
广告
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP