vue中，每一秒一个data，如何保存所有data，并一次只要8条数据？

Question

在监听里每一秒会返回一个data，一个data长度有65位，总共大概会返回30个，
我也是每一秒实时都要显示数据,一次显示8位，得按顺序来,然后得考虑到有奇数偶数的情况，假设最终只剩7条(或不足8条)，就7条一起显示

怎么样保留之后的数据并实时截取呢？

举例子↓

uni.$on('getData', (obj) => {
    let data = ['aa','bb','cc','dd','ee','ff']
    // let data = ['hh','ii','jj','kk','ll','mm'] //第二次返回
    //...期待结果↓
    let result = ['aa','bb','cc'] //第一次显示
    // let result = ['dd','ee','ff'] //第二次显示
    // let result = ['hh','ii','jj'] //第三次显示
    // let result = ['kk','ll','mm'] //第四次显示
})

这里可以不看，大伙可以这样理解，服务器每秒会返回给我一段心率波形的data，一段有65个点来组成波形图，总共会发送30秒大概一秒一个data，但我不可能一次显示65个点在图标上，所以每隔8个来裁剪，我也不可能等30秒之后再全部push到一个新data里再来每8位裁剪。现在的问题就是我不知道怎么在data实时更新的情况下，记忆之前裁剪的位置并继续裁剪

小弟在这里先感谢各位大神们，感激不尽，祝大神们发财祝大神们取漂亮老婆

Answer 1

// 可以理解为：
// 1.最后的结果是 [[]] 的数组，二阶数组数量：30
// 2.二阶数组长度 n 个
// 3.不用考虑缓存回收，30秒结束后销毁所有的数据
// 4.单个数组的重新切分为长度为 8 的新的数组
// 5.单数组长度不足8的用 null 补充

const len = 8;
const data = ref([]);
let index = ref(0);

// 切割单个数据
const splitHeart = list => {
    let temp = [];
    const fillLen = len - (list.length % - len);
    list.push(...new Array(fillLen).fill(null));
    list.map((item, index) => {
        const key = Math.floor(index / 8);
        temp[key] = temp[key] || [];
        temp[key].push(item); 
    })

    return temp
} 

// 获取单组数据的时候丢到总的去
const getHeartData = list => {
    list = list || new Array(65).fill(1);
    data.value.push(...splitHeart(list))
}

// 显示到页面的数据
// 按指针来，指针按你自己的需求设计 index
// 或者按你那边预期的规则来
const showData = computed(
    () => data.value[index.value]
)

Answer 2

let allData = [];
let currentIndex = 0;

uni.$on('getData', (obj) => {
   
    allData.push(...obj);

    while (currentIndex + 8 <= allData.length) {
        let result = allData.slice(currentIndex, currentIndex + 8);
        console.log(result); // 这里处理逻辑
        currentIndex += 8;
    }

 
    if (currentIndex < allData.length && allData.length - currentIndex < 8) {
        let result = allData.slice(currentIndex);
        console.log(result); // 这里处理逻辑
        currentIndex = allData.length;
    }
});

Answer 3

bufferCount

import { Subject, Observable } from 'rxjs';

const sub = new Subject();

sub.bufferCount(3)
  // 使用concatMap和delay保证接收到数据后，至少要等待1秒才能接收下一批数据
  .concatMap(data => Observable.of(data).delay(1e3))
  .subscribe((result) => {
    console.log(result);
  });

function onEvent(data) {
  data.forEach(t => sub.next(t));
}

onEvent(['aa','bb','cc','dd','ee','ff']);
onEvent(['hh','ii','jj','kk','ll','mm']);

Answer 4

不要想复杂了，你的问题我理解就是思维固化了，你认为变量只能在监听函数里写，你在外面声明一个数组 arr，然后在函数内部不断往里 push 数据就完事了，不足 8 个补 null。然后在取 arr 时，取完了切割数组就可以了。

const arr = [];
uni.$on('getData', (obj) => {
    let data = obj // 不足 8 个补 null；
    arr.push(...data);
})

// 展示逻辑另外写
show () {
    const arrHalf = arr.splice(0, 删除个数);
}