如何在 JavaScript 中使用关联数组/哈希?

javascriptweb developmentfront end technology

我们使用 ObjectMap 类来模拟 JavaScript 中关联数组/哈希的行为。JavaScript 不提供内置关联数组。我们得到的最接近的类似行为来自 JavaScript 中的 Map 类。

让我们一一看看它们。

JavaScript 中的 Object 类

Object 类允许我们创建具有名称-值对的对象。这类似于散列,因为对象知道哪个属性与哪个值相关联。

语法

const obj = {
    name : "Abhishek",
    age : 22
}
var name = obj.name

这将创建一个对象 obj,其中包含两个键值对:name 和 age。可以使用点运算符 (.) 访问这些属性,如下一行所示。点运算符前面是对象名称,后面是属性名称。

但是,与其他编程语言提供的传统关联数组相比,Object 类有许多限制。JavaScript 不会跟踪对象的大小,因此必须由程序员维护。对于一些属性来说,这很好,但随着复杂性的增加,跟踪事物变得越来越困难。

以下是显示对象作为关联数组使用的示例。

示例 1

在这里我们将创建一个对象,然后使用键来检索这些属性。让我们看看相同的代码。

<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> </head> <body> <h3>associative array/hashing in JavaScript <br></h3> <p> <div id="result"> </div> </p> <script> const obj = { name: "Abhishek", age: 22 } var text = ""; text += "name : " + obj.name + "<br>"; text += "age : " + obj.age; document.getElementById("result").innerHTML = text; </script> </body> </html>

在上面的代码中,对象的属性的访问方式与关联数组类似。

我们创建的对象从 Object 类继承属性。但是,Object 类并不限制程序员尝试重新定义或修改这些属性。这与传统关联数组的工作方式相反,其中键对于整个数据结构是唯一的。

例如,我们为所有对象原型内置了 toString() 函数。即,如果我们尝试

objectName.toString()

这将返回"[object Object]"作为输出。但是,我们可以在对象定义中重写它,以使该函数返回其他内容。

下面是操作方法的示例。

示例 2

在这里,我们将创建一个对象并重写 toString() 方法,以返回与内置响应不同的字符串。

让我们看看相同的代码。

<!DOCTYPE html> <html> <body> <h3>associative array/hashing in JavaScript <br></h3> <p> <div id="result"> </div> </p> <script> const obj = { name: "Abhishek", age: 22, toString: function() { return "Hello !"; } } var text = ""; text += "name : " + obj.name + "<br>"; text += "age : " + obj.age + "<br>"; text += "toString : " + obj.toString() + "<br>"; document.getElementById("result").innerHTML = text; </script> </body> </html>

在上面的代码中,toString() 函数返回"Hello !"作为输出,而不是"[object Object]",后者应该是常规响应。

现在让我们看看 JavaScript 中的 Map 类,它如何模拟关联数组的行为。

JavaScript 中的 Map 类

与 Object 类类似,Map 类允许我们创建键值对。我们使用 Map 类的 set() 和 get() 方法来操作属性。

语法

var mp = new Map();
mp.set("name", "Abhishek")
mp.get("name")

这将创建一个 Map 对象,并将其上名为"name"的属性设置为"Abhishek"。借助 get() 函数,可以使用键检索相同的属性。

与 Object 类不同,Map 有一个大小计数器,可用于检索属性。它也不允许重写 Map 类继承的属性和方法。

让我们看一个例子来了解这个用例。

示例 3

我们将创建一个地图对象并执行设置和从地图获取值的基本操作。

<!DOCTYPE html> <html> <body> <h3>associative array/hashing in JavaScript <br></h3> <p> <div id="result"> </div> </p> <script> var coll = new Map(); coll.set("name", "Abhishek"); coll.set("age", 22); var text = ""; text += "Number of Key-value pairs: " + coll.size + "<br>"; text += "name : " + coll.get("name") + "<br>"; text += "age : " + coll.get("age") + "<br>"; document.getElementById("result").innerHTML = text; </script> </body> </html>

在上面的代码中,创建了一个新映射,并向其中添加了两个键值对,然后使用 get(key_name) 函数检索这两个键值对。

结论

映射是 JavaScript 中关联数组的一个很好的替代方案。它们提供了传统关联数组的几乎所有功能。


相关文章