การใช้ Array Methods กับ Array of Objects ใน JavaScript

Array Methods ทั้งหมด (map, filter, reduce, forEach, find, push, pop, splice ฯลฯ) ใช้งานกับ Array of Objects ได้เหมือน Array ธรรมดา เพียงแต่ Callback จะได้รับ Object แทน Primitive Value

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Array Methods on Objects</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>ใช้ Array Methods กับ Array of Objects</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อใช้ Array Methods กับ Array of Objects</h3>
  <script>
    const BtnEle = document.querySelector(".Btn");
    
    let arr = [
      { name: "Rohan", age: 22, rollNo: "A12" },
      { name: "Mohit", age: 12, rollNo: "B21" },
      { name: "Shawn", age: 18, rollNo: "C43" }
    ];
    
    BtnEle.addEventListener("click", () => {
      arr.pop();                    // ลบตัวสุดท้าย (Shawn)
      arr.push({ name: "Michael", age: 17, rollNo: "AC9" }); // เพิ่มตัวใหม่
      arr.splice(1, 1);             // ลบ index 1 (Mohit) 1 ตัว
      console.log(arr);             // ดูผลใน Console
    });
  </script>
</body>
</html>

Array Methods ที่นิยมใช้กับ Objects

const users = [
  { id: 1, name: "John", age: 25, active: true },
  { id: 2, name: "Jane", age: 30, active: false },
  { id: 3, name: "Bob", age: 35, active: true }
];

// map - แปลงรูปแบบ
const names = users.map(u => u.name);           // ["John", "Jane", "Bob"]
const display = users.map(u => `${u.name} (${u.age})`);

// filter - กรอง
const activeUsers = users.filter(u => u.active);
const adults = users.filter(u => u.age >= 30);

// find - หาตัวแรกที่ match
const user = users.find(u => u.id === 2);       // { id: 2, name: "Jane", ... }

// reduce - รวมค่า
const totalAge = users.reduce((sum, u) => sum + u.age, 0);
const byId = users.reduce((acc, u) => (acc[u.id] = u, acc), {});

// some / every - ตรวจสอบเงื่อนไข
const hasMinor = users.some(u => u.age < 18);   // false
const allActive = users.every(u => u.active);   // false

// sort - เรียงลำดับ (mutates original!)
users.sort((a, b) => a.age - b.age);

ผลลัพธ์

ใน Console จะเหลือ: [{ name: "Rohan", age: 22, rollNo: "A12" }, { name: "Michael", age: 17, rollNo: "AC9" }]