web-dev-qa-db-ja.com

オブジェクトを配列に変換するスプレッド演算子

私はこのようなデータ構造を変換しようとしています：

data = { 
  0:{A:a}, 
  1:{B:b}, 
  2:{C:c}, 
}

このような構造に：

[
 {0:{A:a}},
 {1:{B:b}}, 
 {2:{C:c}},
]

次のようなスプレッド演算子を使用します：[...data]は空の配列を返します。

私も試しました[{...data}]

希望の結果を得るためにスプレッド演算子を使用する方法はありますか？また、なぜこのアプローチが機能しないのですか？

javascriptarraysobjectecmascript-6spread-syntax
12
Turnipdabeets

MDN docs によると、機能しません

「ECMAScript提案のRest/Spreadプロパティ（ステージ3）は、オブジェクトリテラルにSpreadプロパティを追加します。それは、提供されたオブジェクトから新しいオブジェクト」

ただし、Object.keys().map()を使用して、非常に簡単に実行しようとしていることを実行できます。

var data = { 
  0:{A:"a"}, 
  1:{B:"b"}, 
  2:{C:"c"}, 
}

var result = Object.keys(data).map(function (key) {
   return { [key]: data[key] };
});
console.log(result);
7
mhodges

Object.entries を使用して[キー、値]のペアを取得し、それらを 計算されたプロパティ名 を使用してオブジェクトの配列にマップできます。

const data = { 
  0:{A: 'a'}, 
  1:{B: 'b'}, 
  2:{C: 'c'}
};

const result = Object.entries(data).map(([key, value]) => ({ [key]: value }));

console.log(result);
5
Ori Drori

あなたはあなたの例のように演算子を拡散するために使用できないと思いますが、reduceで希望の出力を生成できます。

data = { 
  0:{A:'a'}, 
  1:{B:'b'}, 
  2:{C:'c'}, 
}

let resArr = Object.keys(data).reduce((arr, e) => {
  arr.Push({[e]: data[e]});
  return arr;
}, []);

console.log(resArr);
1
Olian04