iterableをスプレッドで配列に変換する

ES 6スプレッド()簡単にiterableを配列に変換するには!多くの場合、iterableは組み込みメソッドで制限されます.配列にそれを変換することにより、フィルタ、マップ、削減などのすべての驚くべき配列メソッドにアクセスする必要があります!ものすごい🎉

[ ...'hi' ]; // // ['h', 'i']

[ ...new Set([1,2,3]) ]; // [1,2,3]

[ ...new Map([[1, 'one']]) ]; // [[1, 'one']]

[ ...document.querySelectorAll('div') ] // [ div, div, div]

組み込みイテレータ

JavaScriptでは、いくつかの組み込みのiterableを使用して、スプレッドを使用して配列に変換します.

文字列

アレイ

マップ

セット

もう一つありますが、このポストには集中しません.TypedArray .

iterableとは

Iterables are data structures which provide a mechanism to allow other data consumers to publicly access its elements in a sequential manner.

あなたがiterablesについてより多くを学ぶことに興味があるならば、これらのものすごいポストをチェックしてください:

Exploring JS - Iterables and iterators

Alligator.io - Introduction to Iterables and Iterators in JavaScript

MDN: Iteration protocols

文字列→ アレイ

const myString = 'hello';

const array = [...myString] // [ 'h', 'e', 'l', 'l', 'o' ]

配列を使用して配列に戻すことができますjoin()

array.join(''); // 'hello'

セット→ アレイ

const mySet = new Set([1, 2, 3]);

const array = [...mySet] // [1, 2, 3]

配列を文字列に変換するには、new Set

new Set(array); // Set { 1, 2, 3 }

マップ→ アレイ

const myMap = new Map([[1, 'one'], [2, 'two']]);

const array = [...myMap] // [ [ 1, 'one' ], [ 2, 'two' ] ]

setと同様に、配列を文字列に変換することで、new Map

new Map(array); // Map { 1 => 'one', 2 => 'two' }

ノデライト→ アレイ

const nodeList = document.querySelectorAll('div');

const array = [ ...document.querySelectorAll('div') ];
// [ div, div, div] *

*あなたのブラウザにコードをペーストして、実際の出力を見ることを提案します

配列。対広がる

スプレッド構文へのもう一つの非常に類似した方法はArray.from . 実際には、以下の例に置き換えます.

Array.from('hi') // // ['h', 'i']

Array.from(new Set([1,2,3])) // [1,2,3]

Array.from(new Map([[1, 'one']])) // [[1, 'one']]

Array.from(document.querySelectorAll('div')) // [ div, div, div]

違いは？

違いは定義にあるArray.from 著作:

array - like object ( lengthプロパティおよびindex要素を持つオブジェクト)

iterableオブジェクト

スプレッドのみが動作します.

iterableオブジェクト

では、このような配列を見てみましょう.

const arrayLikeObject = {
  0: 'a', // indexed element
  1: 'b', // indexed element
  length: 1, // length property
};

// ✅ Using Array.from
Array.from(arrayLikeObject); // [ 'a', 'b' ]

// ❌ Using Spread
[...arrayLikeObject]; // TypeError: arrayLikeObject is not iterable

どれを使うべきですか。

もちろん、それは異なります.配列のようなオブジェクトを使用している場合は、Array.from . しかし、イテレブルになると、私はいつも使用しましたspreads . なぜ?なぜなら私はその巨大なファンだからですAirbnb Style guide . もっと良い理由があればいいのに😝 私は推測しています🤔 あなたが理由を知っているならば、コメントにそれを落してください😆

コミュニティ入力

スプレッドを使うのも好きですが、nodelistを配列に変換して、それをマップしたいなら、配列を使ってください.から.私は、この夏、その配列を発見しました.fromは、各項目として呼び出されるマップコールバック関数である2番目の引数を持ちます.

資源

MDN Web Docs: Spread

MDN Web Docs: Array.from

Array.from vs spread syntax

DWB: Convert NodeList to Array

A Simple Guide to ES6 Iterators in JavaScript with Examples

読書ありがとう❤
よろしくFacebook | Blog | SamanthaMing.com