JavaScript Map 與物件

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中定義 Map
  2. 在 JavaScript 中定義物件
  3. JavaScript 中的 Map 程式碼示例
  4. JavaScript 中物件的程式碼示例
JavaScript Map 與物件

本教程是關於 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 avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Object