将 ES6 可迭代转换为数组

IT技术 javascript arrays ecmascript-6 iterable babeljs
2021-03-08 09:16:47

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

这样做的原因是很多js库比如underscore和lodash都只支持Arrays,所以如果你想在Iterable上使用它们的任何一个函数,必须先把它转换成一个Array。

在 python 中,你可以只使用 list() 函数。ES6 中是否有等价物?

6个回答

您可以使用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 ]

几乎同样适用于 ES6let m = new Map()数据结构:为了仅获取 Map 的值,使用Array.from或扩展运算符 on m.values(),同样 for m.keys()否则,您将获得一组数组:[[key, value], [key, value]]
2021-04-21 09:16:47

概括:

  • 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 中)。对于常规对象,您可以使用UnderscoretoArray方法或 lodash 的 toArray 方法,因为这两个库实际上都对对象有很好的支持,而不仅仅是数组。如果您已经在使用下划线或 lodash,那么幸运的是,它们可以为您处理问题,同时为您的对象添加各种功能概念,例如 map 和 reduce。

以下方法已针对 Maps 进行了测试:

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}]
不是问什么 - 请参阅 Array.from 方式
2021-04-20 09:16:47
 <Your_Array> = [].concat.apply([], Array.from( <Your_IterableIterator> ));
将一个空数组连接到的结果Array.from是完全没有意义的。
2021-05-02 09:16:47