JavaScript Map 與物件
Mehvish Ashiq
2023年10月12日
本教程是關於 JavaScript 中的 Map 和物件的，我們將在其中比較它們並學習如何使用它們。
在 JavaScript 中定義 Map
JavaScript Map 是一種以鍵值對形式儲存資料的資料結構。它會記住鍵的原始插入順序。
Map 避免了重複性，因為每一對都有一個唯一的鍵和一個對映到該特定鍵的值。鍵可以是任何值，包括原語、物件和函式。
map 是可迭代的，所以我們可以使用 for...of 迴圈遍歷元素。
在 JavaScript 中定義物件
物件也以鍵值對形式儲存資料，就像 Map 一樣。每個鍵值對在物件中被稱為屬性。
物件的鍵只能是字串型別。如果你使用數字作為物件中的鍵，它將被轉換為字串。
物件在使用 iterable protocol 之前是不可迭代的。
現在我們對 Map 和 Object 有了基本的瞭解。讓我們通過使用表格來比較它們以使概念清晰。
| S# | JavaScript Map | JavaScript 物件 |
|---|---|---|
| 1 | Map 被稱為物件的例項。 | Object 不是 Map 的一個例項。 |
| 2 | Map 保持原來的插入順序。 | 物件不保留原始插入順序。 |
| 3 | key 的型別可以是任意值，包括 String、Object、函式等。 | key 的型別只能是 String 型別。 |
| 4 | 我們可以使用以下程式碼快速獲取 Map 的大小：<br />map.size |
需要手動計算才能使用以下程式碼找到物件的大小：<br />Object.keys(obj).length |
| 5 | Map 是可迭代的，可以使用 for...of 迴圈來完成，如下所示：<br />for (const m of map){<br /> console.log(m);<br />} |
物件是不可迭代的，我們必須持有物件的鍵才能遍歷。 <br />Object.keys(obj).forEach(key => {<br /> console.log(key, obj[key]);<br />} |
| 6 | 沒有預設鍵。 | 物件可以從原型繼承鍵。 |
| 7 | 我們必須編寫一個自定義解析器來將 Map 轉換為 JSON 字串。 | 物件可以使用 JSON.stringify 轉換為 JSON 字串。 |
JavaScript 中的 Map 程式碼示例
JavaScript 程式碼：
const map = new Map(); // create map
const keyOfStringType = 'string'; // make a key of string type
const keyOfObjectType = {}; // make a key of object type
const keyOfFunctionType = function() {}; // make the function a key
// setting the values with all tpes of keys
map.set(keyOfStringType, 'String Value');
map.set(keyOfObjectType, 'Object Value');
map.set(keyOfFunctionType, 'function Value');
// check if the map is an instance of object
console.log(map instanceof Object);
// map size
console.log('Map Size: ' + map.size);
// get value of key `keyofStyingType`
console.log('Value at key named keyOfStringType: ' + map.get(keyOfStringType));
// iterate over the map elements
console.log('Iterate over the Map elements');
for (const m of map) {
console.log(m);
}
輸出：
true
"Map Size: 3"
"Value at key named keyOfStringType: String Value"
"Iterate over the Map elements"
["string", "String Value"]
[{ ... }, "Object Value"]
[function() {}, "function Value"]
JavaScript 中物件的程式碼示例
可以通過下面列出的三種方式建立物件。
使用字串文字建立 JavaScript 物件：
let person = {name: 'Mehvish Ashiq', city: 'Lahore', email: 'mehvish@yahoo.com'}
通過建立物件例項來建立 JavaScript 物件：
const person = new Object(); // we used this method in this tutorial
使用物件建構函式建立 JavaScript 物件：
function person(name, city, email) {
this.name = name;
this.city = city;
this.email = email;
}
let p = new person('Mehvish Ashiq', 'Lahore', 'delfstack@example.com');
你可以在此處找到有關物件的更多資訊。現在讓我們練習一下啟動程式碼。
JavaScript 程式碼：
// create object using instance of object
const person = new Object();
// set the properties and values
person.firstname = 'Mehvish';
person.lastname = 'Ashiq';
person.age = 30;
person.showInfo =
function() {
console.log(
`${person.firstname} ${person.lastname} is ${person.age} years old`);
}
// check if an object named person is an instance of Map
console.log(person instanceof Map);
// object size
console.log('Object Size: ' + Object.keys(person).length);
// get value of key `firstname`
console.log('Value at key named firstname: ' + person.firstname);
// get all keys
console.log('Object Keys: ' + Object.keys(person));
// get all values
console.log('Object Values: ' + Object.values(person));
// iterate over the person object elements
console.log('Iterate over the person object elements');
Object.keys(person).forEach(key => {
console.log(key, person[key]);
});
輸出：
false
"Object Size: 4"
"Value at key named firstname: Mehvish"
"Object Keys: firstname,lastname,age,showInfo"
"Object Values: Mehvish,Ashiq,30,function(){
console.log(`${person.firstname} ${person.lastname} is ${person.age} years old`);
}"
"Iterate over the person object elements"
"firstname", "Mehvish"
"lastname", "Ashiq"
"age", 30
"showInfo", function(){
console.log(`${person.firstname} ${person.lastname} is ${person.age} years old`);
}
作者： Mehvish Ashiq
