for...infor...offorEach()有什么区别

Posted 2022-02-01 leftjs

本文原链接：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数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

循环我们也很容易想到 forEach()方法

• Array.prototype.forEach() : 方法对数组的每个元素执行一次提供的函数。

        array.forEach(callback(currentValue, index, array)
            //do something
        , this)
复制代码

参数

callback: 为数组中每个元素执行的函数，该函数接收三个参数：

currentValue(当前值): 数组中正在处理的当前元素。

index(索引): 数组中正在处理的当前元素的索引。

array: forEach()方法正在操作的数组。

thisArg可选:可选参数。当执行回调 函数时用作cthis的值(参考对象)。

返回值:undefined 局限： 不能使用 break 中断循环，也不能使用 return 语句返回到外层函数

此刻我想像你推荐 for...of 循环，你的不二之选

for of遍历数组应该是最好的选择，最简洁、最直接的遍历数组元素的语法，可以使用break、continue 和 return 语句，同时他避开了 for in循环的缺陷

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。