Spread를 사용하여 Iterable을 배열로 변환

ES6 스프레드(...)를 사용하여 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]

내장 Iterables

JavaScript에는 스프레드를 사용하여 배열로 변환하는 내장 반복 가능 항목이 있습니다.

문자열

어레이

지도

세트

TypedArray가 하나 더 있지만 이 게시물에서는 이에 초점을 맞추지 않겠습니다.

Iterables는 무엇입니까?

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' }

NodeList → 배열

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

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

*실제 출력을 보려면 코드를 브라우저에 붙여넣는 것이 좋습니다.

Array.from 대 확산

Spread 구문과 매우 유사한 또 다른 방법은 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 작동 대상:

배열과 유사한 객체(길이 속성 및 인덱스 요소가 있는 객체)

반복 가능한 객체

확산은 다음에 대해서만 작동합니다.

반복 가능한 객체

이제 이 배열과 같은 객체를 살펴보겠습니다.

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 를 사용할 수밖에 없습니다. 그러나 iterables에 관해서는 항상 spreads 를 사용했습니다. 왜요? 나는 Airbnb Style guide의 열렬한 팬이기 때문입니다. 더 좋은 이유가 있었으면 좋겠는데 그게 다네요 ㅎㅎ 😝 타이핑이 적어서 그런가봐요🤔 이유 아시는 분 댓글로 달아주세요😆

커뮤니티 입력

: 저는 스프레드를 사용하는 것도 좋아하지만 예를 들어 NodeList를 배열로 변환한 다음 매핑합니다. Array.from을 사용하는 것이 좋습니다. 저는 이번 여름에 Array.from에 각 항목이 생성될 때 호출되는 맵 콜백 함수인 두 번째 인수가 있다는 것을 발견했습니다.

자원

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