這篇文章主要介紹了如何使用JS將聊天記錄聚合在一起，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新新互聯(lián)，憑借10多年的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作經(jīng)驗(yàn)，本著真心·誠(chéng)心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有1000多家案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)建站。

實(shí)現(xiàn)思路

先跟大家看下我的數(shù)據(jù)，如下所示：

[{  "createTime": "2020-12-21 20:58:19",  "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg",  "msgId": "121710f399b84322bdecc238199d6888",  "msgText": "/壞笑/",  "userName": "神奇的程序員",  "userId": "c04618bab36146e3a9d3b411e7f9eb8f",  "status": false }, {  "createTime": "2020-12-21 20:58:22",  "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg",  "msgId": "121710f399b84322bdecc238199d6888",  "msgText": "還有人嗎",  "userName": "神奇的程序員",  "userId": "c04618bab36146e3a9d3b411e7f9eb8f",  "status": false }, {  "createTime": "2020-12-21 20:58:46",  "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg",  "msgId": "121710f399b84322bdecc238199d6888",  "msgText": "聊天記錄，添加了消息發(fā)送時(shí)間",  "userName": "神奇的程序員",  "userId": "c04618bab36146e3a9d3b411e7f9eb8f",  "status": false }, {  "createTime": "2020-12-21 20:58:52",  "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg",  "msgId": "121710f399b84322bdecc238199d6888",  "msgText": "現(xiàn)在看起來(lái)就方便多了",  "userName": "神奇的程序員",  "userId": "c04618bab36146e3a9d3b411e7f9eb8f",  "status": false }, {  "createTime": "2020-12-21 21:35:27",  "avatarSrc": "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg",  "msgId": "121710f399b84322bdecc238199d6888",  "msgText": "/壞笑/",  "userName": "神奇的程序員",  "userId": "c04618bab36146e3a9d3b411e7f9eb8f",  "status": false }]

觀察上方數(shù)據(jù)，我們發(fā)現(xiàn)：每個(gè)消息對(duì)象都有一個(gè)createTime屬性，它是消息的發(fā)送時(shí)間，精確到了時(shí)分秒，現(xiàn)在我們要做的就是把同一分鐘的時(shí)間只保留一個(gè)createTime屬性，渲染時(shí)間的時(shí)候只渲染擁有createTime屬性的對(duì)象，這樣就做到了將相同分鐘的數(shù)據(jù)渲染到了一起。

大體思路就是這樣，接下來(lái)我們看下具體的思路：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 聲明一個(gè)對(duì)象命名為timeObj，存放消息對(duì)象里createTime字段的年-月-日  時(shí):分，聲明一個(gè)新的消息記錄數(shù)組finalTextList存放處理好的數(shù)據(jù)

3. 遍歷消息記錄數(shù)組，獲取當(dāng)前遍歷到的消息記錄對(duì)象

4. 獲取遍歷到的消息記錄對(duì)象的createTime屬性，截取 年-月-日 時(shí):分，聲明一個(gè)變量time來(lái)保存

5. 判斷time是否存在于timeObj中

6. 如果存在就刪除遍歷到的消息記錄對(duì)象中的createTime屬性，將刪除屬性后的消息記錄對(duì)象放進(jìn)finalTextList中

7. 否則將time作為屬性放進(jìn)timeObj中，將遍歷到的消息記錄對(duì)象原封不動(dòng)的放進(jìn)finalTextList中

處理好數(shù)據(jù)后，我們?cè)阡秩緯r(shí)判斷當(dāng)前渲染項(xiàng)里是否存在createTime，如果存在就渲染。

實(shí)現(xiàn)過(guò)程

接下來(lái)，我們?cè)谀玫浇涌诜祷氐臄?shù)據(jù)后將其按照上述思路進(jìn)行處理。

處理接口返回的數(shù)據(jù)

如下所示res.data.messageTextList為接口返回的消息記錄列表。

// 消息內(nèi)容列表 const messageTextList: Array = res.data.messageTextList; // 處理好的消息內(nèi)容數(shù)組 const finalTextList: Array = []; // 時(shí)間存放對(duì)象 const timeObj: { [key: string]: boolean } = {}; // 處理消息內(nèi)容列表，同一分鐘的數(shù)據(jù)只保留一個(gè)創(chuàng)建時(shí)間 for (let i = 0; i < messageTextList.length; i++) {     // 消息對(duì)象     const messageObj = messageTextList[i];     // 獲取時(shí)間的 年-月-日 時(shí):分     const time = (messageObj.createTime as string).substring(0, 16);     // timeObj中已經(jīng)存在time，則移除當(dāng)前消息對(duì)象的createTime     if (_.has(timeObj, time)) {         // 移除createTime屬性         _.unset(messageObj, "createTime");         // 將移除createTime屬性的消息對(duì)象放進(jìn)處理好的消息數(shù)組中         finalTextList.push(messageObj);     } else {         // 將time作為key放進(jìn)timeObj中         timeObj[time] = true;         // 原封不動(dòng)的將消息對(duì)象放進(jìn)處理好的消息數(shù)組中         finalTextList.push(messageObj);     } } // 渲染消息列表 this.renderPage(finalTextList, {});

上述代碼中的msgListType為消息記錄對(duì)象的類(lèi)型定義，has為lodash的方法用于判斷對(duì)象中是否包含某個(gè)屬性，unset也為lodash的方法用于移除對(duì)象中的某個(gè)屬性。

處理推送數(shù)據(jù)

收到服務(wù)端推送的數(shù)據(jù)時(shí)，我們要將服務(wù)端推送的消息聚合到已經(jīng)渲染的聊天記錄里，如果不是同一分鐘的消息則渲染新的時(shí)間，因此我們要取出當(dāng)前推送消息的createTime字段，截取年-月-日  時(shí):分判斷其是否在已渲染的消息記錄列表里，如果不存在則原封不動(dòng)的渲染，否則就刪除createTime字段后渲染，代碼如下：

// 接收到服務(wù)端推送的新消息，渲染單個(gè)消息對(duì)象 const thisSenderMessageObj: msgListType = {     msgText: msgObj.msgText,     avatarSrc: msgObj.avatarSrc,     userId: msgObj.userId,     userName: msgObj.userName,     createTime: msgObj?.createTime };  // 找到消息記錄列表中與新消息的同一分鐘的消息，移除新消息的createTime對(duì)象 for (let i = 0; i < this.senderMessageList.length; i++) {     const messageObj: msgListType = this.senderMessageList[i];     // 截取當(dāng)前消息與新消息發(fā)送時(shí)間的 年-月-日 時(shí):分,判斷其是否相等     if (_.isEqual(    messageObj.createTime?.substring(0,16),thisSenderMessageObj.createTime?.substring(0, 16))) {         // 移除新消息的createTime屬性         _.unset(thisSenderMessageObj, "createTime");    } }  // 解析并渲染 this.messageParsing(thisSenderMessageObj);

msgObj為服務(wù)端推送的消息

渲染頁(yè)面

接下來(lái)我們看看頁(yè)面的渲染代碼，如下所示，只渲染對(duì)象中包含createTime屬性的數(shù)據(jù)

    {{ item.createTime.substring(5, 16) }}