将 ES6可迭代转换为数组

假设您有一个类似于数组的 Javascript ES6 Iterable，您事先知道它的长度是有限的，那么将它转换为 Javascript Array 的最佳方法是什么呢？

这样做的原因是许多 js 库，如下划线和 loash，只支持数组，所以如果你想在 Iterable 上使用它们的任何一个函数，它必须首先转换成一个数组。

在 python 中，你可以使用 list ()函数？

107229 次浏览
小开

您可以使用正在 ES6中添加的 数组方法，但是只支持数组和可迭代对象，比如 Maps 和 Set (也在 ES6中)。对于常规对象，您可以使用 Underscore 的 数组方法或 loash 的 toArray 方法，因为这两个库实际上都非常支持对象，而不仅仅是数组。如果您已经在使用下划线或 loash，那么幸运的是，他们可以为您处理这个问题，同时为您的对象添加各种函数概念，比如 map 和 reduce。

小开

您可以使用 数组或 扩展语法(...)。

例如:

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


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


const z = [ ...x ];
console.log(z); // = [ 1, 2, 3, 4 ]

小开

您还可以执行以下操作，但是这两种方法当然都不可取(仅仅是完整性的概念验证) :

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

或者使用 ES5 + 生成器功能的“硬道理”(小提琴可以在当前的 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);
}
小开

摘要:

  • 函数，它在输入中接受一个迭代器，并返回一个迭代器的数组。
  • 扩展语法: ...与数组文字的组合。

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)

小开

在测试地图时，采用了以下方法:

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

提交答案