JavaScript 中合併和分組物件屬性

---

在本題中，我們將學習如何使用 JavaScript 合併和分組物件屬性。本文將教你如何在 JavaScript 中合併和分組相同型別的屬性。

理解問題

我們需要建立一個 JavaScript 方法，該方法將接收一個物件陣列作為輸入。該函式應分組所有具有 name 屬性值的物件的所有屬性。例如

輸入

[
  {name: 'Adi', age: 22, color:'Black'},
  {name: 'Adi', weight: 40, height:6} ,
  {name: 'Mack', age: 20}
]

輸出

[
 {name: 'Adi', age: 22, color:'Black', weight: 40, height:6},
 {name: 'Mack', age: 20}
]

演算法 - 使用 reduce 方法

下面提到的演算法將逐步介紹解決此問題的過程。

步驟 1：首先定義一個名為 groupedData 的資料陣列。在此應用程式中，此陣列接收對 reduce() 方法的呼叫，初始值為一個空物件。引數 acc 和 curr 傳遞給回撥函式。

步驟 2：每次使用 reduce() 方法時，回撥函式首先使用解構從 curr 物件中移除 state 屬性，然後使用擴充套件運算子構建一個包含其餘屬性的新物件。

步驟 3：然後，回撥函式確定 state 屬性是否以前用作 acc 物件中的鍵。如果是，則將當前物件的 population 新增到該 state 已有的 population。如果沒有，則將 state 和來自 curr 物件的其他屬性轉移到 acc 物件中的新條目。

步驟 4：結果變數用於使用 Object.values() 方法將 groupedData 物件轉換回物件陣列。

步驟 5：顯示結果輸出。

示例

// define a function to check power of 3
const data = [
  { city: "New York", state: "NY", population: 100000 },
  { city: "San Francisco", state: "CA", population: 50000 },
  { city: "Los Angeles", state: "CA", population: 200000 },
  { city: "San Diego", state: "CA", population: 10000 },
  { city: "Chicago", state: "IL", population: 150000 },
  { city: "Miami", state: "FL", population: 5000 }
];

const groupedData = data.reduce((acc, curr) => {
  const { state, ...rest } = curr;
  if (acc[state]) {
   acc[state] = { ...acc[state], population: acc[state].population + curr.population };
  } else {
   acc[state] = { state, ...rest };
  }
  return acc;
}, {});

const result = Object.values(groupedData);

console.log(result);

輸出

[
  { state: 'NY', city: 'New York', population: 100000 },
  { state: 'CA', city: 'San Francisco', population: 260000 },
  { state: 'IL', city: 'Chicago', population: 150000 },
  { state: 'FL', city: 'Miami', population: 5000 }
]

演算法 - 使用 forEach 方法

使用 forEach 方法的演算法步驟如下

步驟 1：第一步，定義一個包含 city、state 和 population 鍵的陣列，並向其中新增一些值。然後，建立一個空陣列並將其命名為“groupedData”。

步驟 2：在這個程式中，使用帶有名為 obj 的單個引數的回撥函式，對 data 陣列使用 forEach() 方法。

步驟 3：在 forEach() 方法的每次迭代中，回撥函式使用解構從 obj 物件中移除 state 屬性，然後使用擴充套件運算子構建一個包含其餘屬性的新物件。

步驟 4：回撥函式然後確定 state 屬性是否曾經用作 groupedData 物件的鍵。如果是，則將該 state 的人口增加當前專案的 population。如果不是，則將 state 和來自 obj 物件的其他屬性新增到 groupedData 物件中的新專案。

步驟 5：使用 Object.values() 函式將 groupedData 物件轉換回物件陣列，並將其儲存在結果變數中。

示例

const data = [
  { city: "New York", state: "NY", population: 100000 },
  { city: "San Francisco", state: "CA", population: 50000 },
  { city: "Los Angeles", state: "CA", population: 200000 },
  { city: "San Diego", state: "CA", population: 10000 },
  { city: "Chicago", state: "IL", population: 150000 },
  { city: "Miami", state: "FL", population: 5000 }
];

const groupedData = {};

data.forEach((obj) => {
  const { state, ...rest } = obj;
  if (groupedData[state]) {
   groupedData[state].population += obj.population;
  } else {
   groupedData[state] = { state, ...rest };
  }
});

const result = Object.values(groupedData);

console.log(result);

時間複雜度

此程式的時間複雜度為 O(n)，其中 n 為數字。這是因為 reduce 和 forEach 函式正在使用陣列的長度來產生結果。

因此，此程式的空間複雜度為 O(n)，因為它使用 n 量級的記憶體來儲存陣列。

結論

這是解決此類問題的基本思路。在整個過程中，我們使用了 JavaScript 的 reduce 和 forEach 函式、算術運算子和比較運算子來解決問題。並且瞭解瞭如何計算演算法的時間和空間複雜度。