JavaScript中数组遍历的几种方式

JavaScript中数组遍历的方式

// 初始的数组
const arr = [2, 4, 1, 5, 6];

普通 for 循环

// 普通 for 循环
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
/* 
输出的结果
		2
		4
		1
		5
		6
*/

使用 for in 遍历

// 使用 for in 遍历
for (let index in arr) {
  console.log(index,arr[index])
}
/* 
输出的结果
	0	2
	1	4
	2	1
	3	5
	4	6
*/

使用 for of 遍历

// 使用 for of 遍历
for (let item of arr) {
  console.log(item)
}
/* 
输出的结果
		2
		4
		1
		5
		6
*/

使用 forEach 遍历

// 使用 forEach 遍历
arr.forEach((item, index, arr) => {
   console.log("item",item,"index",index,"arr",arr)
});
/*
	item 2 index 0 arr [ 2, 4, 1, 5, 6 ]
	item 4 index 1 arr [ 2, 4, 1, 5, 6 ]
	item 1 index 2 arr [ 2, 4, 1, 5, 6 ]
	item 5 index 3 arr [ 2, 4, 1, 5, 6 ]
	item 6 index 4 arr [ 2, 4, 1, 5, 6 ]
*/

使用 map 遍历

// 使用 map 遍历
// 使用 map 遍历有返回值，返回对原数组进行操作后的新数组
let newArr = arr.map((item) => {
  console.log(item)
  return item * 2;
});
console.log(newArr) // [ 4, 8, 2, 10, 12 ]
/*
	2
	4
	1
	5
	6
	[ 4, 8, 2, 10, 12 ]
*/

filter 遍历（过滤）

// 使用 filter 遍历（过滤）,返回值是满足一定条件的元素组成的数组
let nn = "";
let res = arr.filter((item) => {
  console.log(item);
  if (item % 2 === 0) {
    nn += "22,";
    return item;
  }
  return item;
});
console.log(nn); // 22,22,22,
console.log(res); // [ 2, 4, 1, 5, 6 ]
/*
	2
	4
	1
	5
	6
	22,22,22,
	[ 2, 4, 1, 5, 6 ]
*/

find 遍历

// 使用 find 遍历 , 返回符合条件的第一个元素，如果没有符合的返回undefined
let res1 = arr.find((item) => {
  console.log(item); // 2，只输出一次，因为第一个就满足条件
  return item % 2 === 0;
});
console.log(res1); // 2

findIndex 遍历

// 使用 findIndex 遍历，返回符合条件的第一个元素的索引，如果没有返回-1
let res2 = arr.findIndex((item) => {
  console.log(item); // 2 ,只输出一次，因为第一个就满足条件
  return item % 2 === 0;
});
console.log(res2); // 0

some() 遍历

// 使用 some() 遍历，如果至少有一个符合条件的直接返回true，否则返回false
let res3 = arr.some((item) => {
  console.log(item);// 输出2、4、1，因为到第三个才符合条件，前两个也都要遍历
  return item % 2 !== 0;
});
console.log(res3); // true

every() 遍历

// 使用 every() 遍历，如果都满足条件，则返回true，否者返回false
let res4 = arr.every((item) => {
  console.log(item); // 输出2、4、1，因为第三个不满足条件
  return item % 2 === 0;
});
// console.log(res4) // false

reduce()遍历

// 使用 reduce() ，reduce可以做循环做的任何事情，比如：求和、去重等
/*
* init 初始值，不设置的话，默认第一个元素。
* previousValue 上一次回调的返回值/初始值init
* currentValue 当前处理的数组元素
* index 当前处理的数组元素的索引值
* array 当前处理的数组元素
* 利用第一个元素迭代
* */
let init = 0;
let res5 = arr.reduce((previousValue, currentValue, currentIndex, array) => {
  console.log(previousValue,currentValue,currentIndex,array)
  return previousValue+1
}, init)
console.log(res5) // 返回的是最后一次的结果
/*
	0 2 0 [ 2, 4, 1, 5, 6 ]
	1 4 1 [ 2, 4, 1, 5, 6 ]
	2 1 2 [ 2, 4, 1, 5, 6 ]
	3 5 3 [ 2, 4, 1, 5, 6 ]
	4 6 4 [ 2, 4, 1, 5, 6 ]
	5

*/