常见遍历方法 for循环forEachmapfilterfindfindIndexsomeevery

Posted 2022-09-16 前端纸飞机

for循环

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

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

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)

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

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

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]

完整见：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 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

map

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

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

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]

可见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]

find

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

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

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

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

与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