Javascript - 根据特定对象选择对象数组中的下一个对象答案

【问题标题】：Javascript - Select next object in array of objects based on a specifc objectJavascript - 根据特定对象选择对象数组中的下一个对象
【发布时间】：2021-10-03 01:31:57
【问题描述】：

我有以下几点：

    currentPhase: {
      endDate: "2030-12-31T09:00:00.000Z"
      startDate: "2021-06-26T11:00:00.000Z"
      status: "ended"
     }

还有一个有更多对象的对象：

    phases: {
        ended: { 
          startDate: "2021-06-26T11:00:00.000Z", 
          endDate: "2030-12-31T09:00:00.000Z"},

        openingSoon: { 
          startDate: "1899-12-31T21:00:00.000Z", 
          endDate: "2021-06-17T09:25:31.000Z" },  
      
        playing: { 
          startDate: "2021-06-15T21:00:00.000Z", 
          endDate: "2021-08-30T21:00:00.000Z" },   
    
        readyToPlay: { 
          startDate: "2021-06-13T11:00:00.000Z", 
          endDate: "2021-06-15T21:00:00.000Z" },  
  
        registrationsOpen: { 
          startDate: "2021-06-07T19:00:00.000Z", 
          endDate: "2021-06-12T17:00:00.000Z" },  
 
        resultsPending: { 
          startDate: "2021-08-30T21:00:00.000Z", 
          endDate: "2021-06-26T11:00:00.000Z" },    
        }

CurrentPhase 会经常变化，每当 CurrentPhase 变化时，我都需要根据 currentPhase 从 phases 中选择下一个阶段。

我尝试的是根据 currentPhase 的 endDate 过滤阶段（因为它不是数组，所以它不起作用），我也可以做的是阶段 [currentPhase.status]，但是我如何检索当前阶段[currentPhase.status] 的索引以便在阶段[currentPhase.status] 之后选择下一个对象以显示它的开始日期？

提前致谢！

【问题讨论】：

标签： javascript reactjs filter filtering indexof

【解决方案1】：

您可以将对象放在一个数组中，并将当前索引存储在另一个变量中。我还添加了让它循环播放，如果这是你需要的，只需删除三元组并使用 Math.max 和 Math.min 代替。

var index = 0;

function next() {
  index = ++index >= phases.length ? 0 : index;
  console.log(phases[index].status);
}

function prev() {
  index = --index <= 0 ? phases.length - 1 : index;
  console.log(phases[index].status);
}

var phases = [{
  startDate: "2021-06-26T11:00:00.000Z",
  endDate: "2030-12-31T09:00:00.000Z",
  status: "ended"
}, {
  startDate: "1899-12-31T21:00:00.000Z",
  endDate: "2021-06-17T09:25:31.000Z",
  status: "openingSoon"
}, {
  startDate: "2021-06-15T21:00:00.000Z",
  endDate: "2021-08-30T21:00:00.000Z",
  status: "playing"
}, {
  startDate: "2021-06-13T11:00:00.000Z",
  endDate: "2021-06-15T21:00:00.000Z",
  status: "readyToPlay"
}, {
  startDate: "2021-06-07T19:00:00.000Z",
  endDate: "2021-06-12T17:00:00.000Z",
  status: "registrationsOpen"
}, {
  startDate: "2021-08-30T21:00:00.000Z",
  endDate: "2021-06-26T11:00:00.000Z",
  status: "resultsPending"
}];

<button onclick="prev()">Previous</button>
<button onclick="next()">Next</button>

编辑将原始对象转换为数组的快速 ES6 方法：

Object.entries(phases).map(([key, value]) => ({ ...value, status: key }));

IE兼容方式：

Object.keys(phases).map(function (key) {
    var oldObject = {}, newObject = {};
    for (var subKey in oldObject) newObject[subKey] = oldObject[subKey];
    newObject.status = key;
    return newObject;
});

【讨论】：

对不起，我现在遇到了困难，我正在从 API 中检索所有数据（阶段，currentPhase），它就是这样，我如何能够将它转换为你的方法？我尝试了多种方法、条目、键、值，但似乎没有一个能正常工作并得到相同的结果。
@ParticleEffect 如果您不关心 IE 支持，您可以使用 Object.entries(phases).map(([key, value]) => ({ ...value, status: key })); 将其转换为该形式。（我也更新了答案）

【解决方案2】：

const phasesStatuses = Object.keys(phases); // Get array of phases statuses
const currentPhaseIndex = phasesStatuses.indexOf(currentPhase.status); // get index of current phase


const nextPhaseStatus = phasesStatuses[currentPhaseIndex + 1]; // get next phase status, which will be the key of next phase in phases array
const nextPhase = phasesStatuses[nextPhaseStatus];

【讨论】：

【解决方案3】：

const currentPhase = {
    endDate: "2030-12-31T09:00:00.000Z",
    startDate: "2021-06-26T11:00:00.000Z",
    status: "ended",
}

const phases = {
    ended: {
        startDate: "2021-06-26T11:00:00.000Z",
        endDate: "2030-12-31T09:00:00.000Z" },
    openingSoon: {
        startDate: "1899-12-31T21:00:00.000Z",
        endDate: "2021-06-17T09:25:31.000Z" },
    playing: {
        startDate: "2021-06-15T21:00:00.000Z",
        endDate: "2021-08-30T21:00:00.000Z" },
    readyToPlay: {
        startDate: "2021-06-13T11:00:00.000Z",
        endDate: "2021-06-15T21:00:00.000Z" },

    registrationsOpen: {
        startDate: "2021-06-07T19:00:00.000Z",
        endDate: "2021-06-12T17:00:00.000Z" },

    resultsPending: {
        startDate: "2021-08-30T21:00:00.000Z",
        endDate: "2021-06-26T11:00:00.000Z" },
}

const phasesList = Object.keys(phases)
const currentPhaseIndex = phasesList.indexOf(currentPhase.status)
const nextPhase = currentPhaseIndex === phasesList.length - 1 ? phasesList[0] : phasesList[currentPhaseIndex + 1]

console.log(nextPhase)

【讨论】：