如何在JavaScript中结合.map与.find实现数组匹配及字段计算

问题背景 #

现有以下JavaScript代码，通过.map和.find匹配data中timeInterval.minute的日期部分与flattened子数组第0项相同的元素：

data = [{timeInterval: {minute: '2022-03-17T15:00:00Z'}, volume: 0.05, high: 0.00001255389794727055, low: 0.00001255389794727055, open: '1.255389794727055'},{timeInterval: {minute: '2022-03-17T15:00:00Z'}, volume: 4, high: 0.000013573032220546603, low: 0.000013573032220546603, open: '1.35730322205466'}]
flattened= [['2022-03-17', '00:00:00.000Z', '386.6'], ['2022-03-18', '00:00:00.000Z', '393.5'],['2022-03-19', '00:00:00.000Z', '400']]
let bnb_token_ohlc = data.map(x=>
    {return flattened.find(y=> (x.timeInterval.minute.substring(0, 10))==y[0])}   
)
console.log(bnb_token_ohlc)

当前输出为匹配到的flattened元素数组：

[[ "2022-03-17", "00:00:00.000Z", "386.6" ], [ "2022-03-17", "00:00:00.000Z", "386.6" ]]

现在需要实现：当data.timeInterval.minute的日期部分与flattened[][0]匹配时，取flattened[][2]的数值，分别乘以data中的volume、high、low、open字段，返回更新后的data数组。预期输出示例：

[{timeInterval: {minute: '2022-03-17T15:00:00Z'}, volume: 19.33, high: 0.00485333695, low: 0.00485333695, open: '484.580461'},...]

解决方案 #

优化实现代码 #

const data = [{timeInterval: {minute: '2022-03-17T15:00:00Z'}, volume: 0.05, high: 0.00001255389794727055, low: 0.00001255389794727055, open: '1.255389794727055'},{timeInterval: {minute: '2022-03-17T15:00:00Z'}, volume: 4, high: 0.000013573032220546603, low: 0.000013573032220546603, open: '1.35730322205466'}];
const flattened = [['2022-03-17', '00:00:00.000Z', '386.6'], ['2022-03-18', '00:00:00.000Z', '393.5'],['2022-03-19', '00:00:00.000Z', '400']];

// 把flattened转成日期到乘数的映射，提升查找效率
const dateMultiplierMap = flattened.reduce((map, item) => {
    map[item[0]] = parseFloat(item[2]);
    return map;
}, {});

// 处理data数组，计算更新后的字段
const updatedData = data.map(item => {
    const date = item.timeInterval.minute.substring(0, 10);
    const multiplier = dateMultiplierMap[date];
    
    // 找不到对应乘数时返回原对象，避免NaN
    if (!multiplier) {
        return {...item};
    }
    
    return {
        ...item, // 保留原对象所有字段
        volume: item.volume * multiplier,
        high: item.high * multiplier,
        low: item.low * multiplier,
        open: (parseFloat(item.open) * multiplier).toFixed(7) // 按示例格式控制小数位数，可按需调整
    };
});

console.log(updatedData);

关键说明 #

1. 映射优化：用reduce将flattened转换为{日期: 乘数}的对象，替代每次find遍历数组，数据量大时性能提升明显。
2. 字段计算：
   • volume、high、low直接用原数字乘以乘数；
   • open是字符串类型，先转为数字再计算，最后用toFixed匹配示例的小数格式；
3. 原数据保护：通过扩展运算符...item复制原对象，再覆盖需更新的字段，确保原data数组不被修改；
4. 容错处理：未匹配到对应乘数时返回原对象，避免出现无效的NaN值。

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