
js 数据转换:从混乱到有序
在实际开发中,我们经常需要处理不同结构的数据,将它们转换为更加便于操作和展示的形式。下面介绍一种优雅的数据转换方法,将一个按照 age 分组的人员列表,转换为一个包含多个 age 组,每个组包含姓名列表的目标数据结构。
原始数据
let arr = [
{ name: '张三', age: 1 },
{ name: '李四', age: 1 },
{ name: '小红', age: 3 },
{ name: '明明', age: 3 },
{ name: '兰兰', age: 3 },
{ name: '红红', age: 4 },
{ name: '刘明', age: 4 },
{ name: '王五', age: 8 },
{ name: '麻子', age: 8 },
{ name: '瘸子', age: 8 },
];
登录后复制
目标数据
targetArr = [
{ 1: '张三', 3: '小红', 4: '红红', 8: '王五' },
{ 1: '李四', 3: '明明', 4: '刘明', 8: '麻子' },
{ 1: '', 3: '兰兰', 4: '', 8: '瘸子' },
];
登录后复制
转换代码
// 1. 初始化目标数据结构
let temp = {};
arr.forEach(item => {
if (!temp[item.age]) {
temp[item.age] = [];
}
temp[item.age].push(item.name);
});
// 2. 转换数据
let targetArr = [];
Object.values(temp).forEach(value => {
value.forEach((name, index) => {
if (!targetArr[index]) {
targetArr[index] = {};
}
Object.keys(temp).forEach(key => {
if (key in targetArr[index]) {
return;
}
targetArr[index][key] = '';
});
targetArr[index][Object.keys(temp).find(key => temp[key] === value)] = name;
});
});
登录后复制
代码详解
- 步骤 1: 初始化目标数据结构。使用一个临时对象 temp 存储每个 age 组的姓名列表。
- 步骤 2: 转换数据。遍历 temp 对象,为每个 age 组生成一个目标对象,并分别为每个 age 赋值对应的姓名。
转换结果
console.log(targetArr);
登录后复制
输出结果与目标数据一致:
[
{ 1: '张三', 3: '小红', 4: '红红', 8: '王五' },
{ 1: '李四', 3: '明明', 4: '刘明', 8: '麻子' },
{ 1: '', 3: '兰兰', 4: '', 8: '瘸子' },
]
登录后复制
以上就是如何将按照年龄分组的人员列表转换为包含多个年龄组的姓名列表?的详细内容,更多请关注米云其它相关文章!
