合并对象在 Typescript 中的实现与应用

一、简介

在日常开发中，尤其是在处理配置对象或者嵌套的数据结构时，对象的深度合并成为一项常见需求。这篇博客将介绍如何在JavaScript中实现对象的深度合并，并提供具体的使用例子。

二、实现

1、函数实现

首先，我们来看一下深度合并（Deep Merge）函数的代码实现。

import { isObject } from '@/utils/is'/*** 深度合并* @param src 源对象* @param target 目标对象*/
export function deepMerge<T = any>(src: any = {}, target: any = {}): T {let key: stringfor (key in target) {src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key])}return src as T
}

isObject 代码

export function isObject(val: any): val is Record<any, any> {return val !== null && is(val, 'Object')
}

2、参数说明

• src: 源对象，即要被合并到的对象。
• target: 目标对象，即从中获取数据来合并到src的对象。

3、返回值

函数返回一个类型为T的新对象，这个新对象是src和target对象的深度合并结果。

三、使用示例

假设你有两个对象，一个是person，另一个是info：

const person = {name: '张三',age: 30,address: {city: '北京',country: '中国'}
}const info = {job: '工程师',address: {street: '科技路'}
}

使用deepMerge函数，你可以这样合并这两个对象：

import { deepMerge } from '@/path-to-deepMerge'const mergedPerson = deepMerge(person, info)console.log(mergedPerson)

输出结果：

{name: '张三',age: 30,job: '工程师',address: {city: '北京',country: '中国',street: '科技路'}
}

四、实际应用场景

深度合并对象在许多场景下都非常有用：

1. 配置合并：当你有多个配置对象需要合并时。
2. 状态管理：在使用如 Vuex 或者 Redux 这样的状态管理库时。
3. API响应合并：当你从多个API接口获取数据并需要合并到一个对象时。

五、拓展：使用 lodash-es 的 assign 函数进行对象合并

1、简介

lodash-es是一个提供了很多有用工具函数的JavaScript库。其中，assign函数用于将一个或多个源对象自身的可枚举属性从一个对象复制到目标对象。本文将详细介绍如何使用lodash-es中的assign函数进行对象合并。

2、安装与导入

首先，你需要安装lodash-es。

npm install lodash-es --save

然后，在你的代码中导入assign函数。

import { assign } from 'lodash-es';

3、基础用法

assign函数接受一个目标对象和一个或多个源对象作为参数，并将源对象的属性复制到目标对象中。

const object = { 'a': 1 };
const source = { 'b': 2 };
const result = assign(object, source);console.log(result);
// 输出: { 'a': 1, 'b': 2 }// 注意：目标对象也被改变了
console.log(object);
// 输出: { 'a': 1, 'b': 2 }

4、注意事项

• assign仅复制对象自身的可枚举属性。
• 它不会进行深度合并。
• 如果多个源对象有相同的属性，那么后面的源对象会覆盖前面的。

const object = { 'a': 1, 'b': 2 };
const source1 = { 'b': 3, 'c': 4 };
const source2 = { 'c': 5 };const result = assign(object, source1, source2);console.log(result);
// 输出: { 'a': 1, 'b': 3, 'c': 5 }