如何在JS中按鍵對值進行分組和連接

我像瘋子一樣嘗試對物件陣列進行某種合并/按鍵排序。不知道為什么，但我無法弄清楚如何做到這一點。

我的應用程式是離子/角。

這是我所擁有的：

[
  {
      "2021": {
          "a": "aText"
      }
  },
  {
      "2021": {
          "b": "bText"
      }
  },
  {
      "2020": {
          "z": "zText"
      }
  },
  {
      "2020": {
          "y": "yText"
      }
  },
  {
      "2020": {
          "x": "xText"
      }
  }
]

我的目標是得到這個：

[
  {
      "2021": { "a": "aText", "b": "bText" }
  },
  {
      "2020": { "z": "zText", "y": "yText", "x": "xText" }
  }
]

換句話說，我想按年重新組合并將它們連接起來。

有沒有人知道如何做到這一點？

uj5u.com熱心網友回復：

如果您只想要一個以年份為鍵的單個物件，那么它只是一個標準的“group by”，帶有一個嵌套回圈來迭代Object.entries()每個物件的 。如果您確實想要最初發布的輸出（單個物件的陣列），您可以只map()使用回傳的分組物件的全部內容并將每個物件轉換為使用Object.fromEntries()

const input = [
  { 2021: { a: 'aText' } },
  { 2021: { b: 'bText' } },
  { 2020: { z: 'zText' } },
  { 2020: { y: 'yText' } },
  { 2020: { x: 'xText' } },
];

const grouped_object = input.reduce(
  (a, o) => (Object.entries(o).forEach(([y, o]) => (a[y] = { ...(a[y] ?? {}), ...o })), a),
  {}
);

// if you just want a single object with years as keys
console.log(grouped_object);

const grouped_array = Object.entries(grouped_object)
  .map(([year, data]) => ({[year]: data}));

// the output from your question
console.log(grouped_array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

或者重構為使用for...of回圈和Object.assign()

const input = [
  { 2021: { a: 'aText' } },
  { 2021: { b: 'bText' } },
  { 2020: { z: 'zText' } },
  { 2020: { y: 'yText' } },
  { 2020: { x: 'xText' } },
];

const grouped_object = {};
for (const obj of input) {
  for (const [year, data] of Object.entries(obj)) {
    grouped_object[year] = Object.assign(grouped_object[year] ?? {}, data);
  }
}

// if you just want a single object with years as keys
console.log(grouped_object);

// or avoiding computed properties
const grouped_array = Object.entries(grouped_object)
  .map(([year, data]) => (o={}, o[year]=data, o));

// the output from your question
console.log(grouped_array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

uj5u.com熱心網友回復：

最好使用一個物件按年份分組。這是一個reduce用于迭代陣列以生成該物件的示例。

const data=[{2021:{a:"aText"}},{2021:{b:"bText"}},{2020:{z:"zText"}},{2020:{y:"yText"}},{2020:{x:"xText"}}];

const out = data.reduce((acc, obj) => {

  // Get the key and value from the object that in
  // the current iteration
  const [ [ key, value ] ] = Object.entries(obj);

  // If the key doesn't exist on the accumulator (the initial
  // object that we passed into the `reduce`) create an empty object
  acc[key] = acc[key] || {};

  // Update the value of that object property with
  // the value of the object
  acc[key] = { ...acc[key], ...value };

  // Return the updated object for the next iteration
  return acc;

// Here's the initial object that
// acts as the accumulator through all the iterations
}, {});

console.log(out);

或者使用一個陣列來保存每年的資訊：

const data=[{2021:{a:"aText"}},{2021:{b:"bText"}},{2020:{z:"zText"}},{2020:{y:"yText"}},{2020:{x:"xText"}}];

const out = data.reduce((acc, obj) => {

  const [ [ key, value ] ] = Object.entries(obj);

  // Use an array instead of an object
  acc[key] = acc[key] || [];

  // Push the first element of the Object.values
  // into the array
  acc[key] = [ ...acc[key], Object.values(value)[0] ];

  return acc;

}, {});

console.log(out);

附加檔案

• Object.entries

• Object.values

• 解構賦值

• 傳播語法

標籤：javascript 打字稿

上一篇：Flexbox：一旦另一個彈性專案的寬度為0，如何包裝一個彈性專案？

下一篇：使用字串變數檢索JSON資料