如何在Javascript中將數組值映射到對象內部的數組？

Question

我有一個對象，如下所示：

const data = [
  {name: 'Week 1', owner: 0, others: 4, amt: 4},
  {name: 'Week 2', owner: 0, others: 7, amt: 7},
  {name: 'Week 3', owner: 0, others: 10, amt: 10},
  {name: 'Week 4', owner: 0, others: 12, amt: 12},
  {name: 'Week 5', owner: 0, others: 3, amt: 3},
  {name: 'Week 6', owner: 0, others: 0, amt: 0},
  {name: 'Week 7', owner: 0, others: 9, amt: 9},
];

我有兩個數組，即：

var arrayOwner = [0,0,0,0,0,0,0];
var arrayOthers = [2,4,3,6,3,8,9];

問題是我必須獲取每個數組的第一個值（ arrayOwner和arrayOthers ），然后更新數據數組內的第一個對象。

例如，對於1周，0從arrayOwner和2從arrayOthers將采取，然后更新在數據陣列的第一個對象。

Answer 1

映射data

您可以簡單地使用.map方法映射數組data並更新對象的兩個值： owner和others 。

.map方法創建一個新數組，其結果是在調用數組中的每個元素上調用提供的函數。

-MDN網站文檔

提供給.map的回調可以使用多個參數：在這里，我們將使用：

• currentValue： e

• 指數： i

這是執行映射的代碼：

const res = data.map((e,i) => {
  e.owner = arrayOwner[i];
  e.others = arrayOthers[i];
  return e
})

完整代碼：

 const data = [ {name: 'Week 1', owner: 0, others: 4, amt: 4}, {name: 'Week 2', owner: 0, others: 7, amt: 7}, {name: 'Week 3', owner: 0, others: 10, amt: 10}, {name: 'Week 4', owner: 0, others: 12, amt: 12}, {name: 'Week 5', owner: 0, others: 3, amt: 3}, {name: 'Week 6', owner: 0, others: 0, amt: 0}, {name: 'Week 7', owner: 0, others: 9, amt: 9}, ]; const arrayOwner = [0,0,0,0,0,0,0]; const arrayOthers = [2,4,3,6,3,8,9]; const res = data.map((e,i) => { e.owner = arrayOwner[i]; e.others = arrayOthers[i]; return e; }) console.log(res) 

---

使用循環

實際上，您可以修改data而不必定義單獨的數組來獲取修改后的數組。 我們將使用.forEach ，給定的回調將與之前的相同：

data.forEach((e,i) => {
  e.owner = arrayOwner[i];
  e.others = arrayOthers[i];
  return e;
});

這里的data需要修改，不要用const定義data 。 使用var或let代替。

 let data = [ {name: 'Week 1', owner: 0, others: 4, amt: 4}, {name: 'Week 2', owner: 0, others: 7, amt: 7}, {name: 'Week 3', owner: 0, others: 10, amt: 10}, {name: 'Week 4', owner: 0, others: 12, amt: 12}, {name: 'Week 5', owner: 0, others: 3, amt: 3}, {name: 'Week 6', owner: 0, others: 0, amt: 0}, {name: 'Week 7', owner: 0, others: 9, amt: 9}, ]; const arrayOwner = [0,0,0,0,0,0,0]; const arrayOthers = [2,4,3,6,3,8,9]; data.forEach((e,i) => { e.owner = arrayOwner[i]; e.others = arrayOthers[i]; return e; }); console.log(data); 

---

關於數據結構的補充說明

如果您想要一個較短的版本，可以為arrayOwners和arrayOthers設置不同的數據結構。 也許將它們放在同一陣列中，而不是：

[arrayOwners[0], arrayOwners[1], ...]

和

[arrayOthers[0], arrayOthers[1], ...]

有：

[ [arrayOwners[0], arrayOthers[0]], [arrayOwners[1], arrayOthers[1]], ... ]

因此，您可以像這樣映射它：

const res = data.map((e,i) => {
  [ e.owner, e.others ] = arrayMods[i]
  return e;
})

上面我使用解構分配將e.owner設置為arrayMods[i][0] ，將e.others為arrayMods[i][1] 。 哪個更方便。

 const data = [ {name: 'Week 1', owner: 0, others: 4, amt: 4}, {name: 'Week 2', owner: 0, others: 7, amt: 7}, {name: 'Week 3', owner: 0, others: 10, amt: 10}, {name: 'Week 4', owner: 0, others: 12, amt: 12}, {name: 'Week 5', owner: 0, others: 3, amt: 3}, {name: 'Week 6', owner: 0, others: 0, amt: 0}, {name: 'Week 7', owner: 0, others: 9, amt: 9}, ]; const arrayMods = [[0,2],[0,4],[0,3],[0,6],[0,3],[0,8],[0,0]]; const res = data.map((e,i) => { [ e.owner, e.others ] = arrayMods[i] return e; }) console.log(res) 

Answer 2

只需嘗試：

data.forEach((item, key) => {
  item.owner = arrayOwner[key];
  item.others = arrayOthers[key];
});

或不直接修改data對象：

const newData = data.map((item, key) => ({
  ...item,
  owner: arrayOwner[key],
  others: arrayOthers[key],
}));

Answer 3

您可以使用Array#map使用arrayOwner和arrayOthers值更新對象

 data.map((obj, key) => {
  data.owner = arrayOwner[key] ; // update current object with value from
  data.other = arrayOthers[key] ; //arrayOwner and arrayOthers
  return data;
});

Answer 4

您可以使用一個輔助對象和一個數組作為鍵並在尊重索引進行更新的同時循環執行。

 const data = [{ name: 'Week 1', owner: 0, others: 4, amt: 4 }, { name: 'Week 2', owner: 0, others: 7, amt: 7 }, { name: 'Week 3', owner: 0, others: 10, amt: 10 }, { name: 'Week 4', owner: 0, others: 12, amt: 12 }, { name: 'Week 5', owner: 0, others: 3, amt: 3 }, { name: 'Week 6', owner: 0, others: 0, amt: 0 }, { name: 'Week 7', owner: 0, others: 9, amt: 9 }], arrayOwner = [0, 0, 0, 0, 0, 0, 0], arrayOthers = [2, 4, 3, 6, 3, 8, 9], update = { owner: arrayOwner, others: arrayOthers }; data.forEach((o, i) => ['owner', 'others'].forEach(k => o[k] = update[k][i])); console.log(data); 

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