如何在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; }