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

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

合并对象在 Typescript 中的实现与应用一、简介

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

二、实现

1、函数实现

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

代码语言：javascript代码运行次数：0运行复制

import { isObject } from '@/utils/is'

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

isObject 代码

代码语言：javascript代码运行次数：0运行复制

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

2、参数说明

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

、返回值

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

三、使用示例

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

代码语言：javascript代码运行次数：0运行复制

ct person = {
  name: '张三',
  age: 0,
  address: {
    city: '北京',
    country: '中国'
  }
}

ct info = {
  job: '工程师',
  address: {
    street: '科技路'
  }
}

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

代码语言：javascript代码运行次数：0运行复制

import { deepMerge } from '@/path-to-deepMerge'

ct mergedPerson = deepMerge(person, info)

cole.log(mergedPerson)

输出结果：

代码语言：javascript代码运行次数：0运行复制

{
  name: '张三',
  age: 0,
  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。

代码语言：javascript代码运行次数：0运行复制

npm install lodash-es --save

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

代码语言：javascript代码运行次数：0运行复制

import { assign } from 'lodash-es';

、基础用法

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

代码语言：javascript代码运行次数：0运行复制

ct object = { 'a': 1 };
ct source = { 'b': 2 };
ct result = assign(object, source);

cole.log(result);
// 输出: { 'a': 1, 'b': 2 }

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

4、注意事项

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

代码语言：javascript代码运行次数：0运行复制

ct object = { 'a': 1, 'b': 2 };
ct source1 = { 'b': , 'c': 4 };
ct source2 = { 'c': 5 };

ct result = assign(object, source1, source2);

cole.log(result);
// 输出: { 'a': 1, 'b': , 'c': 5 }

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除前往查看typescript对象工程师函数配置