如何通过ID关联数组，将加密货币24h涨跌幅合并到新数组？

现有数据结构 #

• 加密货币24小时涨跌幅数组：

[{id:'bitcoin', change:-5.5}]

• 加密货币基础信息数组：

[{
    id: 'bitcoin',
    symbol: 'BTC',
    name: 'Bitcoin',
    img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
    addr: '0xECe365B379E1dD183B20fc5f022230C044d51404'
}]

当前已实现的代码 #

已通过循环调用getPrice接口获取实时价格，生成包含实时价格的transformedAssets数组：

for (let i = 0; i < this.assets.length; i++) {
    coinValue = await getPrice(this.assets[i].addr);
    this.transformedAssets.push({
        id: this.assets[i].id,
        symbol: this.assets[i].symbol,
        name: this.assets[i].name,
        img: this.assets[i].img,
        addr: this.assets[i].addr,
        value: numberWithCommas(coinValue)
    });
}

遇到的问题 #

尝试通过共同id将涨跌幅数据合并到transformedAssets时代码失效，原错误代码：

for (let i = 0; i < this.assets.length; i++) {
    coinValue = await getPrice(this.assets[i].addr);
    const price_change_percentage_24h = JSON.parse(JSON.stringify(this.coinPerfomance[0].change));
    window.console.log(price_change_percentage_24h);
    this.transformedAssets.push({
        id: this.assets[i].id,
        symbol: this.assets[i].symbol,
        name: this.assets[i].name,
        img: this.assets[i].img,
        addr: this.assets[i].addr,
        daychange: this.coinPerfomance[this.assets[i].id].change,
        value: numberWithCommas(coinValue)
    });
}

解决方案 #

错误核心是：coinPerfomance是数组而非对象，无法直接通过id作为键访问元素。以下是两种可行实现方式：

方法1：将涨跌幅数组转为映射对象（推荐，提升查找效率） #

先把涨跌幅数组转换为以id为键的映射对象，后续循环直接通过id快速取值：

// 生成{id: change}格式的映射对象
const changeMap = this.coinPerfomance.reduce((map, item) => {
    map[item.id] = item.change;
    return map;
}, {});

// 循环生成带涨跌幅的资产数组
for (let i = 0; i < this.assets.length; i++) {
    const asset = this.assets[i];
    const coinValue = await getPrice(asset.addr);
    this.transformedAssets.push({
        ...asset, // 直接解构基础信息，简化代码
        value: numberWithCommas(coinValue),
        daychange: changeMap[asset.id] || 0 // 无对应数据时默认设为0，避免undefined
    });
}

方法2：循环内直接查找对应涨跌幅元素 #

若不想转换映射对象，可在每次循环中用find方法匹配对应id的涨跌幅数据：

for (let i = 0; i < this.assets.length; i++) {
    const asset = this.assets[i];
    const coinValue = await getPrice(asset.addr);
    // 查找当前资产对应的涨跌幅条目
    const perfItem = this.coinPerfomance.find(item => item.id === asset.id);
    this.transformedAssets.push({
        ...asset,
        value: numberWithCommas(coinValue),
        daychange: perfItem ? perfItem.change : 0 // 处理无匹配数据的情况
    });
}

关键说明 #

• 原代码中this.coinPerfomance[this.assets[i].id]的写法错误，数组只能通过索引访问，不能直接用id作为键。
• 映射对象方式的查找效率为O(1)，比每次find的O(n)更适合数据量较大的场景。
• 添加默认值0是为了避免部分资产无对应涨跌幅数据时，daychange出现undefined。

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