JavaScript Maps
แผนที่มีคู่คีย์-ค่าที่คีย์สามารถเป็นประเภทข้อมูลใดก็ได้
แผนที่จะจดจำลำดับการแทรกเดิมของคีย์
แผนที่มีคุณสมบัติที่แสดงขนาดของแผนที่
วิธีการทำแผนที่
| วิธี | คำอธิบาย |
|---|---|
| แผนที่ใหม่() | สร้างวัตถุแผนที่ใหม่ |
| ชุด() | ตั้งค่าสำหรับคีย์ใน Map |
| รับ() | รับค่าสำหรับคีย์ใน Map |
| แจ่มใส() | ลบองค์ประกอบทั้งหมดออกจาก Map |
| ลบ() | ลบองค์ประกอบแผนที่ที่ระบุโดยคีย์ |
| มี() | คืนค่า true หากมีคีย์อยู่ใน Map |
| แต่ละ() | เรียกใช้การโทรกลับสำหรับคู่คีย์/ค่าแต่ละคู่ใน Map |
| รายการ() | ส่งกลับวัตถุ iterator ด้วยคู่ [คีย์, ค่า] ใน Map |
| กุญแจ () | ส่งกลับวัตถุ iterator ด้วยคีย์ใน Map |
| ค่า () | ส่งกลับวัตถุ iterator ของค่าใน Map |
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ขนาด | ส่งกลับจำนวนขององค์ประกอบแผนที่ |
วิธีสร้างแผนที่
คุณสามารถสร้าง JavaScript Map ได้โดย:
- ผ่านอาร์เรย์ไปยัง
new Map() - สร้างแผนที่และใช้งาน
Map.set()
แผนที่ใหม่()
คุณสามารถสร้างแผนที่โดยส่ง Array ไปยังnew Map()Constructor:
ตัวอย่าง
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Map.set()
คุณสามารถเพิ่มองค์ประกอบลงในแผนที่ด้วยset()วิธีการ:
ตัวอย่าง
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
วิธีset()นี้ยังสามารถใช้เพื่อเปลี่ยนค่าแผนที่ที่มีอยู่:
ตัวอย่าง
fruits.set("apples", 500);
Map.get()
วิธี การget()รับค่าของคีย์ในแผนที่:
ตัวอย่าง
fruits.get("apples"); // Returns 500
Map.size
คุณสมบัติsizeส่งคืนจำนวนองค์ประกอบในแผนที่:
ตัวอย่าง
fruits.size;
แผนที่.ลบ()
วิธี การdelete()ลบองค์ประกอบแผนที่:
ตัวอย่าง
fruits.delete("apples");
แผนที่.ล้าง()
วิธี การclear()ลบองค์ประกอบทั้งหมดออกจากแผนที่:
ตัวอย่าง
fruits.clear();
แผนที่.has()
เมธอดคืน ค่าhas()จริง หากมีคีย์อยู่ในแผนที่:
ตัวอย่าง
fruits.has("apples");
ลองสิ่งนี้:
fruits.delete("apples");
fruits.has("apples");
แผนที่เป็นวัตถุ
typeofส่งคืนวัตถุ:
ตัวอย่าง
// Returns object:
typeof fruits;
instanceofแผนที่ส่งคืนจริง:
ตัวอย่าง
// Returns true:
fruits instanceof Map;
วัตถุ JavaScript เทียบกับแผนที่
ความแตกต่างระหว่างวัตถุ JavaScript และแผนที่:
| วัตถุ | แผนที่ | |
|---|---|---|
| Iterable | ไม่สามารถทำซ้ำได้โดยตรง | ทำซ้ำได้โดยตรง |
| ขนาด | ไม่มีคุณสมบัติขนาด | มีคุณสมบัติขนาด |
| ประเภทคีย์ | คีย์ต้องเป็นสตริง (หรือสัญลักษณ์) | คีย์สามารถเป็นประเภทข้อมูลใดก็ได้ |
| คีย์ออร์เดอร์ | กุญแจไม่เป็นระเบียบ | คีย์สั่งโดยการแทรก |
| ค่าเริ่มต้น | มีคีย์เริ่มต้น | ไม่มีคีย์เริ่มต้น |
Map.forEach()
เมธอดเรียกใช้ การforEach()เรียกกลับสำหรับคู่คีย์/ค่าแต่ละคู่ในแผนที่:
ตัวอย่าง
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Map.keys()
เมธอดส่ง คืนkeys()อ็อบเจ็กต์ iterator พร้อมคีย์ใน Map:
ตัวอย่าง
// List all keys
let veggies = "";
for (const x of fruits.keys()) {
veggies += x;
}
Map.values()
เมธอดส่ง คืนvaluesอ็อบเจ็กต์ iterator พร้อมค่าใน Map:
ตัวอย่าง
// Sum all values
let total = 0;
for (const x of fruits.values()) {
total += x;
}
Map.รายการ()
entries()เมธอดส่งคืนอ็อบเจ็กต์ iterator ด้วย [key,values] ใน Map :
ตัวอย่าง
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
วัตถุเป็นคีย์
ความสามารถในการใช้วัตถุเป็นกุญแจเป็นคุณสมบัติที่สำคัญของแผนที่
ตัวอย่าง
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
ข้อควรจำ: กุญแจคือวัตถุ (แอปเปิ้ล) ไม่ใช่สตริง ("แอปเปิ้ล"):
ตัวอย่าง
fruits.get("apples"); // Returns undefined
รองรับเบราว์เซอร์
JavaScript Maps ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมด ยกเว้น Internet Explorer:
| Chrome | Edge | Firefox | Safari | Opera |