js 怎样合并两个对象

Object.assign()

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// 使用展开语法合并
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

Object.assign()

const objA = { x: 10, y: 20 };
const objB = { z: 30 };

// 使用Object.assign()合并
const targetObj = {}; // 通常我们会提供一个空对象作为目标
Object.assign(targetObj, objA, objB);
console.log(targetObj); // { x: 10, y: 20, z: 30 }

// 也可以直接合并到现有对象上，但会修改它
const existingObj = { name: 'Alice' };
Object.assign(existingObj, { age: 30 });
console.log(existingObj); // { name: 'Alice', age: 30 }

Object.assign()

Object.assign()

Object.assign()

Object.assign()

const userDefault = {
  name: 'Guest',
  role: 'viewer',
  permissions: ['read']
};

const userConfig = {
  name: 'John Doe',
  permissions: ['write', 'delete'],
  status: 'active'
};

// 使用展开语法
const finalUserSpread = { ...userDefault, ...userConfig };
console.log(finalUserSpread);
/*
{
  name: 'John Doe',     // userConfig 的 name 覆盖了 userDefault 的
  role: 'viewer',
  permissions: ['write', 'delete'], // userConfig 的 permissions 覆盖了 userDefault 的
  status: 'active'
}
*/

// 使用Object.assign()
const finalUserAssign = Object.assign({}, userDefault, userConfig);
console.log(finalUserAssign);
/*
{
  name: 'John Doe',     // userConfig 的 name 覆盖了 userDefault 的
  role: 'viewer',
  permissions: ['write', 'delete'], // userConfig 的 permissions 覆盖了 userDefault 的
  status: 'active'
}
*/

name

permissions

userConfig

...

Object.assign()

const userProfile = {
  id: 1,
  name: 'Jane',
  address: {
    street: '123 Main St',
    city: 'Anytown'
  },
  hobbies: ['reading', 'hiking']
};

const updates = {
  name: 'Jane Doe',
  address: {
    city: 'Newville' // 假设我们只更新城市
  },
  hobbies: ['coding'] // 假设我们想添加一个爱好
};

const mergedProfile = { ...userProfile, ...updates };
console.log(mergedProfile);
/*
{
  id: 1,
  name: 'Jane Doe',
  address: { city: 'Newville' }, // 注意：street 属性不见了！
  hobbies: ['coding'] // 注意：hiking 爱好不见了！
}
*/

// 更糟糕的是，如果更新的是引用类型内部的属性
const userProfile2 = {
  id: 2,
  name: 'Bob',
  settings: {
    theme: 'dark',
    notifications: {
      email: true,
      sms: false
    }
  }
};

const updates2 = {
  settings: {
    notifications: {
      sms: true // 试图只更新sms通知
    }
  }
};

const mergedProfile2 = { ...userProfile2, ...updates2 };
console.log(mergedProfile2);
/*
{
  id: 2,
  name: 'Bob',
  settings: {
    notifications: { sms: true } // 注意：theme 属性和 email 通知都不见了！
  }
}
*/

updates

address

userProfile

address

hobbies

settings

notifications

...

Object.assign()

...

Object.assign()

Object.assign()

const baseConfig = {
  port: 3000,
  env: 'development',
  logging: true
};

const devConfig = {
  env: 'development',
  debug: true,
  port: 8080 // 覆盖 baseConfig 的 port
};

const userOverrides = {
  logging: false, // 覆盖 baseConfig 的 logging
  debug: false // 覆盖 devConfig 的 debug
};

// 将所有对象按顺序展开，后面的对象会覆盖前面同名属性
const finalConfig = { ...baseConfig, ...devConfig, ...userOverrides };
console.log(finalConfig);
/*
{
  port: 8080,      // 被 devConfig 覆盖
  env: 'development',
  logging: false,  // 被 userOverrides 覆盖
  debug: false     // 被 userOverrides 覆盖
}
*/

Object.assign()

const baseSettings = { theme: 'light', font: 'sans-serif' };
const userSettings = { theme: 'dark' };
const adminSettings = { permissions: ['all'], font: 'monospace' };

// Object.assign(target, source1, source2, ..., sourceN)
// 第一个参数是目标对象，后续所有参数都是源对象
const combinedSettings = Object.assign({}, baseSettings, userSettings, adminSettings);
console.log(combinedSettings);
/*
{
  theme: 'dark',        // 被 userSettings 覆盖
  font: 'monospace',    // 被 adminSettings 覆盖
  permissions: ['all']
}
*/

Object.assign()

Object.assign()