10.数组的扩展方法.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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>你好</li>
  11. <li>你好</li>
  12. <li>你好</li>
  13. <li>你好</li>
  14. <li>你好</li>
  15. </ul>
  16. <script>
  17. let arr = [2, 4, 6];
  18. let obj = {
  19. name: "小王",
  20. age: 100,
  21. address: "北京",
  22. };
  23. let arr1 = [];
  24. // 1.forEach:两个字段 第一个代表每一项 第二个代表下标 改变的是自己本身数组内的元素
  25. arr.forEach((ele, index) => {
  26. // return ele*3;
  27. arr1.push(ele * 3);
  28. });
  29. // console.log(arr)
  30. // console.log(arr1)//[0,1,2]
  31. // 2.map 主要是为了映射出一个新数组 将特定的条件发给新数组 不会改变原数组
  32. // let arr2 = arr.map((ele)=> {
  33. // console.log(ele,'你好')
  34. // return ele*2;
  35. // })
  36. // console.log(arr2,'arr2')
  37. // console.log(arr,'arr')
  38. // 3.for in 可以遍历对象 在对象中k代表属性;可以遍历数组 在数组中k代表下标
  39. // for(let k in obj) {
  40. // console.log(k,'k')
  41. // console.log(obj[k])
  42. // }
  43. // 4.for of 不能遍历对象 可以改变;可以遍历数组 k代表的是每一项
  44. for (let k of arr) {
  45. console.log(k, "k");
  46. }
  47. // 5.filter过滤 符合符合条件的元素返回到新数组中 原数组不发生改变
  48. let arr3 = arr.filter((ele) => {
  49. return ele >= 4;
  50. });
  51. console.log(arr3);
  52. console.log(arr);
  53. // 6.some 判断数组是否符合当前条件 有一个符合 则是true;都不符合 才为false
  54. var newArr = [23, 3, 4, 5, 3, 45, 6, 887, 655, 35];
  55. // let arr4 = newArr.some((ele)=>{
  56. // return ele > 888;
  57. // })
  58. //7. every 判断数组是否符合当前条件 有一个不符合 则是false;都符合 才为true
  59. // let arr4 = newArr.every((ele) => {
  60. // return ele < 888;
  61. // });
  62. // 8. reduce 从左到右 累增累减
  63. // let arr4 = newArr.reduce((ele, num) => {
  64. // return ele * num;
  65. // });
  66. // console.log(arr4);
  67. // console.log(arr);
  68. // 9. find 查找符合当前条件 并反出第一个值
  69. let arr5 = newArr.find((ele) => {
  70. return ele > 788;
  71. });
  72. console.log(arr5,'你好');
  73. console.log(arr);
  74. // 10. 类数组转数组 Array.from
  75. var list = document.querySelectorAll("ul li");
  76. console.log(list,'list')
  77. // console.log([...list],'list')
  78. console.log(Array.from(list),'list')
  79. // 11. 判断是否是数组
  80. console.log(Array.isArray(list))
  81. console.log(Array.isArray(arr))
  82. </script>
  83. </body>
  84. </html>