遍历数组的几种方法

最新推荐文章于 2024-06-18 09:23:47 发布

Silent Land

最新推荐文章于 2024-06-18 09:23:47 发布

阅读量9.6k

点赞数 10

分类专栏： JavaScript # ECMAScript 6

本文链接：https://blog.csdn.net/weixin_44757417/article/details/108895443

版权

JavaScript 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

ECMAScript 6

13 篇文章 1 订阅

订阅专栏

数组几种遍历介绍(共同点：回调函数一样)	应用场景	回调执行次数	函数返回值	回调是否需要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>