JavaScript对象合并指南：浅合并与深合并的探索之旅

前端

2024-01-15 05:26:17

前言

在JavaScript中，对象是一种非常重要的数据结构，它允许我们以键值对的形式存储数据，并使用属性和方法来访问和操作这些数据。当我们需要将两个或多个对象合并在一起时，就需要使用对象合并技术。

对象合并的两种方式：浅合并与深合并

在JavaScript中，对象合并有两种基本方式：浅合并和深合并。

浅合并 ：将源对象的所有属性和方法直接复制到目标对象，如果目标对象中已经存在同名属性或方法，则会被源对象的属性或方法覆盖。
深合并 ：将源对象的所有属性和方法递归地复制到目标对象，如果目标对象中已经存在同名属性或方法，则会将源对象的属性或方法的值合并到目标对象的属性或方法中。

如何检测数据类型和纯对象

在进行对象合并之前，我们需要先检测数据的类型和是否是纯对象，以决定使用哪种合并方式。

检测数据类型 ：可以使用JavaScript内置的typeof运算符来检测数据类型，例如：

typeof 123; // "number"
typeof "abc"; // "string"
typeof true; // "boolean"
typeof [1, 2, 3]; // "object"
typeof { name: "John", age: 30 }; // "object"

检测是否是纯对象 ：可以使用JavaScript内置的Object.prototype.toString方法来检测是否是纯对象，例如：

Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(123); // "[object Number]"
Object.prototype.toString.call("abc"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"

如何实现对象浅合并

对象浅合并很容易实现，可以使用Object.assign()方法或直接使用=赋值运算符，例如：

// 使用Object.assign()方法实现对象浅合并
const obj1 = { name: "John", age: 30 };
const obj2 = { city: "New York" };
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj); // { name: "John", age: 30, city: "New York" }

// 使用=赋值运算符实现对象浅合并
const obj1 = { name: "John", age: 30 };
const obj2 = { city: "New York" };
obj1 = obj2;
console.log(obj1); // { city: "New York" }

如何实现对象深合并

对象深合并需要使用递归来实现，因为我们需要递归地合并对象中的所有属性和方法。可以使用以下步骤来实现对象深合并：

检测源对象和目标对象的数据类型和是否是纯对象。
如果源对象和目标对象都是纯对象，则继续执行以下步骤。
遍历源对象的所有属性和方法。
如果目标对象中已经存在同名属性或方法，则将源对象的属性或方法的值合并到目标对象的属性或方法中。
如果目标对象中不存在同名属性或方法，则将源对象的属性或方法复制到目标对象中。
递归地合并源对象和目标对象的所有属性和方法。

下面是一个实现对象深合并的示例代码：

function deepMerge(target, source) {
  if (typeof target !== "object" || typeof source !== "object") {
    return target;
  }

  if (Array.isArray(target) && Array.isArray(source)) {
    return [...target, ...source];
  }

  for (const key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (Object.prototype.hasOwnProperty.call(target, key)) {
        target[key] = deepMerge(target[key], source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }

  return target;
}