本文原链接:https://cloud.tencent.com/developer/article/1360074
for of 和 for in 循环
循环遍历数组的时候,你还在用 for
语句走天下吗?
我曾经就是 for
走天下,最后发现自己给自己挖了一个巨大的坑,层层嵌套的循环,总要花大量的时间去捋清各种逻辑关系,很容易逻辑混乱。终于你经过千辛万苦把逻辑捋清了,实现了功能需求。可是这时候接踵而来的问题来了?性能,扩展性,重用性....等等,合着我费了九牛二虎之力白费了。这时候一把鼻涕一把泪,满是辛酸;
后来就很少很少使用 for
取而代之的是 API
和 ES6
的一些新特性
数组的 for of
一说到循环我们很容易想到 for in
,但是我们应该要知道的是 他更适合用来遍历对象而不是数组,有人说他是为遍历普通对象而设计的。
理由:
for in
遍历是随机的,数组遍历是按照一定顺序的。
for in
遍历数组索引的时候可能得到的是字符串索引而不是数字索引,而我们希望数组遍历是数字索引遍历(除了关联数组之外)
for ... in
循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array
数组实际上也是一个对象,它的每个元素的索引被视为一个属性。
![](https://i-blog.csdnimg.cn/blog_migrate/631d44b36460831fa32d7e55b0ff4a64.png)
循环我们也很容易想到 forEach()
方法
- Array.prototype.forEach() : 方法对数组的每个元素执行一次提供的函数。
array.forEach(callback(currentValue, index, array){ //do something }, this) 复制代码
参数
callback
: 为数组中每个元素执行的函数,该函数接收三个参数:
currentValue
(当前值): 数组中正在处理的当前元素。
index(索引)
: 数组中正在处理的当前元素的索引。
array
: forEach()
方法正在操作的数组。
thisArg
可选:可选参数。当执行回调 函数时用作cthis
的值(参考对象)。
返回值:undefined
局限: 不能使用 break
中断循环,也不能使用 return
语句返回到外层函数
![](https://i-blog.csdnimg.cn/blog_migrate/4016dabf7032ba811066a78e91929579.png)
此刻我想像你推荐 for...of 循环,你的不二之选
for of
遍历数组应该是最好的选择,最简洁、最直接的遍历数组元素的语法,可以使用break
、continue
和 return
语句,同时他避开了 for in
循环的缺陷
![](https://i-blog.csdnimg.cn/blog_migrate/58db20e56390aedaee33ab942d7da49b.png)
for-of
循环不仅支持数组,还支持大多数类数组对象,for-of
循环也支持字符串遍历。
我们可以把字符串假象成数组的一种,字符串有的方法数组都有,它同样支持 Map
和 Set
对象遍历。简而言之就是有迭代器方法的都可以用for of
循环(如果你还不知道Map
和Set
我们可以开始他们的学习路程了)
再来说一说数组其他遍历的API
- Array.prototype.filter(): 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
const new_array = arr.filter(callback[, thisArg]) 复制代码
callback
:用来测试数组的每个元素的函数。调用时使用参数 (element
, index
, array
)。返回 true
表示保留该元素(通过测试),false
则不保留。
thisArg
:可选。执行 callback
时的用于 this
的值。
返回值:一个新的通过测试的元素的集合的数组
- Array.prototype.map(): 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
let new_array = arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, thisArg]) 复制代码
callback
: 生成新数组元素的函数,使用三个参数:
currentValue
: callback
的第一个参数,数组中正在处理的当前元素。
index
:callback
的第二个参数,数组中正在处理的当前元素的索引。
array
: callback
的第三个参数,map
方法被调用的数组。
ound: #eee;">thisArg
:可选的。执行 callback
函数时 使用的this
值。
- Array.prototype.every(): 如果数组中的每个元素都满足测试函数,则返回
true
,否则返回false
。 - Array.prototype.some(): 如果数组中至少有一个元素满足测试函数,则返回
true
,否则返回false
。