今天从 forEach 开始谈谈遍历吧。html
forEach 做为一个比较出众的遍历操做,以前有不少库都对其进行过各类包装,然而我仍是发现不少人并非很是理解 forEach。react
好比第二个参数 this 的使用。git
往常都习惯这么作:github
const self = this arr.forEach(function(item) { // do something with this })
然而若是使用第二个参数就能够这样:数组
arr.forEach(function(item) { // do something with this }, this)
省去了一个中间的self,看起来更优美了dom
那么有没有更好的处理方式呢?函数
有的:this
arr.forEach(item => { // do something })
因为 arrow function 的特性,自动绑定父 scope 的 this, 会更加简洁,并且少了个function
关键字,可读性更好。prototype
说到循环一定要说到for循环了。js里面的for循环有好几种使用方式:rest
C 系列 for 循环:
for (let index = 0; index < arr.length; index++) { // do something }
index 是 arr 的索引,在循环体中经过 arr[index]
调用当前的元素,我很是不喜欢这种方式,由于要写两个分号!
还有另外一种比较简单的方式:
for (let key in obj) { // do something }
不过这个方式通常用来遍历对象,下文有说。
关于 for 循环还有 ES2015 规定的一种
for (let item of arr) { // do something }
这种遍历方式和以前的最大区别在于item
,它是value而非key,能够直接迭代出内容。
不过这种方式我我的用的很少,由于不少状况下我更喜欢用array下的方法。对于对象的遍历更倾向于for...in
这一块是js的函数式领域了。
Array.prototype
下挂载着几个很是好用的遍历函数。好比map
它会遍历arr下的全部内容,作操做以后返回数据,造成一个新的数组:
const arr = [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, 在function()中的全部参数,奇怪的是它并非一个数组。只是一个类数组。
通常须要转成数组:
function foo() { const args = Array.prototype.slice.call(arguments) return Array.isArray(args) }
可是我我的并不认同这样的方法,有了新的 ES2015 就不要用这么丑的语法了
function foo(...args) { // args 是数组 }
ES2015 的 rest 语法使得剩余参数都传入args里面,比以前的还要调Array的方法要轻松很多。
对象的遍历是很是经常使用的功能。
我我的更喜欢用for...in
语法,可是有一点须要注意:
for (let index in obj) { if(obj.hasOwnProperty(index)) { // do something } }
由于除非强制指定,不然对象都是不纯净的。都会有__proto__
属性,也会被迭代出来。须要过滤一下。
好了,如何建立纯净的对象?
const plainObj = Object.create(null)
最轻的obj结构,内部没有任何多余的属性。