JavaScript：从另一数组中循环动态构建对象

核心思路 #

不再硬编码trd1、trd2这类字段，而是通过动态提取trd开头的键、用对象映射存储对应数据数组的方式，实现任意数量trd项的适配。

优化后的代码 #

const data = {
    "time": {
        "bkts": [
            {
                "timex": "2021-03-01T00:00:00.000Z",
                "bkts": [
                    {
                        "key": "abc",
                        "trd1": { "value": 0.2 },
                        "trd2": { "value": 1.2 }
                        // 可随意添加trd3、trd4等字段
                    }
                ]
            },
            {
                "timex": "2021-02-01T00:00:00.000Z",
                "bkts": [
                    {
                        "key": "xyz",
                        "trd1": { "value": 0.2 },
                        "trd2": { "value": 1.2 }
                    }
                ]
            }
        ]
    }
};

// 1. 从第一个子项提取所有trd开头的字段（假设所有子项结构一致）
const firstSubItem = data.time.bkts[0].bkts[0];
const trdKeys = Object.keys(firstSubItem).filter(key => /^trd\d+$/.test(key));

// 2. 初始化映射对象，存储每个trd对应的数据数组
const trdDataMap = trdKeys.reduce((map, key) => {
    map[key] = [];
    return map;
}, {});

// 3. 遍历外层数据，批量处理每个trd的时间戳和值
data.time.bkts.forEach(val => {
    const timestamp = new Date(val.timex);
    val.bkts.forEach(subVal => {
        trdKeys.forEach(key => {
            const value = subVal[key]?.value;
            if (value !== undefined) {
                trdDataMap[key].push([timestamp, value]);
            }
        });
    });
});

// 4. 把映射对象转换成最终需要的数组格式
const dataArray = trdKeys.map(key => ({
    id: key,
    name: `Trd ${key.replace('trd', '')}`,
    data: trdDataMap[key]
}));

console.log(dataArray);

代码说明 #

• 动态识别trd字段：通过Object.keys配合正则/^trd\d+$/自动筛选所有trd开头的字段，不管新增多少个都能适配。
• 统一存储数据：用对象映射替代多个独立数组变量，结构更简洁，避免重复声明。
• 批量处理逻辑：遍历所有trd键统一处理数据，不用重复编写trd1、trd2这类重复代码。
• 自动生成名称：通过替换trd前缀自动生成Trd 1、Trd 2这类名称，无需手动编写。

内容的提问来源于stack exchange，提问作者orbnexus