从 forEach 开始谈谈遍历

forEach

今天从 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

说到循环一定要说到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

map 系列

这一块是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

说到遍历不得不说起arguments, 在function()中的全部参数,奇怪的是它并非一个数组。只是一个类数组。

通常须要转成数组:

function foo() {
    const args = 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)) {
        // do something
    }
}

由于除非强制指定,不然对象都是不纯净的。都会有__proto__属性,也会被迭代出来。须要过滤一下。

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

const plainObj = Object.create(null)

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

从 forEach 开始谈谈迭代

相关文章
相关标签/搜索