转载

Array.from的妙用

es6 新特性中 Array 类多了一个静态方法 from ，这个方法作用是将一个 ArrayLike 对象或者 Iterable 对象转换成一个 Array ，本文只讨论 ArrayLike 对象相关内容。

所谓 ArrayLike 对象指具有数组某些行为的对象，表现出来的特征就是具有 length 属性。

var obj = {     "0" : 1,     length: 1 };

这一类对象不能调用数组所具有的方法(push/forEach/map之类)，最常见的有两种：DOM中的 NodeList 和函数中的 arguments 。

在平常开发中，我们经常遇到需要将这两种对象转化为真正数组的场景，一般我们是这么写：

var args = [].slice.call(arguments); var imgs = [].slice.call(document.querySelectorAll('img'));

现在我们有了 Array.from ，可以这样写。

var args = Array.from(arguments); var imgs = Array.from(document.querySelectorAll('img'));

不考虑兼容性的话，我们就可以直接用 Array.from 了。前面说了 Array.from 的一些内容，既然标题说了 妙用 ,自然还要来点新的东西。

有时我们会遇到这样的场景，需要创建一个包含从0到99(n)的连续整数的数组。以前我们会这样写

var arr = []; for(var i = 0; i <= 99; i++) {     arr.push(i); }

这种方法最直观了，性能也很好。只是不喜欢写 for循环 的同学可能不会这样写，所以有人搞出了下面这种写法

var arr = Array(100).join(' ').split('').map(function(item,index){return index});

这种方法中 Array(100) 创建了一个包含100个 undefined 的数组。

但是这样的数组是没法迭代的(参考 forEach 方法的定义 )，

所以要通过字符串转换，覆盖 undefined ，最后调用 map 修改元素值。

有了 es6 ,用 Array.from 的写法是这样的

var arr = Array.from({length:100}).map(function(item,index){return index});

这种方法中 Array.from({length:100}) 也是创建了一个包含100个 undefined 的数组，

但是这个数组可以迭代( [].slice.call({length:100})创建的不可迭代 )，可以直接调用 map 方法。

上面的代码其实包含了一个重要的信息， Array.from 创建的数组是可以迭代的(参考 Array.from 方法的定义 )，

即使元素值都是 undefined 。所以 Array.from 还可以用来实现次数确定的循环遍历。例如在写 React 组件时，有时要 map 迭代确定次数，生成 html 。

Array.from 好用归好用，不过在性能上却有些尴尬。上面三种方法第一种性能最好，第二种次之，第三种最差。具体数据可以看这里 constarray

原文 https://segmentfault.com/a/1190000004450221

正文到此结束

所属分类：编程技术

本文标签： 标题 DOM tar Document 遍历 https HTML node CTO http 代码开发数据 list map Select
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二