การรวมอาร์เรย์ของออบเจกต์เป็นออบเจกต์เดียวใน JavaScript

บทความนี้สาธิตวิธีรวมอาร์เรย์ที่มีหลายออบเจกต์ ให้กลายเป็นออบเจกต์เดียวที่มีทุก property จากทุกออบเจกต์

ตัวอย่างข้อมูล

const arr = [{
  name: 'Dinesh Lamba',
  age: 23,
  occupation: 'Web Developer',
}, {
  address: 'Vasant Vihar',
  experience: 5,
  isEmployed: true
}];

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

const arr = [{
  name: 'Dinesh Lamba',
  age: 23,
  occupation: 'Web Developer',
}, {
  address: 'Vasant Vihar',
  experience: 5,
  isEmployed: true
}];

const mergeObjects = (arr = []) => {
  const res = {};
  arr.forEach(obj => {
    for (key in obj) {
      res[key] = obj[key];
    }
  });
  return res;
};

console.log(mergeObjects(arr));

ผลลัพธ์

{
  name: 'Dinesh Lamba',
  age: 23,
  occupation: 'Web Developer',
  address: 'Vasant Vihar',
  experience: 5,
  isEmployed: true
}

คำอธิบาย

ใช้ forEach วนลูปอาร์เรย์ และ for...in วนลูป property ของแต่ละออบเจกต์ กำหนดค่าให้ res[key] = obj[key]

หากมี property ซ้ำกัน ค่าจะถูกเขียนทับด้วยออบเจกต์ที่อยู่หลังในอาร์เรย์

วิธีทางเลือก: ใช้ Object.assign({}, ...arr) หรือ spread operator {...arr[0], ...arr[1]}