9_循环方法.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <script>
  10. let arr = [1,2,3,4,5,6,7,8,9,10];
  11. // 1. for循环
  12. // for(let i=0;i<arr.length;i++){
  13. // console.log(arr[i]);
  14. // }
  15. // 2. forEach循环
  16. // 回调函数中可以传递3个参数
  17. // 1. 数组中的每一个元素
  18. // 2. 数组中的每一个元素的索引
  19. // 3. 数组本身
  20. // arr.forEach(function(val,index,thisArr){
  21. // console.log(val,index,thisArr);
  22. // })
  23. // 可以只接收数组内的值,不接收索引和数组本身
  24. // arr.forEach(function(val){
  25. // console.log(val);
  26. // })
  27. // 3. map循环
  28. // 回调函数中可以传递3个参数
  29. // 1. 数组中的每一个元素
  30. // 2. 数组中的每一个元素的索引
  31. // 3. 数组本身
  32. // map循环和forEach循环的区别
  33. // 1. map循环有返回值,forEach循环没有返回值
  34. // 2. map循环一般用作于对数组中的每一个元素进行操作
  35. // let newArr = arr.map(function(val,index,thisArr){
  36. // // console.log(val,index,thisArr);
  37. // return "a" + val;
  38. // })
  39. // console.log(newArr);
  40. // 4. filter循环
  41. // filter循环和map循环的区别
  42. // filter 常用作与过滤数组的值
  43. // 只有循环返回true的时候才有资格进入新数组
  44. // let newArr = arr.filter(function(val,index,thisArr){
  45. // if(val > 5){
  46. // return true
  47. // }
  48. // })
  49. // console.log(newArr);
  50. // 5. some循环
  51. // some常用作于判断数组中是否有满足条件的元素
  52. // 只要有一个元素满足条件,就会返回true
  53. // 所有元素都不满足条件,才会返回false
  54. // let bool = arr.some(function(val,index,thisArr){
  55. // if(val > 5){
  56. // // 如果满足条件一定要 return true
  57. // return true;
  58. // }
  59. // })
  60. // console.log(bool);
  61. //6. every循环
  62. // every循环和some循环的区别
  63. // every循环只有所有元素都满足条件,才会返回true
  64. // 哪怕只要有一个元素不满足条件,就会返回false
  65. // let bool = arr.every(function(val,index,thisArr){
  66. // if(val >5){
  67. // // 如果满足条件一定要 return true
  68. // return true;
  69. // }
  70. // })
  71. // console.log(bool);
  72. // 7. reduce循环
  73. // 一共四个参数
  74. // 1. 上一次的返回值
  75. // 2. 当前的元素
  76. // 3. 当前的索引
  77. // 4. 数组本身
  78. // 常用作于数组的累加
  79. // arr.reduce(function(pre,next,index,thisArr){
  80. // console.log(pre,next,index,thisArr);
  81. // return pre + next;
  82. // })
  83. // 8. for in 循环
  84. // 遍历对象的属性
  85. // let person = {
  86. // name:"张三",
  87. // age:18,
  88. // sex:"男",
  89. // school:"清华大学"
  90. // }
  91. // for(let key in person){
  92. // console.log(key);
  93. // // 如果想通过一个变量去对中找相匹配的属性用[]
  94. // console.log(person[key])
  95. // }
  96. // 9. find 循环
  97. // find 返回第一个满足条件的值
  98. // let newVal = arr.find(function(val,index,thisArr){
  99. // if(val >5){
  100. // return true;
  101. // }
  102. // })
  103. // console.log(newVal)
  104. // 10. findIndex 循环
  105. // findIndex 返回第一个满足条件的索引
  106. // let newIndex = arr.findIndex(function(val,index,thisArr){
  107. // if(val > 5){
  108. // return true;
  109. // }
  110. // })
  111. // console.log(newIndex)
  112. // 11. for of 循环
  113. // for of 循环数组(可迭代的对象)
  114. // for(let val of arr){
  115. // console.log(val);
  116. // }
  117. // 通过添加keys()方法可以获取数组的索引
  118. // for(let index of arr.keys()){
  119. // console.log(index);
  120. // }
  121. // 通过添加values()方法可以获取数组的值
  122. // for(let val of arr.values()){
  123. // console.log(val);
  124. // }
  125. // 通过添加entries()方法可以获取数组的索引和值
  126. // for(let _val of arr.entries()){
  127. // console.log(_val[0],_val[1]);
  128. // }
  129. // 通过结构赋值直接将索引和值赋值给变量
  130. for(let [val,index] of arr.entries()){
  131. console.log(val,index);
  132. }
  133. </script>
  134. </body>
  135. </html>