常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every

for循环

来自于远古的遍历方式，并且涵盖多种手段，例如for in 和for of。

for(let i = 1; i<=5; i++){
	console.log("这是第"+i+"次"+"循环")
}

  

 

  
1
  
2
  
3
 

for循环 中使用break和continue语句（终止和跳过本次循环）：

for(let i=1;i<=10;i++){
	if(i==3){
		break;//跳出循环，执行循环后面的语句(整个循环便终止了)
	}
	console.log(i)
}

for(let i=1;i<=10;i++){
	if(i==3 || i==7 || i==9){
		continue;//中断循环中的迭代，然后继续循环中的下一个迭代
	}
	console.log(i)
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

for of 用来遍历数组也是可以的
for of 中也可以用break和continue

遍历对象： for in

let student = {name:"张三",sex:"男",age:18,hometown:"河南许昌"}
for(let x in student){
	console.log(x+":"+student[x]+)
}//x为key键  属性     student[x]为值 value

  

 

  
1
  
2
  
3
  
4
 

for in 也可以遍历数组，但不推荐
for in 中也可以用break和continue

forEach遍历

forEach是ES5中操作数组的一种方法，主要功能是遍历数组。

let arr = [1,2,3,4];
let sum = 0;
arr.forEach(function(value,index,array){
	array[index] == value;    //结果为true
	sum+=value;  
});
console.log(sum);    //结果为 10

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

forEach可以修改自己吗？
答：在数组每一项为引用类型时可以

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

let objArr = [{num:1},{num:2}]
objArr.forEach((item) => {
	item.num +=1
})
console.log(objArr)//[{num:2},{num:3}]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

完整见：https://blog.csdn.net/web2022050901/article/details/125002327

forEach不可以用break和continue

那forEach怎么跳出和终止循环呢？
forEach跳出：

var arr = [1,2,3,4,5,6]
arr.forEach((item) => {
	if (item === 3) {
		return
	}
    console.log(item)
})

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

将输出 1 2 4 5 6，3不会输出

forEach终止：（抛出异常的方式）

var arr = [1,2,3,4,5,6]
try{
  arr.forEach((item) => {
  	  if (item === 3) {
  		  throw new Error('End Loop')
  	  }
      console.log(item)
  })
} catch (e) {
    if(e.message === 'End Loop') throw e
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

将只输出 1 2

map

map即是 “映射”的意思 用法与 forEach 相似。

[].map(function(value,index,array){
　　//code
})

  

 

  
1
  
2
  
3
 

MDN上说：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。具体使用如下：

let array = [1, 4, 9, 16];
const map1 = array.map(x => {
    return x + 1;
});
console.log(array)//[1,4,9,10.16]
console.log(map1)//[2,5,10,17]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

可见map并不会修改原数组。

filter

filter用于对数组进行过滤，得到符合条件的新数组。
filter() 不会对空数组进行检测；不会改变原数组。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => {
  return num > 5;
});
 
console.log(res);  // [6, 7, 8, 9, 10]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

find

find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。

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

  

 

  
1
  
2
  
3
  
4
  
5
 

findIndex

findIndex方法常用来查找数组中满足条件的第一项元素的下标。

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

  

 

  
1
  
2
  
3
  
4
  
5
 

some

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

let data = ['1','2','3']
//一直在找符合条件的值，一旦找到，则不会继续迭代下去。
let re = data.some(function(item){
    // 只要判断做比较的变量是数组中有的就返回true
    return item === '1' // true
})
console.log(re)//true

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

与some()方法相反
every() 方法用于检测数组所有元素是否都符合指定条件（函数提供）。
every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

let data=['1','2','3']
// every(function(){})是对数组中每一项运行给定函数，如果该函数对每    一项返回true,则返回true,
// 一旦有一个不符合条件，则不会继续迭代下去
let result = data.every(function(item){
    return item === '1'
})
console.log(result) // false

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

文章来源: root181.blog.csdn.net，作者：前端纸飞机，版权归原作者所有，如需转载，请联系作者。

原文链接：root181.blog.csdn.net/article/details/126829821