未加星标

从forEach 开始谈谈遍历技巧

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

forEach

今天从 forEach 开始谈谈遍历吧。

forEach 作为一个比较出众的遍历操作,之前有很多库都对其进行过各种包装,然而我还是发现很多人并不是非常理解 forEach。

比如第二个参数 this 的使用。

往常都习惯这么做:

constself=this

arr.forEach( function (item){

//dosomething with this

})

然而如果使用第二个参数就可以这样:

arr.forEach( function (item){

//dosomething with this

},this)

省去了一个中间的self,看起来更优美了

那么有没有更好的处理方式呢?

有的:

arr.forEach(item=>{

//dosomething

})

由于 arrow function 的特性,自动绑定父 scope 的 this, 会更加简洁,而且少了个function关键字,可读性更好。

for

说到循环必定要说到for循环了。js里面的for循环有好几种使用方式:

C 系列 for 循环:

for (let index =0; index <arr.length; index ++){

//dosomething

}

index 是 arr 的索引,在循环体中通过 arr[index] 调用当前的元素,我非常不喜欢这种方式,因为要写两个分号!

还有另一种比较简单的方式:

for (let key in obj){

//dosomething

}

不过这个方式一般用来遍历对象,下文有说。

关于 for 循环还有 ES2015 规定的一种

for (letitem of arr){

//dosomething

}

这种遍历方式和之前的最大区别在于item,它是value而非key,可以直接迭代出内容。

不过这种方式我个人用的不多,因为很多情况下我更喜欢用array下的方法。对于对象的遍历更倾向于for...in

map 系列

这一块是js的函数式领域了。

Array.prototype下挂载着几个非常好用的遍历函数。比如map

它会遍历arr下的所有内容,做操作之后返回数据,形成一个新的数组:

constarr=[1,2,3]

arr.map( current => current *5)

在 react 最常用。经常用来遍历数据,形成dom:

someRender(){

return this.state.data.map(( current , index )=>{

return <li key ={ index }>{ current }</li>

})

}

不过 map 有一点不好的地方在于不能控制循环的流程,如果不能完成,就返回undefined继续下一次迭代。所以遇到可能会返回undefined的情况应该用forEach或者for循环遍历

还有filter用法和map一模一样,只是它用来过滤数据。非常的好用。

arguments

说到遍历不得不提及arguments, 在function()中的所有参数,奇怪的是它并不是一个数组。只是一个类数组。

一般需要转成数组:

function foo(){

constargs=Array.prototype.slice.call(arguments)

return Array.isArray(args)

}

但是我个人并不认同这样的方法,有了新的 ES2015 就不要用这么丑的语法了

function foo(...args){

//args是数组

}

ES2015 的 rest 语法使得剩余参数都传入args里面,比之前的还要调Array的方法要轻松不少。

object

对象的遍历是非常常用的功能。

我个人更喜欢用for...in语法,但是有一点需要注意:

for (let index in obj){

if(obj.hasOwnProperty( index )){

//dosomething

}

}

因为除非强制指定,否则对象都是不纯净的。都会有__proto__属性,也会被迭代出来。需要过滤一下。

好了,如何创建纯净的对象?

constplainObj=Object. create ( null )

最轻的obj结构,内部没有任何多余的属性。


从forEach 开始谈谈遍历技巧
从forEach 开始谈谈遍历技巧

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据包装
分页:12
转载请注明
本文标题:从forEach 开始谈谈遍历技巧
本站链接:http://www.codesec.net/view/482221.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(61)