详解JS遍历数组的十八种方法

for循环

let arr=[1,2,3]
for(let i=0;i<arr.length;i++){
	console.log(arr[i])
}
1
2
3
4

for循环可以遍历数组，它一共有三个参数，第一个参数可以当成数组索引值，想要遍历时候可以设置初始值为0，然后以数组长度为判断依据，如果不大于该数组长度，则调用该函数体，然后+1.

for in

  let arr=[1,2,3]
  for(item in arr){
	  console.log(arr[item],item)
  }
1
2
3
4

for in为ES5推出的一种方法，用来遍历数组和对象，其中它的item是它当前索引，不建议使用它来遍历数组，因为它会把新增隐性原型也遍历出来。
例：

  let arr=[1,2,3]
  arr.__proto__.a=1
  for(item in arr){
	  console.log(arr[item],item)
  }
1
2
3
4
5

打印结果：1 ‘0’ 2 ‘1’ 3 ‘2’ 1 ‘a’
会发a当作索引，1当作值遍历出来。

for of

  let arr=[1,2,3]
  for(item of arr){
	  console.log(item);//1 2 3
  }
1
2
3
4

ES6新增，建议使用，其中of左侧为它遍历出来的具体属性值。

forEach

  let arr=[1,2,3]
  arr.forEach((item,index,myself)=>{
	  console.log(item,index,myself)
	  // 1 0 (3) [1, 2, 3]
	  // 2 1 (3) [1, 2, 3]
	  // 3 2 (3) [1, 2, 3]
  })
1
2
3
4
5
6
7

ES5方法：forEach一共有三个可选参数，其中item为元素值，index为索引值，myself为数组本身，可以根据自身需要处理forEach方法。

map

  let arr=[1,2,3]
  arr=arr.map((item,index,myself)=>{
	  console.log(item,index,myself);
	  return item*2;
  })
  console.log(arr);//2 4 6
1
2
3
4
5
6

参数类型和参数作用和forEach一样，不同点在于map有return，可以返回一个新的数组，而forEach不能。

map和forEach区别

• map可以使用return，并且可以返回一个数组。forEach不可以使用return，只能处理数组，不能返回数组。
• forEach和map都不能使用break；终止，只有for循环可以。

相同点：

• 参数个数和功能一样。
• 都不会改变原来数组

filter

  let arr=[1,2,3]
  arr=arr.filter(item=>{
	  return item<2;
  })
  console.log(arr);//1
1
2
3
4
5

也能遍历数组，它主要功能是筛选，条件放在return中，比如上述代码条件为arr里元素<2,则只返回[1]数组。

find

  let arr=[1,2,3]
  arr=arr.find(item=>{
	  return item<3;
  })
  console.log(arr);//1
1
2
3
4
5

返回第一个符合条件的元素。如果数组为空，则不执行该函数。没有符合的返回undefined。

findIndex

let arr = [1, 2, 3]
arr = arr.findIndex(item => {
	return item > 2;
})
console.log(arr); //2
1
2
3
4
5

返回第一个符合条件的元素索引，没有则返回-1.

indexOf和lastIndexOf

indexOf是从前往后遍历
last则是从后往前遍历，如果有参数相同的元素，则返回第一个符合条件的元素下标，没有则返回-1

let arr = [1, 2, 3]
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(4));//-1
1
2
3

every

let arr = [1, 2, 3]
	
	let newArr1 = arr.every(item => {
	    return item > 2;
	})
	console.log(newArr1);//false
1
2
3
4
5
6

遍历后判断，返回值为true、false，如果所有遍历对象都符合条件，则返回true，否则返回false。

some

let arr = [1, 2, 3];
arr=arr.some(item=>{
	return item<2;
})
console.log(arr);//true
1
2
3
4
5

有符合条件的返回true，不需所有都符合条件

includes

let arr = [1, 2, 3]
console.log(arr.includes(1));
1
2

ES6新增方法，用于判断遍历数组后是否有该元素，如果有则返回true，没有则返回false

reduce和reduceRight

累加器，判断一个数组所有数字相加得几。

迭代器机制

ES6新增一种迭代器机制，三个方法keys、values、entries，都可以实现遍历数组操作。这里就不赘述了。