【深入探讨】JS遍历数组的方法有哪些？

---

前言

今天来盘一盘JS中除了最基础的for循环，其他可以遍历数组的方法都有哪些
开整

---

一、for in

var arr = [3, 5, 7];
for (var i in arr) {
   console.log(i);
}
// 结果是：
// 0
// 1
// 2

二、for of

var arr = [3, 5, 7];
for (var i of arr) {
   console.log(i);
}
// 结果是：
// 3
// 5
// 7

提问： for in 和 for of的区别？

插入知识点：Iterator（迭代器），任何数据结构只要部署 Iterator 接口，就可以完成遍历操作，即依次处理该数据结构的所有成员。迭代器对象本质上，就是一个指针对象，通过指针对象的next()，用来移动指针。ES6 规定默认的 Iterator 接口部署在数据结构的Symbol.iterator属性上。 （我抽空再整理一篇关于iterator的文章，有兴趣的同学可以关注一下）

1.两者均可遍历带有iterator接口的数据类型，例如Array，Map，Set，String，TypedArray，arguments 等等
2.遍历数组时：for in 遍历的是单个元素的序号index， for of 遍历的是单个元素的值
3.遍历对象时： for in 中 i 代表的是对象中的属性，obj[i] = 对象的值； for of 不可遍历对象。

三、forEach()

forEach默认有三个参数，item当前元素，index当前元素的索引，arr当前元素所在的原始数组，没有返回值

  arr.forEach(function(item,index,array){
    console.log('每一项：'+item)
    console.log('当前项的索引：'+index)
    console.log('当前数组本身：'+array)
  });

思考：forEach() 方法能否修改原数组？

需要分情况：
1.若数组中为基础数据类型，forEach直接修改整个元素，不会影响原数组。
2.若数组中为引用数据类型，直接修改整个元素不能影响原数组，但若修改元素中的属性，原数组会被改变。
举个栗子：

var arr1 = [1,2,3,4];
var arr2 = [{a:1},{a:2},{a:3}];
arr1.forEach(item =>{
   item = item * item;
});
arr2.forEach(item =>{
    item.a = item.a * item.a;
});
console.log(arr1); // [1,2,3,4]
console.log(arr2); // [{a:1},{a:4},{a:9}]

四、map()

map方法和forEach方法用法基本一样，区别是有返回值，可以return出来。

const newArr =  arr.map(function(item,index,array){
    console.log('每一项：'+item)
    console.log('当前项的索引：'+index)
    console.log('当前数组本身：'+array)
    return item*2
  });

提问：forEach() 和map() 的区别？

一：forEach()方法没有返回值，而map()方法有返回值。
二：map遍历的后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化。

五、filter()

filter() 方法能够 过滤掉数组中的某些元素，你可以在回调函数里设定条件，不符合条件的元素都会排除在外，结果返回一个新数组。

 var newarr = arr.filter(function(item,index,array){
         console.log('每一项：'+item)
         console.log('当前项的索引：'+index)
         console.log('当前数组本身：'+array)
         return item % 2 == 0
   })

六、every()

every()方法遍历数组检测数组所有元素是否满足条件，若有一个不满足则停止遍历，表达式返回false，若所有元素均满足，则表达式返回true。

var newArr = arr.every(function(item,index,array){
    // console.log(item)
    // console.log(index)
    // console.log(array)
    return item > 0
  })
  console.log(newArr)
  // 结果: true / false

七、some()

some()方法遍历数组依次检测元素是否满足条件，若有满足则表达式返回true，剩下的元素不再执行。若没有一个满足条件的表达式返回false

 var newArr = arr.some(function(item,index,array){
    // console.log(item)
    // console.log(index)
    // console.log(array)
    return item > 9
  })
  console.log(newArr)
  // 结果：true / false

---

八、其他关于遍历的扩展方法

indexOf()

indexOf()方法返回在数组中找到一个给定元素的第一个索引，如果不存在，则返回-1。

// 语法如下
 arr.indexOf(searchElement[, fromIndex])
 // searchElement：要查找的元素
 // fromIndex：开始查找的位置，不填默认为0

reduce()

常用的用法是对数组中的每个元素执行一个由你提供的reducer函数（升序执行），将其结果汇总为单个返回值。这个方法还有很多用途，今天先简单介绍一下，抽空我会再详细写一篇文章仔细介绍，欢迎大家关注

 const array = [1,2,3,4]
 const reducer = (accumulator, currentValue) => accumulator + currentValue;

---

总结

欲善其事必先利其器，掌握多种处理数组的能力并且知道各种方法之前的区别，才能让我们在遇到问题时选择出最合适的方法去解决。希望本文可以对你有所帮助，我会经常更新分享一些关于前端的知识，欢迎关注交流，我们一起学习一起进步！