有什么方法可以在 React 或 ES6+ 中排序对象？

Question

我知道在 Javascript 中处理对象很难预测项目的顺序，但是有没有办法按顺序组织一周中的几天，而不是在 React 或 vanilla JS 中按字母顺序排列...

我想知道是否可以像这样采用给定的 React Object 模型：

       this.state = {
            days: {
                friday: {
                     temperature: 34
                 },
                monday: {
                     temperature: 28
                 },
                 tuesday: {
                     temperature: 29
                 }
                 
             }
        }

按天顺序返回，如下所示：

    this.state = {
        days: {
             monday: {
                 temperature: 28
             },
             tuesday: {
                 temperature: 29
             },
             friday: {
                 temperature: 34
             }
             
         }
    }

我很感兴趣，因为我很难相信在不使用数组等的情况下没有开箱即用的方法。

非常感谢您对此的意见/帮助:)

Answer 1

您可以使用Array.prototype.sort 方法解决它。首先对日期进行排序，然后使用Array.prototype.reduce 方法制作您需要的对象。

const data = {
  days: {
    friday: {
      temperature: 34,
    },
    monday: {
      temperature: 28,
    },
    tuesday: {
      temperature: 29,
    },
  },
};
const days = {
  sunday: 1,
  monday: 2,
  tuesday: 3,
  wednesday: 4,
  thursday: 5,
  friday: 6,
  saturday: 7,
};
const ret = Object.keys(data.days)
  .sort((x, y) => days[x] - days[y])
  .reduce(
    (prev, c) => {
      const p = prev;
      p.days = { ...p.days, [c]: data.days[c] };
      return p;
    },
    { days: {} }
  );
console.log(ret);

Answer 2

非数字属性按它们的顺序枚举 已创建

所以要“强制”订单，您可以执行以下操作：

var x = {
  days: {
    sunday: 7,
    monday: 1,
    tuesday: 2,
    wednesday: 3,
    thursday: 4,
    friday: 5,
    saturday: 6
  }
};
const getValues = (o, k) => k.reduce((a, n) => ({ ...a,
  [n]: o[n]
}), {});

console.log(x.days);

x.days = getValues(x.days, ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']);

console.log(x.days);

但是，依赖对象中键的顺序可能永远不是一个好主意 - 重构访问对象的代码以按照您想要的定义顺序访问键

var x = {
  days: {
    sunday: 7,
    monday: 1,
    tuesday: 2,
    wednesday: 3,
    thursday: 4,
    friday: 5,
    saturday: 6
  }
};
['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
.forEach(k => 
    console.log(k, x.days[k])
);

Answer 3

您只需更改您的价值结构并在此处遵循此代码

let mystate = {
    days : [
    {
      day: 'friday',
      temperature: 34
    },
    {
      day: 'monday',
      temperature: 28
    },
    {
      day:'tuesday',
      temperature: 29
    }
  ]
};

console.log(mystate.days.sort((a,b)=>a.temperature-b.temperature))