web-dev-qa-db-ja.com

ES6 Iterableを配列に変換

配列のようなJavascript ES6があり、その長さが有限であることが事前にわかっているIterableがあるとします。これをJavascript配列に変換する最良の方法は何ですか？

これを行う理由は、アンダースコアやlodashなどの多くのjsライブラリが配列のみをサポートしているため、Iterableでそれらの関数のいずれかを使用する場合は、最初に配列に変換する必要があるためです。

pythonではlist（）関数を使用できます。ES6に同等のものはありますか？

javascriptarraysecmascript-6iterablebabeljs
67
Michael Bylstra

Array.from または spread operator を使用できます。

例：

let x = new Set([ 1, 2, 3, 4 ]);

let y = Array.from(x);
console.log(y); // = [ 1, 2, 3, 4 ]

let z = [ ...x ];
console.log(z); // = [ 1, 2, 3, 4 ]
118
XåpplI'-I0llwlg'I -

Array.from メソッドを使用できます。このメソッドはES6に追加されていますが、配列と、MapsやSets（ES6でも提供）などの反復可能なオブジェクトのみをサポートしています。通常のオブジェクトには、アンダースコアの toArray メソッドまたはlodashのtoArrayメソッドを使用できます。これは、両方のライブラリが実際に配列だけでなくオブジェクトを強力にサポートしているためです。既にアンダースコアまたはロダッシュを使用している場合は、幸いなことに、mapやreduceなどのさまざまな機能概念をオブジェクトに追加することで問題を処理できます。

11
Colin Hartwig

概要：

  • Array.from()関数、入力のようにイテラブルを受け取り、イテラブルの配列を返します。
  • スプレッド演算子：配列リテラルと組み合わせた_..._。
_const map = new Map([[ 1, 'one' ],[ 2, 'two' ]]);

const newArr1  = [ ...map  ];  // create an Array literal and use the spread syntax on it
const newArr2 = Array.from( map );  // 

console.log(newArr1, newArr2); _

配列をコピーする際の注意：

上記のこれらの方法では、配列をコピーするときに浅いコピーのみが作成されるという事実を認識してください。例は潜在的な問題を明確にします：

_let arr = [1, 2, ['a', 'b']];

let newArr = [ ...arr ];

console.log(newArr);

arr[2][0] = 'change';

console.log(newArr);_

ここでは、ネストされた配列のため、参照がコピーされ、新しい配列は作成されません。したがって、古い配列のネストされた配列を変更すると、この変更は新しい配列に反映されます（同じ配列を参照するため、参照がコピーされました）。

警告の解決策：

JSON.parse(JSON.stringify(array))を使用して配列のディープクローンを作成することにより、浅いコピーの問題を解決できます。例えば：

_let arr = [1, 2, ['a', 'b']]

let newArr = Array.from(arr);

let deepCloneArr = JSON.parse(JSON.stringify(arr));

arr[2][0] = 'change';

console.log(newArr, deepCloneArr)_
7
Willem van der Veen

次のアプローチがマップでテストされています。

const MyMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const MyArray = [...MyMap].map(item => {
  return {[item[0]]: item[1]}
});

console.info( MyArray ); //[{"a", 1}, {"b", 2}, {"c": 3}]
1
Roman