我有以下資料，我想用 Javascript 制作一個新的陣列陣列，如下所示。我嘗試回圈兩次，但無法獲得理想的結果。
data: (5) [{…}, {…}, {…}, {…}, {…}]
// above data contains below:
[{
id: 1,
productName: "Tacos",
? productData:
[ { status: 1, ready: 85, total: 262},
{ status: 2, ready: 59, total: 16},?
{ status: 3, ready: 67, total: 168},?
{ status: 4, ready: 42, total: 301},
{ status: 5, ready: 10, total: 266},
{ status: 6, ready: 56, total: 220},
{ status: 7, ready: 28, total: 173}] },
{
id: 2?,
productName: "Poke",
? productData:
[ { status: 1, ready: 85, total: 300},
{ status: 2, ready: 59, total: 150},
? { status: 3, ready: 67, total: 93},
{ status: 4, ready: 42, total: 173},
{ status: 5, ready: 10, total: 266},
{ status: 6, ready: 56, total: 98},
{ status: 7, ready: 28, total: 121}] },
{
id: 3?
productName: "Sandwich",
? productData:
[ { status: 1, ready: 85, total: 141},
{ status: 2, ready: 59, total: 230},
? { status: 3, ready: 67, total: 155},
? { status: 4, ready: 42, total: 167},
{ status: 5, ready: 10, total: 98},
{ status: 6, ready: 56, total: 145},
{ status: 7, ready: 28, total: 123}]
},
{
id: 4
productName: “Burrito”,
? productData:
[ { status: 1, ready: 85, total: 45},
{ status: 2, ready: 59, total: 62},
? { status: 3, ready: 67, total: 77},
? { status: 4, ready: 42, total: 21},
{ status: 5, ready: 10, total: 33},
{ status: 6, ready: 56, total: 85},
{ status: 7, ready: 28, total: 35}]
},
{
id: 5?
productName: “Gyoza”,
? productData:
[ { status: 1, ready: 85, total: 88},
{ status: 2, ready: 59, total: 83},
? { status: 3, ready: 67, total: 103},
? { status: 4, ready: 42, total: 98},
{ status: 5, ready: 10, total: 99},
{ status: 6, ready: 56, total: 120},
{ status: 7, ready: 28, total: 96}]
},
]
結果應該是這樣的。陣列陣列，其中每個陣列的數字在 productData 中具有相同的狀態值。
[[262, 300, 141, 45, 88], // All numbers, value of total from status: 1 from each array of productData
[16, 150, 230, 62, 83], // status: 2
[168, 301, 93, 155, 77], // status: 3
...]
先感謝您。
uj5u.com熱心網友回復：
您應該flatMap()與 結合使用reduce()。
const input = [
{
id: 1,
productName: "Tacos",
productData: [
{ status: 1, ready: 85, total: 262 },
{ status: 2, ready: 59, total: 16 },
{ status: 3, ready: 67, total: 168 },
{ status: 4, ready: 42, total: 301 },
{ status: 5, ready: 10, total: 266 },
{ status: 6, ready: 56, total: 220 },
{ status: 7, ready: 28, total: 173 },
],
},
{
id: 2,
productName: "Poke",
productData: [
{ status: 1, ready: 85, total: 300 },
{ status: 2, ready: 59, total: 150 },
{ status: 3, ready: 67, total: 93 },
{ status: 4, ready: 42, total: 173 },
{ status: 5, ready: 10, total: 266 },
{ status: 6, ready: 56, total: 98 },
{ status: 7, ready: 28, total: 121 },
],
},
{
id: 3,
productName: "Sandwich",
productData: [
{ status: 1, ready: 85, total: 141 },
{ status: 2, ready: 59, total: 230 },
{ status: 3, ready: 67, total: 155 },
{ status: 4, ready: 42, total: 167 },
{ status: 5, ready: 10, total: 98 },
{ status: 6, ready: 56, total: 145 },
{ status: 7, ready: 28, total: 123 },
],
},
{
id: 4,
productName: "Burrito",
productData: [
{ status: 1, ready: 85, total: 45 },
{ status: 2, ready: 59, total: 62 },
{ status: 3, ready: 67, total: 77 },
{ status: 4, ready: 42, total: 21 },
{ status: 5, ready: 10, total: 33 },
{ status: 6, ready: 56, total: 85 },
{ status: 7, ready: 28, total: 35 },
],
},
{
id: 5,
productName: "Gyoza",
productData: [
{ status: 1, ready: 85, total: 88 },
{ status: 2, ready: 59, total: 83 },
{ status: 3, ready: 67, total: 103 },
{ status: 4, ready: 42, total: 98 },
{ status: 5, ready: 10, total: 99 },
{ status: 6, ready: 56, total: 120 },
{ status: 7, ready: 28, total: 96 },
],
},
];
const output = input
.flatMap((it) => it.productData)
.reduce((allStatus, curStatus) => {
allStatus[curStatus.status]
? allStatus[curStatus.status].push(curStatus.total)
: (allStatus[curStatus.status] = [curStatus.total]);
return allStatus;
}, {});
console.log(Object.values(output));首先我們將陣列展平，所以我們得到一個包含 all 的巨大陣列productData：
const flattened = input.flatMap((it) => it.productData);
之后reduce()將使用帶有 的 JavaScript 物件status作為鍵來收集所有具有相同狀態的值。我們從一個空物件開始，檢查每個元素是否已經遇到過該狀態。如果沒有，我們創建一個包含此元素total值的陣列。如果我們只有push()該陣列的另一個值。
最后但同樣重要的是，我們只需要獲取 JavaScript 物件的值，因為我們對鍵不感興趣。這可以使用Object.values().
// flatten array
const flattened = input.flatMap((it) => it.productData);
// reduce values based on status
const output = flattened.reduce((allStatus, curStatus) => {
allStatus[curStatus.status]
? allStatus[curStatus.status].push(curStatus.total)
: (allStatus[curStatus.status] = [curStatus.total]);
return allStatus;
}, {});
// get values of JS object
console.log(Object.values(output));
uj5u.com熱心網友回復：
這可以通過將各個值映射為子陣列然后“壓縮”結果來實作。
const input = [{ id: 1, productName: "Tacos", productData: [{ status: 1, ready: 85, total: 262 }, { status: 2, ready: 59, total: 16 }, { status: 3, ready: 67, total: 168 }, { status: 4, ready: 42, total: 301 }, { status: 5, ready: 10, total: 266 }, { status: 6, ready: 56, total: 220 }, { status: 7, ready: 28, total: 173 },], }, { id: 2, productName: "Poke", productData: [{ status: 1, ready: 85, total: 300 }, { status: 2, ready: 59, total: 150 }, { status: 3, ready: 67, total: 93 }, { status: 4, ready: 42, total: 173 }, { status: 5, ready: 10, total: 266 }, { status: 6, ready: 56, total: 98 }, { status: 7, ready: 28, total: 121 },], }, { id: 3, productName: "Sandwich", productData: [{ status: 1, ready: 85, total: 141 }, { status: 2, ready: 59, total: 230 }, { status: 3, ready: 67, total: 155 }, { status: 4, ready: 42, total: 167 }, { status: 5, ready: 10, total: 98 }, { status: 6, ready: 56, total: 145 }, { status: 7, ready: 28, total: 123 },], }, { id: 4, productName: "Burrito", productData: [{ status: 1, ready: 85, total: 45 }, { status: 2, ready: 59, total: 62 }, { status: 3, ready: 67, total: 77 }, { status: 4, ready: 42, total: 21 }, { status: 5, ready: 10, total: 33 }, { status: 6, ready: 56, total: 85 }, { status: 7, ready: 28, total: 35 },], }, { id: 5, productName: "Gyoza", productData: [{ status: 1, ready: 85, total: 88 }, { status: 2, ready: 59, total: 83 }, { status: 3, ready: 67, total: 103 }, { status: 4, ready: 42, total: 98 }, { status: 5, ready: 10, total: 99 }, { status: 6, ready: 56, total: 120 }, { status: 7, ready: 28, total: 96 },], },];
// map single values
const productTotals = input.map(({ productData }) => productData.map(({ total }) => total));
// zip
const result = productTotals[0].map((_, i) => productTotals.map(ts => ts[i]))
console.log(result)請參閱：從物件陣列中提取屬性值作為陣列和Javascript 等效的 Python zip 函式，以進一步討論這兩種操作。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/463761.html
標籤：javascript 数组 打字稿 算法 目的
上一篇：有效計算復雜形狀的輪廓
下一篇：按特定順序對陣列進行排序