การแปลง JavaScript Object ให้เป็น Array ใหม่

บ่อยครั้งที่ต้องแปลงข้อมูลจากรูปแบบ Object ที่ซับซ้อน ให้เป็น Array ที่เรียบง่ายกว่า เพื่อนำไปใช้งานต่อ เช่น แสดงในตาราง Export CSV หรือส่ง API

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Format Object to Array</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>แปลง JavaScript Object ให้เป็น Array ใหม่</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อแปลง school object เป็น array</h3>
  <script>
    const school = {
      name: "St Marks",
      address: "Delhi",
      students: [
        { firstName: "Rohan", lastName: "Sharma", age: 14 },
        { firstName: "Mohit", lastName: "Singh", age: 18 },
        { firstName: "Mike", lastName: "Shaw", age: 17 },
        { firstName: "Roy", lastName: "Mehta", age: 16 }
      ]
    };
    
    const resEle = document.querySelector(".result");
    let schoolArr = [];
    
    // Destructuring ดึง name, address ออกมา
    const { name, address } = school;
    
    // วนลูปนักเรียน สร้าง string ใหม่
    for (let student of school.students) {
      schoolArr.push(`${student.firstName} ${student.lastName} ${student.age}`);
    }
    
    document.querySelector(".Btn").addEventListener("click", () => {
      schoolArr.forEach(item => {
        resEle.innerHTML += item + "<br>";
      });
    });
  </script>
</body>
</html>

วิธีการแปลงข้อมูลอื่นๆ

// 1. map - สร้าง array ใหม่จากการ transform
const names = school.students.map(s => `${s.firstName} ${s.lastName}`);

// 2. reduce - สร้าง object/array แบบกำหนดเอง
const byAge = school.students.reduce((acc, s) => {
  acc[s.age] = acc[s.age] || [];
  acc[s.age].push(s);
  return acc;
}, {});

// 3. Object.entries / Object.values / Object.keys
const entries = Object.entries(school); // [[key, value], ...]

// 4. FlatMap - แปลงและรวมระดับ
const allNames = school.students.flatMap(s => [s.firstName, s.lastName]);

ผลลัพธ์

แสดงรายชื่อนักเรียนพร้อมอายุ แต่ละคนบรรทัดละคน