10_ES5中的数组循环.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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. // ES5中的数组循环
  11. var arr = [1,2,3,4,5,6,7,8,9];
  12. // foreach() 方法遍历数组中的每个元素
  13. // 参数:回调函数
  14. // 回调函数的参数:当前的值、当前值的索引、数组本身
  15. // arr.forEach(function(val,key,arr){
  16. // if(val == 3){
  17. // return;
  18. // }
  19. // console.log(val,key,arr);
  20. // });
  21. // map() 方法遍历数组中的每个元素,返回一个新的数组
  22. // var arr2 = arr.map(function(val,index,arr){
  23. // console.log(val,index,arr);
  24. // // 最终返回的值会组成一个新的数组返回 返回值可以任意操作
  25. // return val * 10;
  26. // });
  27. // console.log(arr2);
  28. // filter() 方法遍历数组中的每个元素,返回一个新的数组
  29. // var arr3 = arr.filter(function(val,index,arr){
  30. // // 返回值为布尔值 为true的元素会被保留 为false的元素会被过滤掉
  31. // return val > 5;
  32. // });
  33. // console.log(arr3);
  34. // some() 方法遍历数组中的每个元素,返回一个布尔值
  35. // var bool1 = arr.some(function(val,index,arr){
  36. // // 只要有一个元素满足条件 就会返回true
  37. // console.log(val);
  38. // return val > 5;
  39. // })
  40. // console.log(bool1);
  41. // every() 方法遍历数组中的每个元素,返回一个布尔值
  42. // var bool2 = arr.every(function(val,index,arr){
  43. // // 只要有一个元素不满足条件 就会返回false
  44. // return val > 5;
  45. // });
  46. // console.log(bool2);
  47. // reduce() 累加器
  48. // var num = arr.reduce(function(pre,cur,index,arr){
  49. // // pre:上一次回调函数返回的值
  50. // // cur:当前值
  51. // // index:当前值的索引
  52. // // arr:数组本身
  53. // console.log(pre,cur,index,arr);
  54. // return pre + cur;
  55. // })
  56. // console.log(num);
  57. </script>
  58. </body>
  59. </html>