🔥别再用for循环了,总有更好的,JS数组13种遍历方法总结

🍉前言

for循环是最常使用万能的一种循环方式 , 但是我们循环数组往往需要进行某些逻辑操作,而很多逻辑操作都是经常使用的 , 所以JS本身内置了很多方法，接下来一一详细介绍。

🍓初学者必知 (4)

初学者必须得知道的有4种, 如果你完成了学习出来工作了, 这4个不知道的话, 大概率存活不了多久哦!

`for`

这是刚刚入行学习绝对会学习的,就不多介绍了

js 复制代码

const arr = [1,2,3]
for (let i = 0; i < arr.length; i++) { 
   console.log(arr[i])
}
// 打印结果: 1 2 3

以上是入门者经常的写法,不过我建议把长度定义出来

js 复制代码

const arr = [1,2,3]
const len = arr.length
for (let i = 0; i < len; i++) { 
 console.log(arr[i])
}
// 打印结果: 1 2 3

这样可以避免重复去读取数组长度,算是优化的一种方式,数组大的时候会比较明显

`while`

如上,也是绝对会学习的,各种语言应该都会有这俩种

js 复制代码

const arr = [1, 2, 3];
let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i += 1;
}
// 打印结果: 1 2 3

`for...in...`

for...in...除了遍历数组还能遍历对象

注:数组的本质是对象,key默认从0迭代的对象

js 复制代码

const arr = [1, 2, 3];
const obj = {
  key: "value"
};
// 遍历对象 item的值为对象(键值对)的 key
for (const item in obj) {
  console.log(item);
  console.log(obj[item]);
}
// 打印结果 key value

// 遍历数组拿到的数组的下标
for (const item in arr) {
  console.log(item);
}
//打印结果 0 1 2

`for...of...`

for...of...遍历数组后拿到的是数组每一项的值, 如果你不会使用index,那么大可代替for

js 复制代码

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}
//打印结果 1 2 3

🍇常用(5)

编码过程中经常使用,非常方便的有以下几种 , 提高编码效率 , 提升逼格 , 以及正常开发者都必须具备的。

`forEach`

forEach循环一共有内置了3个形参

item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
arr.forEach((item, index, arr2) => {
  console.log(item);
  console.log(index);
  console.log(arr2);
});
// 打印结果
// 1 0 [1,2,3]
// 2 1 [1,2,3]
// 3 2 [1,2,3]

`map`

map与forEach循环一致,唯一不同的是map会返回新的数组,你可以进行处理拿到新数组。

item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
let newArr = arr.map((item,index,arr2) => {
  //...
  return item + 1;
});
console.log(newArr);
// 打印结果 2 3 4

当然如果你只是简单处理可以简写

js 复制代码

const arr = [1, 2, 3];
let newArr = arr.map(item => item + 1);
console.log(newArr);
// 打印结果 2 3 4

`some`

some循环, 有一个以上的元素满足条件就返回 true，否则返回 false

item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
let boolean = arr.some(item => {
  // return item == 1;
  // return item == 2;
  return item == 3;
});
console.log(boolean);
// 打印结果 true

js 复制代码

const arr = [1, 2, 3];
let boolean = arr.some(item => {
  return item == 4;
});
console.log(boolean);
// 打印结果 false

如果是对象数组可以使用 , 如果是元素数组我建议使用arr.includes(value),它会比较arr内是否存在value,返回true或false

`every`

every循环, 可以和上一个一起记 ,所有元素满足条件就返回 true，否则返回 false

item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
let boolean = arr.every(item => {
  return item <= 3;
});
console.log(boolean);
// 打印结果 true

js 复制代码

const arr = [1, 2, 3];
let boolean = arr.every(item => {
  return item < 3;
});
console.log(boolean);
// 打印结果 false

`filter`

filter循环,将符合条件的循环项组成新数组返回。

item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
let newArr = arr.filter(item => {
  return item < 3;
});
console.log(newArr);
//打印结果 [1,2]

🍈!常用(4)

剩下这4种,我个人感觉不是很常用 , 用的比较少

`find`

find循环, 找到符合条件的第一项，没找到返回 undefined

item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
let value = arr.find(item => {
  return item < 3;
});
console.log(value);
//打印结果 1

js 复制代码

const arr = [1, 2, 3];
let value = arr.find(item => {
  return item > 3;
});
console.log(value);
//打印结果 undefined

`fiendIndex`

fiendIndex循环,看名字就知道和上面的区别了, 找到符合条件的第一项下标，没找到返回 -1

item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
let value = arr.fiendIndex(item => {
  return item < 3;
});
console.log(value);
//打印结果 0

js 复制代码

const arr = [1, 2, 3];
let value = arr.fiendIndex(item => {
  return item > 3;
});
console.log(value);
//打印结果 -1

`reduce`

reduce循环,一般用于累加,可以传入初始值,不传为0

init 初始值
item 数组的每一项
index 数组下标
arr 数组本身

js 复制代码

const arr = [1, 2, 3];
// 没指定初始值的情况下
let value = arr.reduce((init, item) => {
  return init + item; 
});
console.log(value);
//打印结果 6

// 给了初始值之后
let value2 = arr.reduce((init, item) => {
  return init + item;
}, 10);
console.log(value2);
//打印结果 16

`reduceRight`

reduceRight循环,和 reduce一样,不过它是从数组末尾开始,就不做示例了，看上文。

总结📚

因为我是自学的,专科老师并不会教那么多,所以我有很长一段时间都只会基础的循环以及forEach,map这种。