JavaScript中如何实现每个城市仅保留最新5条WebSocket推送数据

实现思路 #

首先修正你给出的预期存储结构的语法问题，更合理易操作的结构是以城市名为键、历史数据数组为值的对象，存取效率远高于数组套对象的结构：

// 合理的state结构示例
myData: {
  Newyork: [
    {value:10, time:"13:8"},
    {value:150, time:"13:20"}
  ],
  London: [
    {value:20, time:"13:8"},
    {value:25, time:"13:20"}
  ],
  Sydney: [
    {value:20, time:"13:20"}
  ]
}

完整实现代码 #

// 先浅拷贝当前state的myData，避免直接修改原state（符合React不可变原则）
const currentMyData = {...this.state.myData};

// 遍历本次WebSocket返回的所有数据
res.forEach(item => {
  const { city, value, time } = item;
  // 城市不存在时初始化空历史数组
  if (!currentMyData[city]) {
    currentMyData[city] = [];
  }
  // 插入最新数据到数组末尾
  currentMyData[city].push({value, time});
  // 超过5条时删除最早的1条，始终保留最近5条数据
  if (currentMyData[city].length > 5) {
    currentMyData[city].shift();
  }
})

// 更新state
this.setState({ myData: currentMyData });

后续要取指定城市的历史数据直接调用this.state.myData['城市名']即可拿到对应数组，可直接传入图表组件使用。

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