| 数组几种遍历介绍(共同点：回调函数一样) | 应用场景 | 回调执行次数 | 函数返回值 | 回调是否需要return |
|---|---|---|---|---|
| map遍历 | 映射数组 | == 原数组长度 | 新数组(==) | 一定要return（当前元素） |
filter遍历 |
过滤数组 | == 原数组长度 | 新数组(!=) | return true(元素添加到新数组) |
| forEach遍历 | 遍历数组 | == 原数组长度 | 无 | 无 |
| some遍历 | 找出符合条件的数 | != 原数组长度 | 布尔类型 | return true；循环结束 |
| every遍历 | 判断所有元素是否符合条件 | != 原数组长度 | 布尔类型 | return true; 循环继续 |
数组map遍历
遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let arr = [23, 31, 60, 88, 90, 108, 260]
/* 1. 需求：数组中的每一个元素+1 */
let arr1 = arr.map((value, index) => {
return value + 1 //让每个元素的值+1
})
console.log(arr1);//) [24, 32, 61, 89, 91, 109, 261]
/* 2.需求：超过100的商品打八折 */
let arr2 = arr.map((value,index)=>{
if(value>100){
return value* 0.8
}else{
return value;
}
})
console.log('arr2',arr2);// [23, 31, 60, 88, 90, 86.4, 208]
</script>
</body>
</html>
- 注意点
- 回调函数执行次数 == 数组的长度,
- 数组中有duosha
- map函数返回的新数组长度==原数组长度
- 回调函数中一定要return，返回的是当前遍历的元素
- 如果不return，新数组中每一个元素都成undefined
- 回调函数执行次数 == 数组的长度,
数组filter遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let arr = [23, 31, 60, 88, 90, 108, 260]
/* 需求：找出数组中的偶数 */
let arr1 = arr.filter((item) => {
return item % 2 == 0
})
console.log(arr1)//[60, 88, 90, 108, 260]]
</script>
</body>
</html>
- 注意点：
-
回调函数执行次数 ==数组长度
- 数组中有多少个元素，回调函数就执行几次
-
filter 函数返回的新数组长度 !=原数组长度
-
回调函数一定要return，返回一个布尔类型值
- 结果为true：当前遍历元素就会添加到新数组中
- 结果为false:当前遍历元素不会添加到新数组中
-
数组forEach遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// forEach应用场景：用于遍历数组，相当于for循环另一种写法
let arr = [23, 31, 60, 88, 90, 108, 260];
arr.forEach((item,index)=>{
console.log(`下标为${
index}的元素是${
item}`);
})
</script>
</body>
</html>
- 注意点：
- 回调函数执行次数==数组长度
- 数组中有多少个元素，回调函数就会执行几次
- forEach函数没有返回值
- 回调函数不需要return
- 就算手动return，也不会结束循环
- 回调函数执行次数==数组长度
数组some遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
/* 应用场景：用于判断数组中是否存在满足条件的元素 */
/* 需求：判断数组中有没有负数 */
let arr = [23, 31, 60, 88, -50, 90, 108, 260]
let arr1 = arr.some((item, index) => {
console.log(`下标为${
index}的元素是${
item}`)
return item < 0 //循环结束
})
</script>
</body>
</html>
- 注意点
- 回调函数执行次数 != 数组长度
- some函数在遍历的时候可以中途结束
- some函数返回一个布尔类型值
- 回调函数返回布尔类型值用于结束遍历
- retuen true; 遍历结束，且some函数返回布尔值用于结束遍历
- （默认）return false; //遍历继续，且some函数返回值为false
- 回调函数执行次数 != 数组长度
findIndex和includes方法
- findIndex 可以方便的找到某个关键字在数组中的下标
findexIndex语法
// 找到hello在数组中的下标，如果数组中没有hello，则得到-1
let idx = 数组.findIndex( item => {
return item == 'hello'
} )
includes语法
- 判断字符串或数组是否包含某个内容，返回bool类型
'hello'.includes('e') // 返回true
'hello'.includes('x') // 返回false
['hello','world'].includes('hello') //返回true
['hello','world'].includes('h') // 返回false
数组every遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 应用场景：用于判断数组中是否所有元素都满足条件 */
/* 判断数组中有没有负数 */
let arr = [23, 31, 60, 88,-50, 90, 108, 260];
let arr1 = arr.every((item,index)=>{
console.log(`下标为${
index}的元素是${
item}`);
return item>0
})
console.log(arr1);//false
</script>
</body>
</html>
- 注意点
- 回调函数执行次数 !=数组长度
- every函数返回一个布尔类型值
- 回调函数返回布尔值用于结束遍历
- return true; //遍历继续，且every函数返回值为true
- 默认return false; //遍历结束，且every函数返回值为false