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/zh-tw/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

發表回復

登錄後才能評論