如何在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 周，将采用来自 arrayOwner 的 0 和来自 arrayOthers 的 2，然后在数据数组的第一个对象中更新。

Answer 1

映射data

您可以简单地使用.map 方法映射您的数组data 并更新对象的两个值：owner 和others。

.map 方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

-MDN web docs

提供给.map 的回调可以接受多个参数：这里我们将使用：

• 当前值：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;
})

上面我使用destructuring assignment 将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

您可以为键和循环获取一个辅助对象和一个数组，同时更新索引。

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; }

Answer 4

您可以使用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;
});