8.数组的扩展方法.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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. // 1.forEach 单纯遍历 遍历数组 执行某些操作;返回值undefined
  11. const arr = [11, 22, 33, 44, 55];
  12. // let x = null;
  13. // let y = arr.forEach((item, index, array) => {
  14. // console.log(item, 'item')
  15. // console.log(index, 'index')
  16. // console.log(array, 'array')
  17. // console.log(this, 'this')
  18. // // x += item;
  19. // // if(item === 33) {
  20. // // // continue; break; 不能跳出循环
  21. // // }
  22. // })
  23. // console.log(y, 'yyyyy')
  24. // 2.for of 遍历任何有迭代的对象
  25. // Object.entries() 以数组形式返回对象的键值对
  26. const obj = { name: "图图", age: 3 };
  27. // const arr1 = Array.from({ 0: 1, 1: 2, 2: 3, length: 3 });
  28. // for (let i of arr1) {
  29. // console.log(i, 'i')
  30. // }
  31. // 3.for in 遍历的数组 对象 会遍历原型链上的属性
  32. // Array.prototype.x = 100;
  33. // for(let key in arr) {
  34. // console.log(key,'i')
  35. // }
  36. // console.log(arr,'arr')
  37. // 4.filter 过滤数组 返回一个新数组 不改变原数组
  38. // let xx = arr.filter((item) => {
  39. // console.log(item,'item')
  40. // return item > 22
  41. // })
  42. // console.log(xx,'xx')
  43. // console.log(arr,'arr')
  44. // 5.map 一对一映射 返回一个新数组 不改变原数组
  45. // let xx = arr.map((item) => {
  46. // console.log(item, 'item')
  47. // return item += 22
  48. // })
  49. // console.log(xx, 'xx')
  50. // console.log(arr, 'arr')
  51. // 6.some 遇到第一个满足条件返回true 不满足返回false 不改变原数组
  52. // some遍历空数组 返回false every遍历空数组 返回true
  53. // let arr1 = [];
  54. // // let xx = arr1.some((item) => {
  55. // // console.log(item, 'item');
  56. // // return item > 66;
  57. // // })
  58. // // console.log(xx, 'xx')
  59. // // console.log(arr, 'arr')
  60. // 7.every 遇到第一个不满足条件返回false 全部满足返回true 不改变原数组
  61. // let xx = arr1.every((item) => {
  62. // console.log(item, 'item');
  63. // return item > 0;
  64. // })
  65. // console.log(xx, 'xx')
  66. // console.log(arr, 'arr')
  67. // const arr2 = arr.reduce((pre, item,index) => {
  68. // // console.log(pre, 'pre')
  69. // // console.log(item, 'item')
  70. // // console.log(index, 'index')
  71. // return pre += item -10;
  72. // },0)
  73. // console.log(arr2, 'arr2')
  74. // const arr3 = [11,22,33,11,44,3,22];
  75. // console.log(arr3.includes(2),'includes')
  76. // let xxx = [];
  77. // 8.reduce 迭代数组中的每个元素 将其结果汇总为单个值 聚合计算
  78. // arr3.reduce((pre,item,index,array) => {
  79. // if(!pre.includes(item)) {
  80. // pre.push(item);
  81. // }
  82. // return pre;
  83. // },xxx《initalValue》)
  84. // console.log(xxx,'xxx')
  85. // [[1,2],[3,4,[5]]] => [1,2,3,4,5]
  86. // flat 将嵌套的数组拍平
  87. // 9.find 查找数组中是否有满足条件的值 遇到第一个满足的则返回 都不满足返回undefined
  88. // const x1 = arr.find((item) => {
  89. // return item > 66;
  90. // })
  91. // console.log(x1,'x1')
  92. // 10.Array.from 将类数组对象转换成数组
  93. // Array.isArray() 判断是否是数组
  94. console.log(Array.isArray(obj),'isArray')
  95. </script>
  96. </body>
  97. </html>