在js中將多個陣列（具有相似的id）組合成一個物件

我有一個這種格式的陣列：

let array = [
  { text: "Green marbles", number: 10, n: 1 },
  { text: "Pink marbles", number: 5, n: 1 },
  { text: "Yellow marbles", number: 2, n: 1 },
  { text: "Green marbles", number: 10, n: 2 },
  { text: "Pink marbles", number: 5, n: 2 },
  { text: "Yellow marbles", number: 2, n: 2 }
]

想要的結果是：

let formatArray = [
  { n: 1, "Green marbles": 10, "Pink marbles": 5, "Yellow marbles": 2 },
  { n: 2, "Green marbles": 10, "Pink marbles": 5, "Yellow marbles": 2 }
];

數字不是恒定的（僅在此示例中是）我嘗試這樣做：

let formatArray = [];

array.forEach(el=> {
  Object.keys(el).forEach(eel=> {
   formatArray.push(/*…???*/)
  })
}) 

卡在這里，但我認為這就是想法

uj5u.com熱心網友回復：

1）您可以使用Map輕松高效地實作結果：

array.reduce((map, curr) => map.set(curr.n, { ...(map.get(curr.n) ?? {}), [curr.text]: curr.number }), new Map())

let array = [
  { text: "Green marbles", number: 10, n: 1 },
  { text: "Pink marbles", number: 5, n: 1 },
  { text: "Yellow marbles", number: 2, n: 1 },
  { text: "Green marbles", number: 10, n: 2 },
  { text: "Pink marbles", number: 5, n: 2 },
  { text: "Yellow marbles", number: 2, n: 2 },
];

let collection = array.reduce((map, curr) => map.set(curr.n, { ...(map.get(curr.n) ?? {}), [curr.text]: curr.number }), new Map());

const formatArray = [...collection.values()];
console.log(formatArray);

2)單線解決方案

let formatArray = [ ...array.reduce((map, curr) => map.set(curr.n, { ...(map.get(curr.n) ?? {}), [curr.text]: curr.number }), new Map()).values()];

let array = [
  { text: "Green marbles", number: 10, n: 1 },
  { text: "Pink marbles", number: 5, n: 1 },
  { text: "Yellow marbles", number: 2, n: 1 },
  { text: "Green marbles", number: 10, n: 2 },
  { text: "Pink marbles", number: 5, n: 2 },
  { text: "Yellow marbles", number: 2, n: 2 },
];

let formatArray = [ ...array.reduce((map, curr) => map.set(curr.n, { ...(map.get(curr.n) ?? {}), [curr.text]: curr.number }), new Map()).values()];

console.log(formatArray);

uj5u.com熱心網友回復：

嘗試使用該reduce方法回傳一個包含您想要的值的新陣列。

let array = [
  { text: "Green marbles", number: 10, n: 1 },
  { text: "Pink marbles", number: 5, n: 1 },
  { text: "Yellow marbles", number: 2, n: 1 },
  { text: "Green marbles", number: 10, n: 2 },
  { text: "Pink marbles", number: 5, n: 2 },
  { text: "Yellow marbles", number: 2, n: 2 }
]

const formatArray = array.reduce((accum, iter) => {
  const {n, text, number} = iter
  if (accum[n-1] === undefined) accum[n-1] = {}
  accum[n-1].n = n
  accum[n-1][text] = number
  return accum
}, [])

console.log(formatArray)

我正在使用 將[]鍵設定為迭代器的值之一。我還讓n值設定迭代器需要添加到哪個物件。

uj5u.com熱心網友回復：

這可以作為“分組依據”處理，n將各種大理石顏色累積到每個分組物件中。

let array = [{ text: "Green marbles", number: 6, n: 1 }, { text: "Pink marbles", number: 3, n: 1 }, { text: "Yellow marbles", number: 2, n: 1 }, { text: "Green marbles", number: 12, n: 2 }, { text: "Pink marbles", number: 7, n: 2 }, { text: "Yellow marbles", number: 1, n: 2 }];

const temp = {};
for (const { n, number, text } of array) {
  if (temp[n] === undefined) temp[n] = { n, "Green marbles": 0, "Pink marbles": 0, "Yellow marbles": 0 };

  temp[n][text]  = number;
}

const result = Object.values(temp);

console.log(result);

如果您提前不確定“大理石顏色”屬性，您可以使其更具活力

let array = [{ text: "Green marbles", number: 6, n: 1 }, { text: "Pink marbles", number: 3, n: 1 }, { text: "Yellow marbles", number: 2, n: 1 }, { text: "Green marbles", number: 12, n: 2 }, { text: "Pink marbles", number: 7, n: 2 }, { text: "Yellow marbles", number: 1, n: 2 }];

const temp = {};
for (const { n, number, text } of array) {
  if (temp[n] === undefined) temp[n] = { n };

  temp[n][text] = (temp[n][text] ?? 0)   number;
}

const result = Object.values(temp);

console.log(result);

或作為reduce()電話

let array = [{ text: "Green marbles", number: 6, n: 1 }, { text: "Pink marbles", number: 3, n: 1 }, { text: "Yellow marbles", number: 2, n: 1 }, { text: "Green marbles", number: 12, n: 2 }, { text: "Pink marbles", number: 7, n: 2 }, { text: "Yellow marbles", number: 1, n: 2 }];

const result = Object.values(
  array.reduce((a, { n, number, text }) =>
    (a[n] = { ...(a[n] ??= { n }), [text]: (a[n][text] ?? 0)   number }, a), {}));

console.log(result);

但似乎您的陣列實際上可能按每x行描述一個新的n.

如果是這種情況，您可以使用一個簡單的for回圈并檢查索引是否可以被x整除。

let array = [{ text: "Green marbles", number: 6, n: 1 }, { text: "Pink marbles", number: 3, n: 1 }, { text: "Yellow marbles", number: 2, n: 1 }, { text: "Green marbles", number: 12, n: 2 }, { text: "Pink marbles", number: 7, n: 2 }, { text: "Yellow marbles", number: 1, n: 2 }];

let
  result = [],
  color_count = 3,
  prev;
for (let i = 0; i < array.length; i  ) {
  const { n, number, text } = array[i];

  if (i % color_count === 0) {
    prev = { n };
    result.push(prev);
  }

  prev[text] = number;
}

console.log(result);

標籤：javascript

上一篇：JavaScript：使用Promises按順序加載影像時的奇怪錯誤

下一篇：單擊獲取id或src以獲取div中的附加影像