1
votes

Existe-t-il un moyen de commander l'ordre des objets dans React ou ES6 +?

Je sais que traiter des objets en Javascript est difficile de prédire l'ordre des éléments, mais y a-t-il un moyen d'organiser les jours de la semaine dans l'ordre, et non pas pour qu'ils soient alphabétiques dans React ou vanilla JS ...

Je veux savoir s'il est possible de prendre un modèle d'objet React donné comme ceci:

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

Pour revenir dans l'ordre du jour, comme ceci:

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

Je suis intrigué car j'ai du mal à croire qu'il n'y a pas de solution prête à l'emploi, sans utiliser de tableaux, etc.

Merci beaucoup pour votre avis / aide à ce sujet :)

javascript reactjs object

2 commentaires

les propriétés non numériques étaient (peuvent avoir changé) classées par ordre en cas de création ... ie var x = {}; x.sunday = 1; x.monday =1; x.tuesday=1; console.log(Object.keys(x)); ... je pense que les clés d'objet sortiraient dans cet ordre

Est-ce que cela répond à votre question? Trier les objets JavaScript par clé

3 Réponses :

2
votes

Les propriétés non numériques sont énumérées dans l'ordre dans lequel elles sont créées

Donc, pour "forcer" la commande, vous pouvez faire quelque chose comme:

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])
);

Cependant, ce n'est probablement jamais une bonne idée de dépendre de l'ordre des clés dans un objet - refactoriser le code qui accède à l'objet pour accéder aux clés dans l'ordre défini que vous voulez

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);

0 commentaires

1
votes

Vous changez simplement votre structure de valeur et suivez ce code ici

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))

1 commentaires

suivez également ce lien pour obtenir de l'aide: codesandbox.io/s/winter-morning-ijb44 , developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

2
votes

Vous pouvez le résoudre en utilisant la méthode Array.prototype.sort . Array.prototype.reduce abord les jours, puis utilisez la méthode Array.prototype.reduce pour créer l'objet requis.

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);

0 commentaires

Existe-t-il un moyen de commander l'ordre des objets dans React ou ES6 +?

Vous changez simplement votre structure de valeur et suivez ce code icilet 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))

Vous changez simplement votre structure de valeur et suivez ce code ici
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))