JS遍历数组的12种方法

总结遍历数组的方法，方便日后查阅！

接下来例子皆以该数组为基础

const arr = [{id:1,age:10},{id:2,age:20},{id:3,age:30}]

一、for

for 循环和 for-in 能正确响应 break、continue 和 return语句，但 forEach 不行。

二、foreach

接收一个回调函数作为参数, 该回调接收3个参数，没有返回值。

• item：每个元素
• index：元素数组下标
• arr：数组本身

注意：

1.foreach() 没有返回值

2.foreach() 不会对空数组进行检测

三、map

接收一个回调函数作为参数, 该回调接收3个参数。

• item：每个元素
• index：元素数组下标
• arr：数组本身

注意：

1.map() 有返回值

2.map() 不会对空数组进行检测。

3.map() 不会改变原始数组。

四、for...of

注意：

1.只有可迭代对象（iterator）才能使用（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）。

2.普通对象不能使用。

五、filter

接收一个回调函数作为参数, 该回调接收3个参数。

• item：每个元素
• index：元素数组下标
• arr：数组本身

注意：

1.filter() 有返回值，返回值是一个新数组

2.filter() 不会对空数组进行检测

3.filter() 不会改变原始数组。

六、every

every相当于逻辑关系中的且（&&），只有所有参数满足条件的时候，才会返回true，如果有一个不满足，就会逻辑中断，返回false。通俗地说：every就是找假，一假则假

接收一个回调函数作为参数, 该回调接收3个参数。

• item：每个元素
• index：元素数组下标
• arr：数组本身

注意：

1.every有返回值，返回值是一个布尔值

2.every 不会对空数组进行检测

3.every 不会改变原始数组

七、some

 

some相当于逻辑关系中的或（||），只要有一个参数满足条件，就会中断逻辑，返回true，遍历结束，没有找到合适的参数，就返回false。通俗的说：some就是找真，一真则真

接收一个回调函数作为参数, 该回调接收3个参数。

• item：每个元素
• index：元素数组下标
• arr：数组本身

注意：

1.​​​​​​​some有返回值，返回值是一个布尔值

2.some不会对空数组进行检测

3.some不会改变原始数组

八、reduce

reduce 顺着挨个累加，接收一个回调函数作为参数, 该回调接收4个参数。

• initialValue：上一次调用回调返回的值，或者是提供的初始值（initialValue）
• currentValue ：数组中当前被处理的元素）
• index：元素数组下标
• arr：数组本身

注意：

1.​​​​​​​reduce() 对于空数组是不会执行回调函数的。

九、reduceRight

reduceRight 倒着挨个累加，接收一个回调函数作为参数, 该回调接收4个参数。

• initialValue：上一次调用回调返回的值，或者是提供的初始值（initialValue）
• currentValue ：数组中当前被处理的元素）
• index：元素数组下标
• arr：数组本身

注意：

1.​​​​​​​reduceRight() 对于空数组是不会执行回调函数的。

十、find

返回数组中符合测试函数条件的第一个元素，否则返回undefined。

接收一个回调函数作为参数, 该回调接收3个参数。

• item：每个元素
• index：元素数组下标
• arr：数组本身

注意：

1.​​​​​​​find对于空数组是不会执行回调函数的。

2.find不会改变原始数组

十一、 findIndex

返回符合条件的第一项的下标，没有则返回 -1。

接收一个回调函数作为参数, 该回调接收3个参数。

• item：每个元素
• index：元素数组下标
• arr：数组本身

注意：

1.​​​​​​​findIndex对于空数组是不会执行回调函数的。

2.findIndex不会改变原始数组

十二、 keys、values、entries

它们都返回一个遍历器对象，可以用 for...of 循环进行遍历

• keys – 返回元素下标
• values – 返回元素本身
• entries – 返回元素和下标