Javascript 对象（object）合并操作实例分析

我来详细讲解一下 "Javascript 对象（object）合并操作实例分析" 的完整攻略，过程中包含两条示例说明。

1、 操作实例说明

在 JavaScript 开发中，我们经常需要将两个或多个对象合并为一个对象，这种操作就是对象的合并。常见的合并方式有浅合并和深合并两种方式。

1.浅合并：将多个对象合并为一个对象，如果属性名相同则直接覆盖原有属性即可。

const mobile1 = {
  brand: 'Apple',
  model: 'iPhone X',
  color: 'white',
};

const mobile2 = {
  model: 'iPhone 12',
  year: 2021,
};

const mobile = Object.assign({}, mobile1, mobile2);
console.log(mobile);  // 输出 { brand: 'Apple', model: 'iPhone 12',color: 'white', year: 2021 }

1. 深合并：将多个对象中深层次的属性值进行合并。

const mobile1 = {
  brand: 'Apple',
  features: {
    camera: {
      front: true,
      rear: true,
    },
    battery: {
      capacity: 2716,
      standbyTime: 'Up to 10 days',
    },
  },
};

const mobile2 = {
  features: {
    camera: {
      front: false,
      zoom: 2,
    },
    battery: {
      capacity: 2930,
      talkTime: 'Up to 14 hours',
    },
    storage: {
      capacity: '128 GB',
    },
  },
};

function mergeDeep(target1, ...sources) {
  if (!sources.length) return target1;
  const source = sources.shift();
  if (typeof target1 !== 'object' || typeof source !== 'object') {
    return target1;
  }
  Object.keys(source).forEach((key) => {
    if (typeof source[key] === 'object') {
      if (!target1[key]) Object.assign(target1, { [key]: {} });
      mergeDeep(target1[key], source[key]);
    } else {
      Object.assign(target1, { [key]: source[key] });
    }
  });
  return mergeDeep(target1, ...sources);
}

const mobile = mergeDeep({}, mobile1, mobile2);
console.log(mobile);

2、 合并操作实现

首先我们先了解 Object.assign() 方法

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象。

2.1、 语法

Object.assign(target, ...sources)

2.2、 参数

• target： 目标对象。
• sources： 源对象，一个或多个。

2.3、 实例说明

如下代码，我们来演示 Object.assign() 方法的使用。

const mobile1 = {
  brand: 'Apple',
  model: 'iPhone X',
  color: 'white',
};

const mobile2 = {
  model: 'iPhone 12',
  year: 2021,
};

const mobile = Object.assign({}, mobile1, mobile2);
console.log(mobile);  // 输出 { brand: 'Apple', model: 'iPhone 12',color: 'white', year: 2021 }

这里通过 Object.assign() 方法将 mobile1 和 mobile2 两个对象合并为 mobile 对象。其中 {} 表示我们需要合并对象的目标对象，这里用空对象表示。

深合并

如果需要合并对象中更深层次的属性值，可以使用递归实现。这里我们实现了一个 mergeDeep() 函数来实现深层次的合并。

2.4 实例说明

const mobile1 = {
  brand: 'Apple',
  features: {
    camera: {
      front: true,
      rear: true,
    },
    battery: {
      capacity: 2716,
      standbyTime: 'Up to 10 days',
    },
  },
};

const mobile2 = {
  features: {
    camera: {
      front: false,
      zoom: 2,
    },
    battery: {
      capacity: 2930,
      talkTime: 'Up to 14 hours',
    },
    storage: {
      capacity: '128 GB',
    },
  },
};

function mergeDeep(target1, ...sources) {
  if (!sources.length) return target1;
  const source = sources.shift();
  if (typeof target1 !== 'object' || typeof source !== 'object') {
    return target1;
  }
  Object.keys(source).forEach((key) => {
    if (typeof source[key] === 'object') {
      if (!target1[key]) Object.assign(target1, { [key]: {} });
      mergeDeep(target1[key], source[key]);
    } else {
      Object.assign(target1, { [key]: source[key] });
    }
  });
  return mergeDeep(target1, ...sources);
}

const mobile = mergeDeep({}, mobile1, mobile2);
console.log(mobile);

/**
 * 输出
 * {
 *    brand: 'Apple',
 *    features: {
 *       camera: {
 *          front: false,
 *          rear: true,
 *          zoom: 2
 *       },
 *       battery: {
 *          capacity: 2930,
 *          standbyTime: 'Up to 10 days',
 *          talkTime: 'Up to 14 hours'
 *       },
 *      storage: {
 *          capacity: '128 GB'
 *      }
 *    }
 * }
 */

这里通过 mergeDeep() 函数将 mobile1 和 mobile2 两个对象合并为一个新对象 mobile。{} 表示要合并的新对象。在 mergeDeep() 函数中我们通过递归实现深层次合并，访问属性时使用 source[key] 和 target1[key] 实现访问对象的深层次属性值。

结语

以上就是 "Javascript 对象（object）合并操作实例分析" 的完整攻略，我们通过两个实例来学习了对象的合并操作。希望可以帮助到大家。