使用JS将聊天记录聚合在一起

前言我们在QQ聊天时，同一分钟的聊天记录会显示在一起。我们在发送消息的时候，每条消息的发送时间都会精确到秒，那么他如何实现这些数据按分钟来显示呢？今天在我的开源项目的聊天记录中添加消息发送时间显示的时候，正好遇到了这个问题。起初，我想不通如何处理这些数据。后来经过一番思考，终于想出了一个实现思路，并实现了。这篇文章将我的实现思路和过程分享给大家。欢迎有兴趣的开发者阅读本文。实现思路是先让我看一下我的数据，如下图：[{"createTime":"2020-12-2120:58:19","avatarSrc":"https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg","msgId":"121710f399b84322bdecc238199d6888","msgText":"/坏笑/","userName":"神奇的程序员","userId":"c04618bab36146e3a9d3b411e7f9eb8f","status":false},{"createTime":"2020-12-2120:58:22","avatarSrc":"https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg","msgId":"121710f399b84322bdecc"ms"ms"ms,Text:"还有其他人吗？","userName":"魔术程序员","userId":"c04618bab36146e3a9d3b411e7f9eb8f","status":false},{"createTime":"2020-12-2120:58:46","avatarSrc":"https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg","msgId":"121710f399b84322bdecc238199d6888","msgText":"聊天记录，添加消息发送时间","userName":"魔法程序员","userId":"c04618bab36146e3a9d3b411e7f9eb8f","status":false},{"createTime":"2020-12-2120:58:52","avatarSrc":"https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg","msgId":"121710f398"b843219bdecc238,"msgText":"现在看起来方便多了","userName":"神奇程序员","userId":"c04618bab36146e3a9d3b411e7f9eb8f","status":false},{"createTime":"2020-12-2121:35:27","avatarSrc":"https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg","msgId":"121710f399b84322bdecc238199d6888","msgText":"/坏笑"userName":","userId":"c04618bab36146e3a9d3b411e7f9eb8f","status":false}]观察上面的数据，我们发现每个消息对象都有一个createTime属性，就是消息的发送时间，精确到时分秒，现在我们要做的最重要的是同一分钟只保留一个createTime属性，在渲染时间的时候只渲染有createTime属性的对象，这样同一分钟的数据就可以一起渲染了。总体思路是这样的。接下来看具体思路：声明一个对象timeObj，将年月日：分钟存放在消息对象的createTime字段中，声明一个新的消息记录数组finalTextList存放处理后的数据，遍历消息记录数组，并获取当前遍历的消息记录对象获取遍历的消息记录对象的createTime属性，截取年月日时:分，声明一个变量time保存并判断timeObj中是否存在，如果存在，删除遍历到的消息记录对象中的createTime属性，并将删除该属性后的消息记录对象放入finalTextList中；否则，将时间作为属性放入timeObj中，将遍历的消息记录对象原封不动放入finalTextList中。处理完数据后，我们在渲染时判断当前渲染项是否存在createTime，存在则渲染。实现过程接下来我们拿到接口返回的数据后，按照上面的思路进行处理。处理接口返回的数据如下。res.data.messageTextList为接口返回的消息记录列表。//消息内容列表constmessageTextList:Array=res.data.messageTextList;//处理后的消息内容数组constfinalTextList:Array=[];//时间存储对象consttimeObj:{[key:string]:boolean}={};//处理消息内容列表，同一分钟的数据只保留一次创建时间for(leti=0;i{{item.createTime.substring(5,16)}}