从 forEach 开始谈谈遍历

xingpingz 发布于2019-08-22 11:01 / 612人阅读

摘要：今天从开始谈谈遍历吧。对于对象的遍历更倾向于系列这一块是的函数式领域了。下挂载着几个非常好用的遍历函数。说到遍历不得不提及在中的所有参数，奇怪的是它并不是一个数组。对象的遍历是非常常用的功能。

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 开始谈谈迭代

GPU云服务器云服务器 foreach遍历遍历foreach js数组遍历foreach 解析域名从哪里开始

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

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

JavaScript Array 整理 - 遍历操作

摘要：描述此函数用来遍历数组的每一个元素，回调的返回值有意义，返回时，数组停止循环。问题一个数组最多可以有多长中规定，数组的长度会使用转化，即。这是我的原创文章，原文地址：http://lpgray.me/article/48/ 今天谈谈基础，在前端开发中，Array的基础操作很是频繁多见，在ES5中有许多Array的新特性，但是对于我等中国的码农，尤其是PC前端狗整天就与IE678打交道...

mengera88 2019-08-21 10:25 评论0 收藏0
《Java8实战》-第四章读书笔记（引入流Stream）

摘要：内部迭代与使用迭代器显式迭代的集合不同，流的迭代操作是在背后进行的。流只能遍历一次请注意，和迭代器类似，流只能遍历一次。流（Stream）流是什么流是Java API的新成员，它允许你以声明性方式处理数据集合（通过查询语句来表达，而不是临时编写一个实现）。就现在来说，你可以把它们看成遍历数据集的高级迭代器。此外，流还可以透明地并行处理，你无需写任何多线程代码了！我会在后面的笔记中...

_ivan 2019-08-19 11:01 评论0 收藏0
从async await 报错Unexpected identifier 谈谈对上下文的理解

摘要：解决办法，将箭头函数声明为函数，代码如下运行结果至此，问题解决。必须在函数的上下文中。对程序而言有了上下文调用帧才有一个完整的逻辑过程。先简单介绍下async await：　　async/await是ES6推出的异步处理方案，目的也很明确：更好的实现异步编程。详细见阮大神 ES6入门现在说说实践中遇到的问题：使用await报错Unexpected identifier 先...

Bryan 2019-08-22 11:06 评论0 收藏0
谈谈Spring Boot 数据源加载及其多数据源简单实现

摘要：整个代码如下组装默认配置的数据源，查询数据库配置开始初始化动态数据源数据源完毕初始化动态数据源共计条重新加载数据源配置总结以上源码参考个人项目基于开发基于前后分离的开发平台一起来聊聊你们是咋用的吧。业务需求提供所有微服务数据源的图形化维护功能代码生成可以根据选择的数据源加载表等源信息数据源管理要支持动态配置，实时生效附录效果图showImg(https://segment...

NSFish 2019-08-02 16:12 评论0 收藏0
谈谈Spring Boot 数据源加载及其多数据源简单实现

摘要：整个代码如下组装默认配置的数据源，查询数据库配置开始初始化动态数据源数据源完毕初始化动态数据源共计条重新加载数据源配置总结以上源码参考个人项目基于开发基于前后分离的开发平台一起来聊聊你们是咋用的吧。业务需求提供所有微服务数据源的图形化维护功能代码生成可以根据选择的数据源加载表等源信息数据源管理要支持动态配置，实时生效附录效果图showImg(https://segment...

netScorpion 2019-08-23 16:54 评论0 收藏0