แผนที่จาวาสคริปต์

สารบัญ

    แสดงสารบัญ

แผนที่เก็บคู่คีย์-ค่าโดยที่คีย์สามารถเป็นประเภทข้อมูลใดก็ได้

แผนที่จะจดจำลำดับการแทรกคีย์ดั้งเดิม

วิธีการทำแผนที่ที่จำเป็น

new Map()

สร้างแผนที่ใหม่

set()

ตั้งค่าสำหรับคีย์ในแผนที่

get()

รับค่าสำหรับคีย์ในแผนที่

delete()

ลบองค์ประกอบแผนที่ที่ระบุโดยคีย์

has()

คืนค่าเป็นจริงหากมีรหัสอยู่ในแผนที่

forEach()

เรียกใช้ฟังก์ชันสำหรับคู่คีย์/ค่าแต่ละคู่ในแผนที่

entries()

ส่งคืนตัววนซ้ำด้วยคู่ [key, value] ในแผนที่

size

ส่งกลับจำนวนองค์ประกอบในแผนที่

วิธีการสร้างแผนที่

คุณสามารถสร้างแผนที่ JavaScript ได้โดย:

  • การส่งผ่านอาร์เรย์ไปยัง new Map()

  • สร้างแผนที่และใช้ Map.set()

วิธีการ แผนที่ใหม่()

คุณสามารถสร้างแผนที่ได้โดยส่งอาร์เรย์ไปยังตัวสร้าง ใหม่ Map():

ตัวอย่าง

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

set() วิธีการ

คุณสามารถเพิ่มองค์ประกอบลงในแผนที่ได้ด้วย set() วิธีการ:

ตัวอย่าง

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

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

ตัวอย่าง

fruits.set("apples", 200);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

วิธีการ get()

get() วิธีการรับค่าของคีย์ในแผนที่:

ตัวอย่าง

fruits.get("apples");    // Returns 500

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

คุณสมบัติ size

size คุณสมบัติส่งกลับจำนวนขององค์ประกอบในแผนที่:

ตัวอย่าง

fruits.size;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

วิธีการ ลบ()

delete() วิธีการลบองค์ประกอบแผนที่:

ตัวอย่าง

fruits.delete("apples");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

has() วิธีการ

has() วิธีการคืนค่าจริงหากมีคีย์อยู่ในแผนที่:

ตัวอย่าง

fruits.has("apples");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

ลองสิ่งนี้:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

วัตถุ JavaScript กับแผนที่

ความแตกต่างระหว่างวัตถุ JavaScript และแผนที่:

วัตถุ

ทำซ้ำได้: ไม่สามารถทำซ้ำได้โดยตรง

ขนาด: ไม่มีคุณสมบัติขนาด

ประเภทคีย์: คีย์ต้องเป็นสตริง (หรือสัญลักษณ์)

ลำดับคีย์: คีย์เรียงลำดับไม่ดี

ค่าเริ่มต้น: มีคีย์เริ่มต้น

แผนที่

ทำซ้ำได้: ทำซ้ำได้โดยตรง

ขนาด: มีคุณสมบัติขนาด

ประเภทคีย์: คีย์สามารถเป็นประเภทข้อมูลใดก็ได้

ลำดับคีย์: คีย์เรียงลำดับโดยการแทรก

ค่าเริ่มต้น: ไม่มีคีย์เริ่มต้น

วิธีการ forEach()

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

ตัวอย่าง

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

entries() วิธีการ

entries() วิธีการส่งกลับวัตถุตัววนซ้ำด้วย [คีย์ค่า] ในแผนที่:

ตัวอย่าง

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

รองรับเบราว์เซอร์

JavaScript Maps ได้รับการสนับสนุนในทุกเบราว์เซอร์ ยกเว้น Internet Explorer:

Chrome Edge Firefox Safari Opera