如何在 JavaScript 中使用关联数组/哈希?
我们使用 Object 和 Map 类来模拟 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 中关联数组的一个很好的替代方案。它们提供了传统关联数组的几乎所有功能。