web-dev-qa-db-ja.com

es6のオブジェクトの配列の破壊

ES6では、破壊を使用して次の行を単純化するにはどうすればよいですか？

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

破壊を使用することが実際に単純化されるかどうかは議論の余地がありますが、これはそれを行う方法です：

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

実例：

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

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

console.log(array0, array1, array2);

何が起こっているのかは、最初にsomeArrayから各オブジェクトを抽出し、次にdataプロパティを抽出して名前を変更することにより各オブジェクトを破壊することです。

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

（可能性のある）より読みやすいコードのマッピングと破壊を組み合わせるかもしれません：

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

実例：

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

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

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

あなたが実際に欲しいのは

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

本当に3つの変数が必要な場合（ヒント：するべきではありません）、そのmappingを破壊と組み合わせることができます。

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