如何在 ES6 中将 Iterable 转换为数组？

Question

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

这样做的原因是很多js库如underscore和lodash只支持数组，所以如果你想在Iterable上使用它们的任何函数，必须首先将其转换为数组。

在Python中你可以只使用list()函数。 ES6 中有等效的吗？

Answer 1

您可以使用 Array.from 或 扩展语法 (...)。

示例：

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 ]

Answer 2

总结：

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

Answer 3

您可以使用 ES6 中添加的 Array.from 方法，但仅支持数组和可迭代对象，例如 Maps 和 Sets（ES6 中也提供）。对于常规对象，您可以使用 Underscore 的 toArray 方法或 lodash 的 toArray 方法，因为这两个库实际上对对象（而不仅仅是数组）都有很好的支持。如果您已经在使用 underscore 或 lodash，那么幸运的是，他们可以为您处理问题，同时为您的对象添加各种功能概念，例如映射和减少。

Answer 4

以下方法已针对地图进行测试：

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

Answer 5

您也可以执行以下操作，但这两种方法当然都不值得推荐（仅仅是完整性的概念验证）：

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