博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Array.from的妙用
阅读量:6256 次
发布时间:2019-06-22

本文共 1333 字,大约阅读时间需要 4 分钟。

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个空位的数组。

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

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

Array(100)

有了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({length:100})

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

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

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

转载地址:http://aqxsa.baihongyu.com/

你可能感兴趣的文章
React Native 常用学习链接地址
查看>>
学习笔记之Naive Bayes Classifier
查看>>
数据挖掘笔记(2)-数据规约
查看>>
c# 技巧之 泛型方法
查看>>
extern
查看>>
UVa10276 HDU1329 ZOJ1239 Hanoi Tower Troubles Again!【递推函数+打表】
查看>>
B00002 C语言位字段实例
查看>>
DFS(深度优先搜索)模板
查看>>
课后作业-阅读任务-阅读提问-3
查看>>
26.颜色值缩写
查看>>
内置对象Array及Array常见操作
查看>>
[130_存储业务]002_富士通存储系统Eternus_高级拷贝之对等拷贝(Advanced Copy EC)
查看>>
更改SQL数据库的繁体数据为简体
查看>>
(转)android拨打电话崩溃6.0以上实时动态权限申请
查看>>
懒加载的使用
查看>>
ios xcode 下 报出 ”xx“is missing from working copy 的问题
查看>>
SpringMVC报错The request sent by the client was syntactically incorrect ()
查看>>
网络层封装
查看>>
《c程序设计语言》读书笔记-4.13-递归版本reverse函数
查看>>
background-clip&background-origin
查看>>