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

สารบัญ

แสดงสารบัญ

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

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

แผนที่มีคุณสมบัติที่แสดงถึงขนาดของแผนที่

วิธีการทำแผนที่

new Map(): สร้างวัตถุแผนที่ใหม่
set(): ตั้งค่าสำหรับคีย์ในแผนที่
get(): รับค่าสำหรับคีย์ในแผนที่
clear(): ลบองค์ประกอบทั้งหมดออกจากแผนที่
delete(): ลบองค์ประกอบแผนที่ที่ระบุโดยคีย์
has(): คืนค่าเป็นจริงหากมีรหัสอยู่ในแผนที่
forEach(): เรียกใช้การโทรกลับสำหรับคู่คีย์/ค่าแต่ละคู่ในแผนที่
entries(): ส่งกลับวัตถุตัววนซ้ำด้วยคู่ [key, value] ในแผนที่
keys(): ส่งกลับวัตถุตัววนซ้ำด้วยคีย์ในแผนที่
values(): ส่งกลับวัตถุตัววนซ้ำของค่าในแผนที่

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>

`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);

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

<!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", 500);

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

<!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>

`Map.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 คุณสมบัติส่งกลับจำนวนขององค์ประกอบในแผนที่:

ตัวอย่าง

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>

`Map.delete()`

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>

`Map.clear()`

clear() วิธีการลบองค์ประกอบทั้งหมดออกจากแผนที่:

ตัวอย่าง

fruits.clear();

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Clearing a Map:</p>

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

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

// Clear the Map
fruits.clear();

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

</body>
</html>

`Map.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>

แผนที่คือวัตถุ

typeof ส่งคืนวัตถุ:

ตัวอย่าง

// Returns object:
typeof fruits;

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map typeof:</p>

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

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

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

</body>
</html>

instanceof แผนที่คืนค่าจริง:

ตัวอย่าง

// Returns true:
fruits instanceof Map;

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>

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

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

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

</body>
</html>

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

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

Not directly iterable: ทำซ้ำได้โดยตรง
Do not have a size property: มีคุณสมบัติขนาด
Keys must be Strings (or Symbols): คีย์สามารถเป็นประเภทข้อมูลใดก็ได้
Keys are not well ordered: คีย์จะถูกเรียงลำดับโดยการแทรก
Have default keys: ไม่มีคีย์เริ่มต้น

`Map.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>

`Map.entries()`

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

ตัวอย่าง

// 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>

`Map.keys()`

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

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</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.keys()) {
  text += x + "<br>";
}

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

</body>
</html>

`Map.values()`

values() วิธีการส่งกลับวัตถุตัววนซ้ำที่มีค่าในแผนที่:

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</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.values()) {
  text += x + "<br>";
}

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

</body>
</html>

คุณสามารถใช้ values() วิธีการเพื่อรวมค่าในแผนที่:

ตัวอย่าง

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

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

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

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

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

let total = 0;
for (const x of fruits.values()) {
  total += x;
}

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

</body>
</html>

วัตถุเป็นกุญแจ

ความสามารถในการใช้วัตถุเป็นกุญแจถือเป็นคุณลักษณะแผนที่ที่สำคัญ

ตัวอย่าง

// 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);

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Being able to use objects as keys is an important Map feature:</p>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

ข้อควรจำ: คีย์คือวัตถุ (แอปเปิ้ล) ไม่ใช่สตริง ("แอปเปิ้ล"):

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

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

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


Chrome	Edge	Firefox	Safari	Opera