7.数组的扩展方法.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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. <ul>
  10. <li>www</li>
  11. <li>www</li>
  12. <li>www</li>
  13. <li>www</li>
  14. </ul>
  15. <script>
  16. var arr = [12, 34, 56, 78, 90];
  17. var obj = {
  18. a: 1,
  19. b: 2,
  20. c: 3,
  21. };
  22. // 1.forEach
  23. // arr.forEach((item,index) => {
  24. // // item 每一项的值
  25. // // index 每一项的下标
  26. // console.log(item,index);
  27. // })
  28. // 2.for of
  29. // for of 循环数组时 key代表着每一项的值
  30. // for(var key of arr) {
  31. // console.log(key);
  32. // }
  33. // for(var key of obj) {
  34. // console.log(key);
  35. // }
  36. // 3.for in
  37. // 可以对对象进行循环 key代表着每一项
  38. // 对数组进行循环 key代表着下标
  39. // for(var key in obj) {
  40. // console.log(key)
  41. // }
  42. // for(var key in arr) {
  43. // console.log(key);
  44. // }
  45. // 4.filter 过滤 将符合条件的值反出
  46. // let arr1 = arr.filter((ele) => {
  47. // if (ele > 30) {
  48. // console.log(ele);
  49. // }
  50. // });
  51. //5.map 映射出执行完操作的数组
  52. // let arr2 = arr.map((ele) => {
  53. // // console.log(ele);
  54. // return ele * 2;
  55. // });
  56. // console.log(arr);
  57. // console.log(arr2);
  58. // 6.some 数组中有一项满足条件 则为true 都不满足才为false
  59. let newArr = [11,22,33,44,55];
  60. // let newArr1 = newArr.some((ele) => {
  61. // return ele > 50
  62. // })
  63. // console.log(newArr1)
  64. // 7.every 数组中都满足条件才为true 若有一个不满足则为false
  65. // let newArr2 = newArr.every((ele) => {
  66. // return ele > 10
  67. // })
  68. // console.log(newArr2)
  69. // 8.reduce 从左到右 累加累减
  70. // let newArr3 = newArr.reduce((total,num) => {
  71. // return total*num;
  72. // })
  73. // console.log(newArr3);
  74. // 9.find 找到满足条件的第一个值
  75. // findIndex 找到满足条件的第一个值的下标
  76. // let newArr4 = newArr.find((ele) =>{
  77. // return ele > 30
  78. // })
  79. // let newArr4 = newArr.findIndex((ele) =>{
  80. // return ele > 30
  81. // })
  82. // console.log(newArr4)
  83. // 10.Array.from 将类数组转为数组
  84. var Lis = document.getElementsByTagName("li");
  85. console.log(Array.from(Lis))
  86. </script>
  87. </body>
  88. </html>