Array.from的妙用

developerworks 发布于2019-08-19 17:36 / 1431人阅读

摘要：所谓对象指具有数组某些行为的对象，表现出来的特征就是具有属性。不考虑兼容性的话，我们就可以直接用了。前面说了的一些内容，既然标题说了妙用自然还要来点新的东西。好用归好用，不过在性能上却有些尴尬。

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修改元素值。

有了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

GPU云服务器云服务器获取oss的object的链接地址的方法云计算的的发展云计算的特征的是一个机柜的的价格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78679.html

js常用小技巧黑科技 - javascript(js) commonly used skill

摘要：原文地址小数取整妙用隐式转换数字字符串转转时间戳数组多维数组转逗号分隔字符串解构交换的值扩展运算符取数组最大值生成时间字符串转数组合并对象等同于常用方法数字前补数组元素为对象的去重数组求和金钱格式化短路逻辑代替生成指定长度数组正则进阶捕原文地址 https://github.com/TigerHee/s... 小数取整： 1.234 | 0 ~~1.234 1.234 >...

shadowbook 2019-08-26 11:59 评论0 收藏0
JS数组方法汇总

Javascript原生方法注意:js数组每一项可以保存任何类型的数据，比如第一个元素是字符串，第二个元素是数字，第三个元素是对象创建数组 tips: 建议使用数组字面量方式【简单】 var colors = new Array() var colors = new Array(red,blue) var colors = []; var colors = [red,blue]; 检测数组 ...

wean 2019-08-26 11:31 评论0 收藏0
JavaScript中的this妙用

摘要：关键字始脚本能够根据使用这个关键字的上下文将值传递给函数。替我们完成的工作之一是从链接获得也就是标签的属性。实际上，可以让站点上的所有链接都调用这个相同的代码，这一行代码都会自动获得相应的值。 JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。我们先来看如下一个网页，在用户单击链接之后，弹出一个alert框，然后再转到href属性所指的网页HTM...

jayzou 2019-08-19 17:47 评论0 收藏0
#关于setTimeout的妙用

摘要：如果对当前元素的点击事件处理加上的话，那么执行顺序就会改变为父元素当前元素。这样的结果会导致新内容很晚才能渲染完成，很多时候我们需要让界面先渲染完成之后在去调用引擎来执行，那么可以使用来延迟引擎的调用关于setTimeout的妙用定义在指定的延迟时间之后调用一个函数或执行一个代码片段这个是setTimeout最主要的功能，但也是很坑的地方，首先javascript其实是运行在单...

崔晓明 2019-08-20 12:12 评论0 收藏0
return/break语句的妙用

摘要：在里面，一般我们想让程序在里面执行到一半时，经过判断或者完成某种操作后停止执行后面的代码，会用结束掉。可以在中间加入多个作为断点，控制逻辑的流程。在JavaScript里面，一般我们想让程序在function里面执行到一半时，经过判断或者完成某种操作后停止执行后面的代码，会用return结束掉function。例如： //去除前后的空格function spaceWord(vRet...

Batkid 2019-08-23 15:58 评论0 收藏0