ชุดจาวาสคริปต์

สารบัญ

    แสดงสารบัญ

ชุด JavaScript คือชุดของค่าที่ไม่ซ้ำใคร

แต่ละค่าสามารถเกิดขึ้นได้เพียงครั้งเดียวในชุดเท่านั้น

ชุดสามารถเก็บค่าของข้อมูลชนิดใดก็ได้

ตั้งค่าวิธีการ

new Set()

สร้างชุดใหม่

add()

เพิ่มองค์ประกอบใหม่ให้กับชุด

delete()

ลบองค์ประกอบออกจากชุด

has()

ส่งคืนค่าจริงหากมีค่าอยู่

clear()

ลบองค์ประกอบทั้งหมดออกจากชุด

forEach()

เรียกการเรียกกลับสำหรับแต่ละองค์ประกอบ

values()

ส่งกลับ Iterator ที่มีค่าทั้งหมดในชุด

keys()

เช่นเดียวกับค่า()

entries()

ส่งกลับตัววนซ้ำด้วยคู่ [value,value] จากชุด

size

ส่งกลับองค์ประกอบตัวเลขในชุด

วิธีการสร้างชุด

คุณสามารถสร้างชุด JavaScript โดย:

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

  • สร้างชุดใหม่และใช้ add() เพื่อเพิ่มค่า

  • สร้างชุดใหม่และใช้ add() เพื่อเพิ่มตัวแปร

วิธีการใหม่ Set()

ส่งผ่านอาร์เรย์ไปยังตัวสร้าง new Set():

ตัวอย่าง

// Create a Set
const letters = new Set(["a","b","c"]);

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>

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

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

สร้างชุดและเพิ่มค่าตามตัวอักษร:

ตัวอย่าง

// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

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

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

สร้างชุดและเพิ่มตัวแปร:

ตัวอย่าง

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Create a Set
const letters = new Set();

// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>

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

<script>
// Create a Set
const letters = new Set();

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

วิธีการ add()

ตัวอย่าง

letters.add("d");
letters.add("e");

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>

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

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Add a new Element
letters.add("d");
letters.add("e");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

หากคุณเพิ่มองค์ประกอบที่เท่ากัน ระบบจะบันทึกเฉพาะองค์ประกอบแรกเท่านั้น:

ตัวอย่าง

letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>

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

<script>
// Create a Set
const letters = new Set();

// Add values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

วิธีการ forEach()

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

ตัวอย่าง

// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
let text = "";
letters.forEach (function(value) {
  text += value;
})

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>

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

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
letters.forEach (function(value) {
  text += value + "<br>";
})

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

</body>
</html>

values() วิธีการ

values() วิธีการส่งกลับวัตถุ Iterator ที่มีค่าทั้งหมดในชุด:

ตัวอย่าง

letters.values()   // Returns [object Set Iterator]

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>

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

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.values();
</script>

</body>
</html>

ตอนนี้คุณสามารถใช้วัตถุ Iterator เพื่อเข้าถึงองค์ประกอบ:

ตัวอย่าง

// Create an Iterator
const myIterator = letters.values();

// List all Values
let text = "";
for (const entry of myIterator) {
  text += entry;
}

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>

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

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
for (const x of letters.values()) {
  text += x + "<br>";
}

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

วิธีการ keys()

ชุดไม่มีกุญแจ

keys() ส่งคืนค่าเดียวกันกับ <รหัส class="w3-codespan">ค่า().

ทำให้ชุดเข้ากันได้กับแผนที่

ตัวอย่าง

letters.keys()   // Returns [object Set Iterator]

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() returns a Set Iterator:</p>

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

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.keys();
</script>

</body>
</html>

entries() วิธีการ

ชุดไม่มีกุญแจ

entries() ส่งกลับค่าคู่ [value,value] แทนที่จะเป็นคู่ [key,value]

สิ่งนี้ทำให้ชุดเข้ากันได้กับแผนที่:

ตัวอย่าง

// Create an Iterator
const myIterator = letters.entries();

// List all Entries
let text = "";
for (const entry of myIterator) {
  text += entry;
}

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>

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

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
const iterator = letters.entries();
let text = "";
for (const entry of iterator) {
  text += entry + "<br>";
}

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

</body>
</html>

เซตคือออบเจ็กต์

สำหรับชุด typeof ส่งคืนอ็อบเจ็กต์:

typeof letters;      // Returns object

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The typeof operator returns object:</p>

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

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

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

</body>
</html>

สำหรับชุด instanceof Set คืนค่าจริง:

letters instanceof Set;  // Returns true

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instanceof operator returns true:</p>

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

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>

</body>
</html>