แปลงอ็อบเจกต์เป็นอาร์เรย์ 2 มิติใน JavaScript

สมมติว่ามีอ็อบเจกต์เก็บข้อมูลสภาพอากาศ:

const obj = {
  city: "New Delhi",
  maxTemp: 32,
  minTemp: 21,
  humidity: 78,
  aqi: 456,
  day: 'Tuesday'
};

เราต้องเขียนฟังก์ชันแปลงอ็อบเจกต์นี้เป็นอาร์เรย์ของอาร์เรย์ (2D Array) โดยแต่ละซับอาร์เรย์มี 2 อิลิเมนต์: [คีย์, ค่า]

ผลลัพธ์ที่คาดหวัง

[
  ['city', 'New Delhi'],
  ['maxTemp', 32],
  ['minTemp', 21],
  ['humidity', 78],
  ['aqi', 456],
  ['day', 'Tuesday']
]

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

const obj = {
  city: "New Delhi",
  maxTemp: 32,
  minTemp: 21,
  humidity: 78,
  aqi: 456,
  day: 'Tuesday'
};

const objectToArray = (obj = {}) => {
  const res = [];
  const keys = Object.keys(obj);
  for (key of keys) {
    res.push([key, obj[key]]);
  }
  return res;
};

console.log(objectToArray(obj));

วิธีทันสมัยกว่า (ES6+)

// ใช้ Object.entries() - มาตรฐาน สั้นที่สุด
const objectToArrayModern = (obj) => Object.entries(obj);

// ใช้ Object.keys() กับ map()
const objectToArrayMap = (obj) => 
  Object.keys(obj).map(key => [key, obj[key]]);

// ใช้ reduce()
const objectToArrayReduce = (obj) =>
  Object.keys(obj).reduce((arr, key) => [...arr, [key, obj[key]]], []);

ผลลัพธ์

[
  ['city', 'New Delhi'],
  ['maxTemp', 32],
  ['minTemp', 21],
  ['humidity', 78],
  ['aqi', 456],
  ['day', 'Tuesday']
]

สรุป

• Object.entries() - วิธีมาตรฐาน ES2017 คืนค่า [key, value] pairs โดยตรง
• Object.keys().map() - เข้าใจง่าย เหมาะสำหรับการแปลงค่าพร้อมกัน
• ลำดับของคีย์จะตรงกับลำดับการสร้างอ็อบเจกต์ (Insertion Order)