วิธีการ Map ใน JavaScript

new Map() วิธี

สามารถโอนรหัสลิสต์ให้กับ new Map() ตัวแทนสร้างเพื่อสร้าง Map:

ตัวอย่าง

// สร้างตัวแปรแบบ Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Try it yourself

Map.get()

สามารถใช้ get() วิธีนี้ดึงค่าของเคยส์ใน Map:

ตัวอย่าง

fruits.get("apples");

Try it yourself

Map.set()

สามารถใช้ set() วิธีนี้เพิ่มชิ้นใน Map:

ตัวอย่าง

// สร้างตัวแปรแบบ Map
const fruits = new Map();
// ตั้งค่าค่า Map
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Try it yourself

set() วิธีนี้ยังสามารถใช้เพื่อเปลี่ยนค่าที่มีอยู่ใน Map:

ตัวอย่าง

fruits.set("apples", 500);

Try it yourself

Map.size

size เป็นคุณสมบัติที่กลับค่าเป็นจำนวนของชิ้นใน Map:

ตัวอย่าง

fruits.size;

Try it yourself

Map.delete()

delete() วิธีนี้ถอดออกชิ้นหนึ่งใน Map:

ตัวอย่าง

fruits.delete("apples");

Try it yourself

Map.clear()

clear() วิธีนี้ถอดออกทุกชิ้นทั้งหมดใน Map:

ตัวอย่าง

fruits.clear();

Try it yourself

Map.has()

หากมีเคยส์ใน Map:has() วิธีนี้กลับค่าเป็น true:

ตัวอย่าง

fruits.has("apples");

Try it yourself

พยายามรหัสใต้นี้:

fruits.delete("apples");
fruits.has("apples");

Try it yourself

Map.forEach()

forEach() วิธีนี้เรียกครับครับฟังก์ชันคลิกแบ็คสำหรับทุกคู่หลักค่าใน Map:

ตัวอย่าง

// ระบุทั้งหมดบทความ
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Try it yourself

Map.entries()

entries() วิธีนี้กลับค่าเป็นองค์ประกอบตัวอย่างของทั้งหมด [key, value] ตัวแทนอินเทอร์เนเตอร์เกี่ยวกับทั้งหมดบทความ:

ตัวอย่าง

// ระบุทั้งหมดบทความ
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Try it yourself

Map.keys()

keys() วิธีนี้กลับค่าเป็นองค์ประกอบตัวอย่างของตัวแทนอินเทอร์เนเตอร์เนอร์เกี่ยวกับทั้งหมดเคยส์ใน Map:

ตัวอย่าง

// ระบุทั้งหมดเคยส์
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Try it yourself

Map.values()

values() วิธีนี้กลับค่าเป็นองค์ประกอบเดินเดินทางที่ประกอบด้วยค่าใน Map:

ตัวอย่าง

// แสดงค่าทั้งหมด
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Try it yourself

สามารถใช้ values() วิธีนี้หารือค่าทั้งหมดใน Map:

ตัวอย่าง

// หารือค่าทั้งหมด
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Try it yourself

วัตถุที่ใช้ในกุญแจ

คำแนะนำ：ความสามารถใช้วัตถุเป็นกุญแจคือคุณสมบัติสำคัญของ Map

ตัวอย่าง

// สร้างวัตถุ
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// สร้างตัวแปรแบบ Map
const fruits = new Map();
// เพิ่มองค์ประกอบใหม่สู่ Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Try it yourself

สัญญาณเตือน：ตัวชื่อเคย์คือวัตถุ (apples) ไม่ใช่ตัวอักษร ("apples"):

ตัวอย่าง

fruits.get("apples"); // กลับค่า undefined

Try it yourself

JavaScript Map.groupBy()

ES2024 ได้เพิ่ม Map.groupBy() วิธี

Map.groupBy() วิธีนี้จัดแบ่งวัตถุตามค่าที่ฟังก์ชันคอบแบ่งกลับมา

Map.groupBy() วิธีนี้จะไม่เปลี่ยนแปลงวัตถุเดิม

ตัวอย่าง

// สร้างตัวแปรแบบบวก
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// ฟังก์ชันคอบแบ่งสำหรับการจัดแบ่งกลุ่ม
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// จัดแบ่งกลุ่มตามจำนวน
const ผลลัพธ์ = Map.groupBy(fruits, myCallback);

Try it yourself

Browser Support

Map.groupBy() Is an ES2024 feature.

Starting from March 2024, all new browsers support this feature:

The difference between Object.groupBy() and Map.groupBy()

Object.groupBy() And Map.groupBy() The difference is:

Object.groupBy() Group elements into a JavaScript object.

Map.groupBy() Group elements into a Map object.

Complete Map Reference Manual

For a complete reference, please visit our:JavaScript Map ָ.

This manual includes descriptions and examples of all Map properties and methods.