如何將 [{ id:1, var1:val1, var2:val2, varX:[time1, time2, time3]}] 與 [{id:1, var1:val1, var2:val2, varX1:time1, varX2:time2 , varX3:time3}]

Question

我正在研究標題上顯示的數據格式轉換，但我不知道如何弄清楚。 我試圖編寫打擊代碼來為第二維數組添加變量名：

const data = [
  { id: 1, var1: 'val1', var2: 'val2', varX: ['time1', 'time2', 'time3'] },
  { id: 2, var1: 'val2', var2: 'val3', varX: ['time4', 'time5', 'time6'] },
];

const test = data.map((o) => o.varX);

for (i = 0; i < test.length; i++) {
  const test2 = test[i].reduce((res, cur, idx) => {
    res[`varX${idx}`] = cur;
    return res;
  }, {});
  console.log(test2);
}

但我預期的結果應該是：

[{id:1, var1:val1, var2:val2, varX1:time1, varX2:time2, varX3:time3},{id:2, var1:val2, var2:val3, varX1:time4, varX2:time5, varX3:time6}]

誰能指導我如何轉換數據？

Answer 1

由於test中的第一個 map ，您只對varX的值進行操作。 您只需添加另一個操作即可將原始data[i]對象與新的簡化varX對象合並。

 const data = [ { id: 1, var1: 'val1', var2: 'val2', varX: ['time1', 'time2', 'time3'] }, { id: 2, var1: 'val2', var2: 'val3', varX: ['time4', 'time5', 'time6'] }, ]; const test = data.map((o) => o.varX); for (i = 0; i < test.length; i++) { const test2 = test[i].reduce((res, cur, idx) => { res[`varX${idx}`] = cur; return res; }, {}); // exclude varX and merge your new varX${i} back into data[i] const {varX, ...test3} = Object.assign(data[i], test2); console.log(test3); }

轉換就地代碼。 我故意避免減少，因為語法變得不那么可讀並且它增加了性能開銷。 缺點是這段代碼會改變原始data （就地轉換數據）。 可以通過在映射時創建對象val的副本來輕松緩解。

 [1,2,3,4,5,6].forEach( i => eval(`time${i} = "time${i}";val${i} = "val${i}"`) ); const data = [{id:1, var1:val1, var2:val2, varX:[time1, time2, time3]}, {id:2, var1:val2, var2:val3, varX:[time4, time5, time6]}] data.forEach((val, i)=>{ val.varX.forEach( (X,i) => val[`varX${i}`]=X ); delete val.varX; console.log(val); return val; }); console.log(data);

我在下面使用 reduce 和 spread 語法創建了一個版本。 您可以將擴展語法視為將屬性復制到正在生成的新 object 的簡單操作。 我使用解構語法將varX與屬性的 rest 隔離，並將它們放在varX和noVarX中。

除了數據中最終的外部引用對象之外，這還具有深度復制的優點。

 [1,2,3,4,5,6].forEach( i => eval(`time${i} = "time${i}";val${i} = "val${i}"`) ); const data = [{id:1, var1:val1, var2:val2, varX:[time1, time2, time3]}, {id:2, var1:val2, var2:val3, varX:[time4, time5, time6]}] const expanded = data.map(val => { const {varX, ...noVarX} = val; return {...noVarX, ...varX.reduce( (res, cur, idx) => ({...res, [`varX${idx}`]: cur }), {}) }; }); console.log(expanded);

Answer 2

您的代碼的問題是您通過僅映射具有varX的值從data中提取不是varX的屬性。 然后您在減少它們方面做得很好，但是您必須將“剩余”屬性合並到新的 object 中，這對我來說聽起來有點麻煩。 相反，您可以執行以下操作：

 const data = [ { id: 1, var1: "val1", var2: "val2", varX: ["time1", "time2", "time3"] }, { id: 2, var1: "val2", var2: "val3", varX: ["time4", "time5", "time6"] }, ]; const test = data.map((o) => { return Object.entries(o).reduce((p, [k, v]) => { if (k === "varX") { for (let index = 0; index < v.length; index++) { p[`varX${index + 1}`] = v[index]; } } else { p[k] = v; } return p; }, {}); }); console.log(test);

首先，您 map 數據對象，然后對於每個 object 減少它們的鍵/值對並檢查屬性是否為varX ，如果是，則遍歷數組並分配給新的varX${index + 1}因為您希望第一個屬性是varX1 ，否則您只需保留相同的鍵/值對。

Answer 3

在通過第二個map()方法將varX替換為這個新的 object 之后，您需要在reduce方法中創建對象而不是數組

 const data = [{'id':1, 'var1':'val1', 'var2':'val2', 'varX':['time1', 'time2', 'time3']}, {'id':2, 'var1':'val2', 'var2':'val3', 'varX':['time4', 'time5', 'time6']}] const test = data.map(item => item.varX); const test2 = {} for (i = 0; i < test.length; i++) { test2[i] = test[i].reduce((accum, item, index) => { return {...accum, [`varX${index}`]: item}; }, {}); } const dataX = data.map((item, index) => { delete item.varX return {...item, ...test2[index] } }); console.log(dataX)