เมธอด Array.of() ใน JavaScript: สร้างอาร์เรย์จากค่าพารามิเตอร์

เมธอด Array.of() ใช้สำหรับ สร้างอินสแตนซ์อาร์เรย์ใหม่ จากค่าที่ส่งเข้ามาเป็นพารามิเตอร์ โดยไม่คำนึงถึงจำนวนหรือชนิดของพารามิเตอร์

ไวยากรณ์ (Syntax)

Array.of(element0[, element1[, ...[, elementN]]])

จุดแตกต่างจาก Array Constructor

// Array constructor: พฤติกรรมพิเศษเมื่อมีอาร์กิวเมนต์เดียวที่เป็นตัวเลข
Array(3);       // [empty × 3] - สร้างอาร์เรย์ว่างขนาด 3!
Array(3, 4);    // [3, 4] - แต่ถ้ามี 2 ตัวขึ้นไป จะเป็นองค์ประกอบ

// Array.of: พฤติกรรมสม่ำเสมอเสมอ
Array.of(3);       // [3] - อาร์เรย์ที่มีองค์ประกอบเดียวคือ 3
Array.of(3, 4);    // [3, 4]
Array.of('hello'); // ['hello']

ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: สร้างอาร์เรย์จากตัวเลข

<!DOCTYPE html>
<html>
<body>
  <h2>Array.of() ตัวเลข</h2>
  <button onclick="display()">แสดงใน Console</button>
  <p id="demo"></p>
  <script>
    function display() {
      const arr = Array.of(10, 20, 30, 40, 50);
      console.log(arr); // [10, 20, 30, 40, 50]
      document.getElementById("demo").innerHTML = "ดูผลลัพธ์ใน Console (F12)";
    }
  </script>
</body>
</html>

ตัวอย่างที่ 2: สร้างอาร์เรย์จากสตริง

<!DOCTYPE html>
<html>
<body>
  <h2>Array.of() สตริง</h2>
  <button onclick="display()">แสดงใน Console</button>
  <p id="demo"></p>
  <script>
    function display() {
      const arr = Array.of("Kevin", "Tom", "Ryan", "Jacob", "Jack");
      console.log(arr); // ["Kevin", "Tom", "Ryan", "Jacob", "Jack"]
      document.getElementById("demo").innerHTML = "ดูผลลัพธ์ใน Console (F12)";
    }
  </script>
</body>
</html>

เมื่อไหร่ควรใช้ Array.of()?

• ต้องการสร้างอาร์เรย์จากค่าที่รู้จักล่วงหน้า (known values)
• หลีกเลี่ยงพฤติกรรม "special case" ของ Array(n) เมื่อ n เป็นตัวเลข
• เขียนโค้ดที่ชัดเจนและอ่านง่าย (Explicit intent)

เปรียบเทียบวิธีสร้างอาร์เรย์