遍歷陣列的幾種方法

Silent Land發表於2020-10-01
陣列
陣列幾種遍歷介紹(共同點：回撥函式一樣)應用場景回撥執行次數函式返回值回撥是否需要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

相關文章