ES6 Iterable을 배열로 변환

길이가 유한하다는 것을 미리 알고있는 배열과 같은 Javascript ES6 Iterable이 있다고 가정합니다.이를 Javascript 배열로 변환하는 가장 좋은 방법은 무엇입니까?

그렇게하는 이유는 underscore 및 lodash와 같은 많은 js 라이브러리가 배열 만 지원하기 때문입니다. 따라서 Iterable에서 해당 함수를 사용하려면 먼저 배열로 변환해야합니다.

파이썬에서는 list () 함수를 사용할 수 있습니다. ES6에 상응하는 것이 있습니까?

Array.from 또는 스프레드 연산자를 사용할 수 있습니다 .

예:

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 ]

요약:

• 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)

ES6에 추가되는 Array.from 메서드를 사용할 수 있지만 배열과 Maps 및 Sets와 같은 반복 가능한 객체 만 지원합니다 (ES6에서도 제공됨). 일반 객체의 경우 Underscore의 toArray 메서드 또는 lodash의 toArray 메서드를 사용할 수 있습니다. 두 라이브러리 모두 실제로 배열뿐만 아니라 객체에 대한 훌륭한 지원을 제공하기 때문입니다. 이미 밑줄이나 lodash를 사용하고 있다면, 운 좋게도지도와 같은 다양한 기능적 개념을 추가하고 개체에 대한 축소와 함께 문제를 처리 할 수 ​​있습니다.

다음 접근 방식은지도에 대해 테스트됩니다.

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

 <<Your_Array>> = [].concat.apply([], Array.from( <<Your_IterableIterator>> ));

다음을 수행 할 수도 있습니다.

let arr = [];
for (let elem of gen(...)){
    arr.push(elem);
}

또는 ES5 + 생성기 기능을 사용하는 "어려운 방법"( Fiddle 은 현재 Firefox에서 작동) :

var squares = function*(n){
    for (var i=0; i<n; i++){
        yield i*i;
    }
}

var arr = [];
var gen = squares(10);
var g;
while(true){
    g = gen.next();
    if (g.done){
        break;
    }
    arr.push(g.value);
}

둘 다 접근 방식은 확실히 권장 할 수 없으며 개념 증명에 불과합니다.