js实现数据层叠

数据层叠的实现方法

在JavaScript中实现数据层叠（也称为数据合并或深度合并）通常涉及将多个对象或数组的属性递归合并为一个新的对象或数组。以下是几种常见的实现方式：

使用对象展开运算符（浅层合并）

对于简单的对象合并，可以使用ES6的对象展开运算符：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
// 结果: { a: 1, b: 3, c: 4 }

使用Object.assign（浅层合并）

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = Object.assign({}, obj1, obj2);
// 结果: { a: 1, b: 3, c: 4 }

深度合并实现

对于嵌套对象的深度合并，需要递归实现：

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

  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      if (target[key] && typeof target[key] === 'object' && typeof source[key] === 'object') {
        target[key] = deepMerge(target[key], source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}

const obj1 = { a: 1, b: { x: 2 } };
const obj2 = { b: { y: 3 }, c: 4 };
const merged = deepMerge(obj1, obj2);
// 结果: { a: 1, b: { x: 2, y: 3 }, c: 4 }

使用Lodash库

Lodash提供了现成的深度合并方法：

const _ = require('lodash');

const obj1 = { a: 1, b: { x: 2 } };
const obj2 = { b: { y: 3 }, c: 4 };
const merged = _.merge({}, obj1, obj2);
// 结果: { a: 1, b: { x: 2, y: 3 }, c: 4 }

数组的层叠合并

对于数组的合并，可以使用concat方法或展开运算符：

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
// 或
const merged = arr1.concat(arr2);
// 结果: [1, 2, 3, 4]

注意事项

1. 浅层合并只合并第一层属性，深层属性会被覆盖
2. 深度合并需要考虑循环引用问题
3. 对于特殊类型（如Date、RegExp等）需要特殊处理
4. 合并策略可以根据需求定制（如数组是替换还是追加）

以上方法可以根据具体需求选择使用，对于复杂场景推荐使用成熟的工具库如Lodash。