首页 > 解决方案 > 如何在Javascript中将数组值映射到对象内的数组?

问题描述

我有一个对象如下:

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

问题是我必须获取每个数组(arrayOwnerarrayOthers)的第一个值,然后更新数据数组中的第一个对象。

例如,对于第 1 周,将取0 fromarrayOwner和 2 from ,然后在数据数组的第一个对象中更新。arrayOthers

标签: javascriptarraysdictionarydata-structures

解决方案


映射data

您可以简单地使用.map数组的方法进行映射data并更新对象的两个值:ownerothers.

.map方法使用对调用数组中的每个元素调用提供的函数的结果创建一个新数组。

- MDN 网络文档

提供给的回调.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需要修改,不要dataconst. 使用varlet代替。

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.ownertoarrayMods[i][0]e.othersto 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)


推荐阅读