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

สมมติว่ามีอาร์เรย์ของอาร์เรย์ที่เก็บข้อมูลนักคริกเก็ตดังนี้:

const arr = [
  ['Name', 'V Kohli'],
  ['Matches', 13],
  ['Runs', 590],
  ['Highest', 183],
  ['NO', 3],
  ['SR', 131.5]
];

แต่ละซับอาร์เรย์แทนคู่คีย์-ค่า (Key-Value Pair) โดยอิลิเมนต์แรกคือคีย์ และอิลิเมนต์ที่สองคือค่า เราต้องเขียนฟังก์ชันสร้างอ็อบเจกต์จากอาร์เรย์นี้

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

{
  Name: 'V Kohli',
  Matches: 13,
  Runs: 590,
  Highest: 183,
  NO: 3,
  SR: 131.5
}

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

const arr = [
  ['Name', 'V Kohli'],
  ['Matches', 13],
  ['Runs', 590],
  ['Highest', 183],
  ['NO', 3],
  ['SR', 131.5]
];

const arrayToObject = (arr = []) => {
  const res = {};
  for (pair of arr) {
    const [key, value] = pair;
    res[key] = value;
  }
  return res;
};

console.log(arrayToObject(arr));

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

// ใช้ Object.fromEntries() - สั้นที่สุดและอ่านง่ายที่สุด
const arrayToObjectModern = (arr) => Object.fromEntries(arr);

// ใช้ reduce()
const arrayToObjectReduce = (arr) => 
  arr.reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});

// ใช้ forEach
const arrayToObjectForEach = (arr) => {
  const obj = {};
  arr.forEach(([key, value]) => obj[key] = value);
  return obj;
};

ผลลัพธ์

{
  Name: 'V Kohli',
  Matches: 13,
  Runs: 590,
  Highest: 183,
  NO: 3,
  SR: 131.5
}

สรุป

• Object.fromEntries() - วิธีมาตรฐาน สั้นที่สุด ประสิทธิ์ดี (ES2019+)
• reduce() - ฟังก์ชันนอล ยืดหยุ่น ได้ผลลัพธ์ immutable
• for...of + destructuring - อ่านง่าย เข้าใจง่าย