在javascript中，如何将对象取消移动到第一个块并将最旧的块移动到新块？

我有一些数据，每次从pusher检索到新数据时都必须更新。我正在使用Vue.js进行响应，以防止每次触发事件时都从服务器重新加载所有内容

我需要根据此条件更新阵列

/**
 *
 * 1. prevent each array chunk to store more than 4 items
 *
 * 2. if all chunk is already contains 4 items, create a new chunk,
 * unshift new data and move oldest item to the new chunk.
 *
 * ------------ example ------------
 *
 * *  const beforeUnshift = [
 * *     0 => [7, 6, 5, 4],
 * *     1 => [3, 2, 1, 0]
 * *  ];
 *
 * *  const afterUnshift = [
 * *    0 => [8, 7, 6, 5],
 * *    1 => [4, 3, 2, 1],
 * *    2 => [0]
 * *  ];
 *
 * *  const afterSecondaryUnshift = [
 * *    0 => [9, 8, 7, 6],
 * *    1 => [5, 4, 3, 2],
 * *    2 => [1, 0]
 * *  ];
 *
 * * and so on...
 */

请看一下我的代码，每一页必须显示最多4个数据。它会在触发事件后进行更新，但会一直更新到底部，直到页面刷新为止

<template>
  <div class="table-swipable" style="overflow-x: hidden;">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="flightChunk in chunkedFlights">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th class="pl-0 pr-1 border-0 text-center fit-content">
                  <div class="bg-white shadow rounded cardy-th">Flight No.</div>
                </th>
                <th class="px-1 border-0 text-center">
                  <div class="bg-white shadow rounded cardy-th">Airlines</div>
                </th>
                <th class="px-1 border-0 text-center" colspan="2">
                  <div class="bg-white shadow rounded cardy-th">Destination</div>
                </th>
                <th class="px-1 border-0 text-center" colspan="2">
                  <div class="bg-white shadow rounded cardy-th">Departure / Arrival</div>
                </th>
                <th class="pl-1 pr-0 border-0 text-center">
                  <div class="bg-white shadow rounded cardy-th">Status</div>
                </th>
              </tr>
            </thead>
            <tbody class="font-weight-bold">
              <template v-for="flight in flightChunk">
                <tr class="bg-white shadow fit-content">
                  <td class="border-0 py-4 pl-4 rounded-left">
                    <i class="fas fa-plane text-primary mr-3"></i>
                    #{{ flight.id }}
                  </td>
                  <td class="border-0 py-4 pl-4">{{ flight.airline.name }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.origin.city }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.destination.city }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.departure | removeSecond }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.arrival | removeSecond }}</td>
                  <td
                    class="border-0 py-4 pl-4 text-primary rounded-right text-center"
                  >{{ flight.status ? flight.status : 'Awaiting confirmation' }}</td>
                </tr>
                <tr class="tr-spacer"></tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import moment from "moment";

export default {
  data() {
    return {
      flights: {}
    };
  },
  computed: {
    chunkedFlights() {
      return _.chunk(this.flights.data, 4);
    }
  },
  created() {
    Echo.channel("flight-created").listen("FlightCreated", ({ flights }) => {
      this.chunkedFlights[0].unshift(flights[0]);
      this.$forceUpdate();
    });
  },
  filters: {
    removeSecond(time) {
      if (!time) return "";
      return moment(time).format("hh:mm");
    }
  },
  updated() {
    var tableSwipable = new Swiper(".table-swipable", {
      centeredSlides: true,
      slidesPerView: 1,
      spaceBetween: 60,
      autoplay: {
        delay: 30000
      }
    });
  },
  mounted() {
    axios.get("/flights/public").then(response => {
      this.flights = response.data;
    });
  }
};
</script>

航班号。
航班
目的地
出发/到达
地位
#{{flight.id}
{{flight.airline.name}
{{flight.origin.city}
{{flight.destination.city}
{{航班起飞|移动秒}
{{flight.arrival | removessecond}}
{{flight.status？flight.status:'等待确认'}
从“Swiper”导入Swiper；
从“时刻”中导入时刻；
导出默认值{
数据（）{
返回{
航班：{}
};
},
计算：{
chunkedFlights（）{
返回块（this.flights.data，4）；
}
},
创建（）{
Echo.channel（“FlightCreated”）.listen（“FlightCreated”），（{flights}）=>{
this.chunkedFlights[0].unshift（flights[0]）；
这是.$forceUpdate（）；
});
},
过滤器：{
移动秒（时间）{
如果（！time）返回“”；
返回时刻（时间）。格式（“hh:mm”）；
}
},
更新的（）{
var tableSwipable=newswiper（“.table swipable”{
中心幻灯片：对，
幻灯片视图：1，
间隔：60，
自动播放：{
延误：30000
}
});
},
安装的（）{
获取（“/flights/public”）。然后（响应=>{
this.flights=response.data；
});
}
};

因此，在这种情况下，将数据与视图层分离是有意义的。如果你有一个更新的真相来源，而不是试图直接更新你的信息块，那么处理更新会更容易

---

因此，当您获得更新时，将其取消移位到

this.flights.data

而不是块中，然后让vue重新计算块。这将保留原始的

数据

数组作为真实性的单一来源，并且您每次都会为视图更新其中的数据块。

因此，在这种情况下，将数据与视图层分离是有意义的。如果你有一个更新的真相来源，而不是试图直接更新你的信息块，那么处理更新会更容易

---

因此，当您获得更新时，将其取消移位到

this.flights.data

而不是块中，然后让vue重新计算块。这将保留原始的

数据

数组作为唯一的真相来源，并且每次都会更新其中的数据块以供查看。

哦，我看到frodo2975捕捉到您正在将数据转换为计算值而不是数据。我没注意到。这符合您的意愿：

newvue({
el:“#应用程序”，
数据：{
航班：[
7, 6, 5, 4, 3, 2, 1, 0
]
},
计算：{
chunkedFlights（）{
返回块（this.flights，4）；
}
},
安装的（）{
设置超时（（）=>{
这个。航班。取消航班（8）；
}, 2000);
}
});
#应用程序{
显示：网格；
网格间距：2rem；
背景色：黑色；
填充：0.6rem；
}
.第页{
背景色：#ffe；
填充：0.6rem；
网格间距：0.2rem；
显示：网格；
}
.行{
背景颜色：蓝色；
颜色：白色；
填充：0.6rem；
}

{{flight}}
噢，我看到frodo2975捕捉到您正在反转换为计算值，而不是数据。我没注意到。这符合您的意愿：


newvue({
el:“#应用程序”，
数据：{
航班：[
7, 6, 5, 4, 3, 2, 1, 0
]
},
计算：{
chunkedFlights（）{
返回块（this.flights，4）；
}
},
安装的（）{
设置超时（（）=>{
这个。航班。取消航班（8）；
}, 2000);
}
});
#应用程序{
显示：网格；
网格间距：2rem；
背景色：黑色；
填充：0.6rem；
}
.第页{
背景色：#ffe；
填充：0.6rem；
网格间距：0.2rem；
显示：网格；
}
.行{
背景颜色：蓝色；
颜色：白色；
填充：0.6rem；
}

{{flight}}
我不理解您对问题的描述。你预计会发生什么，现在又发生了什么？嗯。。。这有点难以解释。。我的页面有表格，每个表格都是可滑动的，我需要在每张幻灯片上显示最多4个数据。当一个新航班存储到数据库中时，它必须显示在第一个数据块内的第一个索引上，但保持它显示4个数据，而不是5个数据。请查看带有图片的详细信息。您可能需要显示显示页面的HTML。@RoyJ好的，那么，我将更新我的问题：）我不理解您对问题的描述。你预计会发生什么，现在又发生了什么？嗯。。。这有点难以解释。。我的页面有表格，每个表格都是可滑动的，我需要在每张幻灯片上显示最多4个数据。当一个新航班存储到数据库中时，它必须显示在第一个数据块内的第一个索引上，但保持它显示4个数据，而不是5个数据。请用图片查看详细信息。您可能需要显示显示页面的HTML。@RoyJ好的，那么，我将更新我的问题：）omg。。你的解决方案有效