JS对象合并指南

一、js对象合并方法

js对象合并是指将多个对象合并成一个对象。其中一个对象是基础对象,其他对象的属性会被合并到该基础对象中。下面是一个基础的js对象合并方法:

/**
 * 合并一个或多个对象到第一个对象
 * @param target  目标对象,最终被修改的对象
 * @param source  要合并的对象
 * @returns {*}
 */
function extend(target, source) {
  for (let key in source) {
    if (source.hasOwnProperty(key)) {
      target[key] = source[key];
    }
  }
  return target;
}

以上代码展示了一个简单的对象合并方法,遍历传入的所有对象,将其属性添加到目标对象中。如果属性名称相同,则会覆盖目标对象的属性。

可以将该方法用于合并任意数量的对象。

二、js对象合并并去重

在前面提到的js对象合并方法中,如果属性名称相同,会覆盖目标对象的属性。如果希望保留重复的属性,则需要在合并时进行去重。下面是一个带有去重功能的js对象合并方法:

/**
 * 合并一个或多个对象到第一个对象并去重
 * @param target  目标对象,最终被修改的对象
 * @param sources  要合并的对象
 * @returns {*}
 */
function merge(target, ...sources) {
  sources.forEach(function (source) {
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (!target.hasOwnProperty(key)) {
          target[key] = source[key];
        } else if (Array.isArray(target[key]) && Array.isArray(source[key])) {
          target[key] = [...new Set([...target[key], ...source[key]])];
        } else if (typeof target[key] === 'object' && typeof source[key] === 'object') {
          merge(target[key], source[key]);
        } else {
          target[key] = source[key];
        }
      }
    }
  });
  return target;
}

该方法除了遍历要合并的对象外,还增加了一个去重的功能。对于重复的属性,如果是两个数组,则进行并集去重;如果是两个对象,则进行递归遍历。

三、js两个对象合并成一个数组

除了将多个对象合并成一个对象外,有时也需要将两个对象合并成一个数组。下面是一个将两个对象合并成一个数组的js方法:

/**
 * 两个对象合并成一个数组
 * @param a  对象A
 * @param b  对象B
 * @returns {Array} 合并后的数组
 */
function mergeToArray(a, b) {
  let arr = [];
  for (let key in a) {
    if (a.hasOwnProperty(key)) {
      arr.push(a[key]);
    }
  }
  for (let key in b) {
    if (b.hasOwnProperty(key)) {
      arr.push(b[key]);
    }
  }
  return arr;
}

该方法简单直接,将两个对象的所有属性值放入一个数组中返回。

四、js对象合并指定属性

有时候只需要合并指定的属性,而不是所有属性。下面是一个合并指定属性的js对象合并方法:

/**
 * 合并指定属性到目标对象中
 * @param target 目标对象
 * @param source 来源对象
 * @param keys 合并的属性
 */
function mergeKeys(target, source, keys) {
  keys.forEach(function (key) {
    if (source.hasOwnProperty(key)) {
      target[key] = source[key];
    }
  });
}

上述代码中,只有指定的属性会被合并到目标对象中。

五、js深度合并对象

有时候需要同时合并对象中嵌套的对象,实现深度合并,下面是一个深度合并对象的方法:

/**
 * 深度合并对象
 * @param target 目标对象
 * @param source 来源对象
 * @returns {*}
 */
function mergeDeep(target, source) {
  const isObject = (obj) => typeof obj === 'object' && obj !== null;
  if (!isObject(target) || !isObject(source)) {
    return source;
  }
  for (let key in source) {
    if (source.hasOwnProperty(key)) {
      const targetValue = target[key];
      const sourceValue = source[key];
      if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
        target[key] = [...targetValue, ...sourceValue];
      } else if (isObject(targetValue) && isObject(sourceValue)) {
        target[key] = mergeDeep({...targetValue}, sourceValue);
      } else {
        target[key] = sourceValue;
      }
    }
  }
  return target;
}

该方法会进行递归遍历,合并所有嵌套的对象。

六、js对象合并并返回新的对象

上面的大多数方法都是在原有对象上进行合并,如果需要返回一个新对象,可以使用以下方法:

/**
 * 新对象合并
 * @param sources 要合并的对象
 * @returns {*|{}} 合并后的新对象
 */
function mergeNew(...sources) {
  return sources.reduce(function (acc, obj) {
    return Object.assign(acc, obj);
  }, {});
}

该方法会将所有传入的对象合并为一个新的对象并返回。

七、js合并对象

除了上述方法外,还有其他方法可以合并对象。

例如,使用ES6语法可以通过以下方式合并对象:

let a = {a: 1, b: 2};
let b = {b: 3, c: 4};
let c = {...a, ...b}; // {a: 1, b: 3, c: 4}

使用lodash库可以通过以下方式合并对象:

const _ = require('lodash');
let a = {a: 1, b: 2};
let b = {b: 3, c: 4};
let c = _.merge({}, a, b); // {a: 1, b: 3, c: 4}

八、js对象合并成为一个对象

除了将多个对象合并成一个对象外,还有一种情况是将一组具有相同键的对象合并成一个对象。下面是一个将一组对象合并成一个对象的js方法:

let arr = [{name: "Tom", age: 20}, {name: "Jack", age: 25}];
let obj = arr.reduce((acc, cur) => {
  acc[cur.name] = cur.age;
  return acc;
}, {});
console.log(obj); // {Tom: 20, Jack: 25}

该方法通过迭代传入的数组,将具有相同键的对象合并为一个对象并返回。

九、对象合并的几种方法

以上介绍了常见的js对象合并方法,除此之外还有其他一些方法。

使用jQuery库可以通过以下方式合并对象:

let a = {a: 1, b: 2};
let b = {b: 3, c: 4};
let c = $.extend({}, a, b); // {a: 1, b: 3, c: 4}

使用Object.assign方法可以将多个对象合并为一个对象:

let a = {a: 1, b: 2};
let b = {b: 3, c: 4};
let c = Object.assign({}, a, b); // {a: 1, b: 3, c: 4}

在ES8中可以使用对象展开符(…)来简单地合并对象:

let a = {a: 1, b: 2};
let b = {b: 3, c: 4};
let c = {...a, ...b}; // {a: 1, b: 3, c: 4}

综上所述,JS合并对象的方法众多,根据实际需求选择合适的方法能够更加高效地完成对象合并的任务。

原创文章,作者:小蓝,如若转载,请注明出处:https://www.506064.com/n/297737.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝小蓝
上一篇 2024-12-28 12:16
下一篇 2024-12-28 12:16

相关推荐

  • JS Proxy(array)用法介绍

    JS Proxy(array)可以说是ES6中非常重要的一个特性,它可以代理一个数组,监听数据变化并进行拦截、处理。在实际开发中,使用Proxy(array)可以方便地实现数据的监…

    编程 2025-04-29
  • Java JsonPath 效率优化指南

    本篇文章将深入探讨Java JsonPath的效率问题,并提供一些优化方案。 一、JsonPath 简介 JsonPath是一个可用于从JSON数据中获取信息的库。它提供了一种DS…

    编程 2025-04-29
  • 运维Python和GO应用实践指南

    本文将从多个角度详细阐述运维Python和GO的实际应用,包括监控、管理、自动化、部署、持续集成等方面。 一、监控 运维中的监控是保证系统稳定性的重要手段。Python和GO都有强…

    编程 2025-04-29
  • Python wordcloud入门指南

    如何在Python中使用wordcloud库生成文字云? 一、安装和导入wordcloud库 在使用wordcloud前,需要保证库已经安装并导入: !pip install wo…

    编程 2025-04-29
  • Python应用程序的全面指南

    Python是一种功能强大而简单易学的编程语言,适用于多种应用场景。本篇文章将从多个方面介绍Python如何应用于开发应用程序。 一、Web应用程序 目前,基于Python的Web…

    编程 2025-04-29
  • Python字符转列表指南

    Python是一个极为流行的脚本语言,在数据处理、数据分析、人工智能等领域广泛应用。在很多场景下需要将字符串转换为列表,以便于操作和处理,本篇文章将从多个方面对Python字符转列…

    编程 2025-04-29
  • Python小波分解入门指南

    本文将介绍Python小波分解的概念、基本原理和实现方法,帮助初学者掌握相关技能。 一、小波变换概述 小波分解是一种广泛应用于数字信号处理和图像处理的方法,可以将信号分解成多个具有…

    编程 2025-04-29
  • Python初学者指南:第一个Python程序安装步骤

    在本篇指南中,我们将通过以下方式来详细讲解第一个Python程序安装步骤: Python的安装和环境配置 在命令行中编写和运行第一个Python程序 使用IDE编写和运行第一个Py…

    编程 2025-04-29
  • FusionMaps应用指南

    FusionMaps是一款基于JavaScript和Flash的交互式地图可视化工具。它提供了一种简单易用的方式,将复杂的数据可视化为地图。本文将从基础的配置开始讲解,到如何定制和…

    编程 2025-04-29
  • Python起笔落笔全能开发指南

    Python起笔落笔是指在编写Python代码时的编写习惯。一个好的起笔落笔习惯可以提高代码的可读性、可维护性和可扩展性,本文将从多个方面进行详细阐述。 一、变量命名 变量命名是起…

    编程 2025-04-29

发表回复

登录后才能评论