从forEach开始谈谈遍历技巧

 [[169550]]

成都创新互联公司主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、响应式网站建设、程序开发、网站优化、微网站、成都小程序开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的做网站、成都网站设计、网站设计、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体。

forEach

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

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

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

往常都习惯这么做： 

 
 

  
  
const self = this 
  
  
 
  
  
arr.forEach(function(item) { 
  
  
 
  
  
// do something with this 
  
  
 
  
  
}) 
 
 

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

 
 

  
  
arr.forEach(function(item) { 
  
  
 
  
  
// do something with this 
  
  
 
  
  
}, this) 
 
 

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

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

有的： 

 
 

  
  
arr.forEach(item => { 
  
  
 
  
  
// do something 
  
  
 
  
  
}) 
 
 

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

for

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

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 { current }
 
  
  
 
  
  
}) 
  
  
 
  
  
} 
 
 

 不过 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开始谈谈遍历技巧
网站URL：http://www.shufengxianlan.com/qtweb/news2/227802.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联