javascript - 如何在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];
问题是我必须获取每个数组(arrayOwner
和arrayOthers
)的第一个值,然后更新数据数组中的第一个对象。
例如,对于第 1 周,将取0 fromarrayOwner
和 2 from ,然后在数据数组的第一个对象中更新。arrayOthers
解决方案
映射data
您可以简单地使用.map
数组的方法进行映射data
并更新对象的两个值:owner
和others
.
该
.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
需要修改,不要data
用const
. 使用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
toarrayMods[i][0]
和e.others
to 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)
推荐阅读
- android - 如何在flutter_local_notification中创建无限的id?
- java - 无法在本地主机上运行项目 spring mvc
- bash - Bash 脚本 shell 输入变量
- php - 在类构造函数 wordpress 插件中覆盖操作
- python - 在转发期间使用 BaysianConv2d 时出现运行时错误
- google-apps-script - 如何更改单元格值?
- racket - 如何访问球拍中节点的值?
- c# - .NET Web 部件 | Web 部件管理器 | Web 部件区
- asp.net-core - 如何将 github 机密传递给使用 github 操作部署的 asp.net 核心应用程序?
- unsupervised-learning - 使用 SimCLR 搜索无监督预训练的代码