4
votes

Destructuration des objets d'un tableau à l'aide de la carte?

J'ai écrit ce code simple qui déstructure un tableau d'objets pour construire de nouveaux tableaux à partir de chaque clé. J'apprends l'ES6 et j'aimerais le refactoriser en une seule ligne de code en utilisant la déstructuration, mais je ne comprends pas trop comment.

let [open, high, low, close, volume] = candles.map(key => key.value);

Je pense que cela devrait ressembler à quelque chose du genre?

let candles = [{
  open: 1,
  high: 2,
  low: 0.5,
  close: 1.5,
  volume: 200
}];
let open = candles.map(x => x.open);
let high = candles.map(x => x.high);
let low = candles.map(x => x.low);
let close = candles.map(x => x.close);
let volume = candles.map(x => x.volume);

console.log(open, high, low, close, volume);

Mais c'est clairement faux! Merci de votre aide si quelqu'un peut m'indiquer la bonne manière de faire cela!

javascript ecmascript-6

9 commentaires

Vous mappez des tableaux à des tableaux de tableaux dans le premier extrait

Certains exemples avant et après d'exemples de données aideraient grandement à expliquer ce que vous essayez de faire, mais pour autant que je sache, vous ne pourrez pas le faire avec une seule ligne

Ah ok. Cela pourrait expliquer pourquoi. Mais voici quelques exemples de données. [{open, high, low, close, volume}, {open, high, low, close, volume}, ...] Je cherche à convertir cet objet de tableaux en un tableau séparé de toutes les ouvertures, haut, bas, fermer, volume. Ils vivent donc chacun dans leur propre rang après. @ Li357 bougies est en fait un tableau avec des objets.

Comme indiqué par li357, avec l'extrait de code en cours d'exécution, vous pouvez voir comment vous créez des tableaux de tableaux, etc.

J'ai pris la liberté de créer des données dans l'édition - veuillez corriger l'extrait si nécessaire afin que nous comprenions vos besoins.

let candles = [{open: 1, high: 2, low: 0.5, close: 1.5, volume: 200}]; laissez ouvert = candles.map (x => x.open); laissez haut = bougies.map (x => x.high); let low = candles.map (x => x.low); laissez fermer = bougies.map (x => x.close); let volume = candles.map (x => x.volume);

Excellent - modifiez votre question pour changer l'extrait de code pour refléter cela. Cela fournira un tableau avec chaque ouverture, chaque fermeture, etc. comme vous le souhaitez. alors nous pouvons travailler sur la déstructuration.

"Quelques exemples avant ET APRÈS ..." vous n'avez abordé que la première moitié

Qu'est-ce qu'une entrée complète et un résultat attendu complet?

3 Réponses :

0
votes

let candles = [ {
  open: 1,
  high: 2,
  low: 0.5,
  close: 1.5,
  volume: 200
} ]

const { open, high, low, close, volume } = candles.reduce( ( accumulator, item ) => {
    Object.keys( item ).forEach( key => {
        accumulator[ key ] = ( accumulator[ key ] || [] ).concat( item[ key ] ) 
    } )
    return accumulator
}, {} )

0 commentaires

2
votes

Voici une solution utilisant Array.prototype.reduce():

const candles = [{open: 1, close: 2, low: 3, high: 4, volume: 5}, {open: 6, close: 7, low: 8, high: 9, volume: 10}];

const result = candles.reduce((a, v) => {
  Object.keys(v).forEach(k => (a[k] = a[k] || []).push(v[k]));
  return a;
}, {});

console.log(result);

0 commentaires

0
votes

Vous devez donc commencer par réduire et renvoyer un objet. Ensuite, vous pouvez utiliser la déstructuration sur cela. Voici un exemple:

const candles = [{
  open: 1,
  high: 2,
  low: 0.5,
  close: 1.5,
  volume: 200
}, {
  open: 2,
  high: 3,
  low: 0.6,
  close: 1.4,
  volume: 300
}];

const reduction = candles.reduce((acc, candle) => {
  for (let key in candle) {
    if (!(key in acc)) {
      acc[key] = [];
    }

    acc[key].push(candle[key]);
  }

  return acc;
}, {});

console.log(reduction);
// { open: [ 1, 2 ],
//   high: [ 2, 3 ],
//   low: [ 0.5, 0.6 ],
//   close: [ 1.5, 1.4 ],
//   volume: [ 200, 300 ] }

const {open, high, low, close, volume} = reduction;

console.log(open, high, low, close, volume);
// [ 1, 2 ] [ 2, 3 ] [ 0.5, 0.6 ] [ 1.5, 1.4 ] [ 200, 300 ]

2 commentaires

FYI: La réponse d'Hugo Silva est la même technique. J'ai cassé le mien un peu pour être plus facile à comprendre ce qui se passe.

Je vous remercie! Je trouve difficile de travailler avec des objets dans es6.