web-dev-qa-db-fra.com

Tableau destructeur d'objets dans es6

Dans es6, comment simplifier les lignes suivantes en utilisant la déstructuration?:

const array0 = someArray[0].data;
const array1 = someArray[1].data;
const array2 = someArray[2].data;
javascriptecmascript-6destructuring
8
ssss

Que l'utilisation de la déstructuration soit en réalité une simplification est discutable, mais voici comment cela peut être fait:

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

Exemple en direct:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

console.log(array0, array1, array2);

Ce qui se passe, c'est que vous extrayez d'abord chaque objet de someArray puis déstructurez chaque objet en extrayant la propriété data et en la renommant:

// these 2 destructuring steps
const [ obj1, obj2, obj3 ] = someArray // step 1
const { data: array0 } = obj1 // step 2
const { data: array1 } = obj2 // step 2
const { data: array2 } = obj3 // step 2

// written together give
const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

Peut-être combiner la déstructuration avec le mappage pour un code (potentiellement) plus lisible:

const [array0, array1, array2] = someArray.map(item => item.data)

Exemple en direct:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [array0, array1, array2] = someArray.map(item => item.data)

console.log(array0, array1, array2);
23
nem035

Je crois que ce que tu veux vraiment c'est

const array = someArray.map(x => x.data)

Si vous voulez vraiment trois variables (Astuce: vous ne devriez pas), vous pouvez combiner ce mapping avec la déstructuration:

const [array0, array1, array2] = someArray.map(x => x.data)
8
Bergi