Gộp thuộc tính hai đối tượng JavaScript động (spread operator)

Mô tả

Sử dụng spread operator {...obj1, ...obj2} để gộp (merge) hai object thành object mới.

Ví dụ

var firstObject = {
  firstName: 'John',
  lastName: 'Smith'
};
var secondObject = {
  countryName: 'US'
};

var mergeObject = {...firstObject, ...secondObject};
console.log(mergeObject);

Kết quả

{ firstName: 'John', lastName: 'Smith', countryName: 'US' }

Giải thích

• Spread operator copy các own enumerable properties
• Thuộc tính trùng tên: object sau ghi đè object trước
• Shallow merge (chỉ 1 cấp)
• Tạo object mới, không mutate object gốc

Deep merge (đệ quy)

const deepMerge = (target, source) => {
  const result = {...target};
  for (const key of Object.keys(source)) {
    if (source[key] instanceof Object && target[key] instanceof Object) {
      result[key] = deepMerge(target[key], source[key]);
    } else {
      result[key] = source[key];
    }
  }
  return result;
};

Lưu ý

Cần transpiler (Babel) cho môi trường cũ. Hỗ trợ native từ ES2018 (Object spread).