在 JavaScript 中建立關聯陣列
大多數程式語言都有一種資料結構,允許你以鍵值格式儲存資料。例如,Python 有允許你將字串與值或值列表相關聯的字典。
JavaScript 具有實現相同功能的 Map
物件,還請記住,此功能與舊瀏覽器不相容。從歷史上看,簡單物件已被用於在 JavaScript 中建立關聯陣列,因為它們在技術上做同樣的事情。
另一方面,為了這個目的使用泛型物件有時會讓人很困惑。甚至 Map
方法也有其問題,特別是如果你不熟悉該語言並習慣於某些約定。
在 JavaScript 中使用 Map
物件建立一個關聯陣列
在 JavaScript 中處理關聯陣列的第一個也是最正確的方法是建立一個 Map
物件。與常規物件相比,這種方法有幾個優點,例如鍵不限於字串——它們可以是函式、其他物件以及幾乎任何其他原語。
此外,Map
物件從一開始也是可迭代的。當然,你可以使用 for in
迴圈遍歷物件的屬性,但這並不總是一個優雅的解決方案。
因此,以下是在 JavaScript 中建立和填充關聯陣列的方法:
const myMap = new Map();
myMap.set("firstItem", 1);
myMap.set("secondItem", 2);
myMap.set("thirdItem", "third");
console.log([...myMap]);
輸出:
[["firstItem", 1], ["secondItem", 2], ["thirdItem", "third"]]
要建立鍵/值條目,你可以使用 set()
方法。附帶說明一下,上面程式碼中使用的 [...myMap]
語法是有效的,因為 Map
在後臺實現了@@iterator
方法。這就是它與常規物件的不同之處,因為你必須建立一個顯式的 for in
迴圈。
如果你想檢索特定值,可以使用 get()
方法:
const myMap = new Map();
myMap.set("firstItem", 1);
myMap.set("secondItem", 2);
myMap.set("thirdItem", "third");
console.log(myMap.get("firstItem"));
輸出:
1
其他有用的方法包括 has()
,它檢查你的 Map
物件是否具有特定鍵,以及 delete()
,它允許你從物件中刪除鍵。
在 JavaScript 中處理 Map
物件時避免使用括號表示法
我們都知道 JavaScript 充滿了奇怪的行為,不幸的是,Map
物件也不例外。
如果你有一些 Python 的背景,你可能會想使用類似 myMap["firstItem"] = 1
來設定 Map
鍵/值對。在處理泛型物件時,這也是一種有效的方法。
好訊息是這不會導致任何錯誤,而且一開始它似乎會按預期工作。這是使用括號符號重構的上述示例:
const myMap = new Map();
myMap["firstItem"] = 1;
myMap["secondItem"] = 2;
myMap["thirdItem"] = "third";
console.log(myMap);
輸出:
[object Map] {
firstItem: 1,
secondItem: 2,
thirdItem: "third"
}
壞訊息是這不再是同一型別的資料結構。相反,這已被轉換為通用物件。因此,如果你遍歷 Map,它將不再起作用。
此外,has()
方法也不會返回所需的結果,如下面的程式碼所示:
const myMap = new Map();
myMap["firstItem"] = 1;
myMap["secondItem"] = 2;
myMap["thirdItem"] = "third";
console.log(myMap.has("firstItem"));
輸出:
false
總之,在處理 Map
時應避免使用方括號表示法;否則,你的程式碼可能無法按預期工作。
在 JavaScript 中使用泛型物件建立關聯陣列
直到幾年前,上面描述的 Map
方法還不能與大多數瀏覽器相容,因此程式設計師使用泛型物件來代替。從理論上講,這種方法沒有任何問題,但如果向後相容性不是問題,在大多數情況下你應該嘗試使用 Map
。
以下是在 JavaScript 中使用物件建立關聯陣列的方法:
const myMap = {};
myMap.firstItem = 1;
myMap.secondItem = 2;
myMap.thirdItem = "third";
console.log(myMap);
輸出:
{ firstItem: 1, secondItem: 2, thirdItem: "third"}
在這裡,我們使用點符號向我們的物件新增屬性。如果你喜歡使用字串作為鍵,如果你的字串包含空格,此方法將無法按預期工作。
對於這些情況,你可以使用如下詳述的括號方法:
const myMap = {};
myMap["first item"] = 1;
myMap["second item"] = 2;
myMap["third item"] = "third";
console.log(myMap);
輸出:
{ first item: 1, second item: 2, third item: "third"}
JavaScript 接受這兩種方法在某些情況下可能會再次變得非常混亂。如果你真的想在關聯陣列中使用字串作為鍵,那麼括號表示法是可行的方法,因為點表示法具有高度限制性。
另一方面,方括號表示法使 JavaScript 物件看起來更像經典字典,而事實並非如此。因此,只要有機會,使用 Map
方法總是一個更好的主意。