Blogger Information
Blog 70
fans 4
comment 5
visits 104899
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP:实例演示PHP模块加载和JavaScript和PHP中for/forEach两种语言不一样遍历数组的区别
JiaJieChen
Original
762 people have browsed it

PHP:实例演示JavaScript和PHP中for/forEach两种语言不一样遍历数组的区别

一.JavaScript:for和forEach遍历数组

①for循环遍历数组

②forEach遍历数组

代码块

  1. <script>
  2. let box = document.querySelector(".box");
  3. //建立一个数组
  4. let arr = ["宝马", "奔驰", "奥迪", "雷克萨斯"];
  5. //用forEach遍历数组
  6. arr.forEach((item) => {
  7. box.append(item + "-");
  8. });
  9. //用for循环来遍历数组
  10. for (let i = 0; i < arr.length; i++) {
  11. box.before(arr[i] + "-");
  12. }
  13. </script>

二.PHP:for和forEach遍历数组

①for循环遍历数组

②forEach遍历数组

在php中 foreach 是小写,第一个参数是数组对象,第二个参数是键名(选填),第三个参数是遍历的变量,遍历出来的数据保存在变量中

代码块

  1. <?
  2. //用$符号声明一个变量。值是数组
  3. $Arr = ["宝马", "奔驰", "奥迪", "雷克萨斯"];
  4. //让后用for循环遍历这个数组
  5. for ($i=0; $i < count($Arr); $i++) {
  6. echo $Arr[$i].'<br>';
  7. }
  8. echo '<hr>';
  9. //在php中 foreach 是小写,第一个参数是数组对象,第二个参数是键名(选填),第三个参数是遍历的变量,遍历出来的数据保存在变量中
  10. foreach ($Arr as $key => $value) {
  11. echo $key .'=>' .$value;
  12. }
  13. ?>

二.PHP:require 引入外部文件/模块加载

大家可以看到,在这个页面中我直接引入了另外一个文件,可以直接访问到另外文件输出的内容,利用这个特点我们接下来模块化开发一个共同的页眉和页脚吧

小案例:模块化开发页眉页脚

使用require模块化引入php文件,使得代码更加的简洁,但是要提前设置好页眉和页脚,还有css样式

①css样式

  1. /* 初始化 */
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. a {
  8. text-decoration: none;
  9. color: white;
  10. }
  11. li {
  12. list-style: none;
  13. margin: 0.5em;
  14. height: 1.5em;
  15. }
  16. :root {
  17. background: #ccc;
  18. }
  19. /*设置导航样式*/
  20. .thead {
  21. position: fixed;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. background-color: #000;
  26. height: 40px;
  27. }
  28. .list {
  29. display: flex;
  30. justify-content: space-evenly;
  31. align-items: center;
  32. text-align: center;
  33. }
  34. .list > li:hover {
  35. background-color: yellowgreen;
  36. }
  37. /*设置页脚样式*/
  38. .tfoot {
  39. position: fixed;
  40. left: 0;
  41. bottom: 0;
  42. right: 0;
  43. text-align: center;
  44. background-color: #000;
  45. color: white;
  46. }
  47. /*设置主体样式*/
  48. .main {
  49. position: absolute;
  50. top: 40px;
  51. bottom: 1rem;
  52. }

②页眉

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>模块化开发页眉页脚</title>
  8. <style>
  9. @import url(/zwz/0425/style/style.css);
  10. </style>
  11. </head>
  12. <body>
  13. <!-- 页眉 -->
  14. <div class="thead">
  15. <thead class="nav">
  16. <ul class="list">
  17. <li class='item' ><a href="" >首页</a></li>
  18. <li class='item' ><a href="">技术博客</a></li>
  19. <li class='item' ><a href="">技术论坛</a></li>
  20. <li class='item' ><a href="">我的博客</a></li>
  21. <li class='item' ><a href="">会员中心</a></li>
  22. </ul>
  23. </thead>
  24. </div>

③页脚

  1. <!-- 页脚 -->
  2. <div class="tfoot">
  3. <tfoot>
  4. <p class="copyright"><? echo '小张';?>&copy; 版权所有</p>
  5. </tfoot>
  6. </div>
  7. </body>
  8. </html>

④主体

  1. <!-- 引入页眉 -->
  2. <? require 'php/thead.php'?>
  3. <!-- 主体 -->
  4. <div class="main">
  5. <ul>
  6. <!-- <li>HTML</li>
  7. <li>CSS</li>
  8. <li>JavaScript</li>
  9. <li>PHP</li> -->
  10. </ul>
  11. </div>
  12. <!-- 引入页脚 -->
  13. <? require 'php/tfoot.php'?>
Correcting teacher:灭绝师太灭绝师太

Correction status:qualified

Teacher's comments:关于网页的导航一般不会写固定, 数据从数据表中抓取, 前端遍历,另外需要注意尽量使用foreach去遍历php数组, 因为产生的是临时变量, 遍历结束后会被释放, 相比于for遍历数组来说速度更快~
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post