search

博客列表 >PHP:实例演示PHP模块加载和JavaScript和PHP中for/forEach两种语言不一样遍历数组的区别

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

JiaJieChen
JiaJieChen原创
2021年04月26日 14:33:28761浏览

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

一.JavaScript：for和forEach遍历数组

①for循环遍历数组

②forEach遍历数组

代码块

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

二.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. }
  12. li {
  13.   list-style: none;
  14.   margin: 0.5em;
  15.   height: 1.5em;
  16. }
  18. :root {
  19.   background: #ccc;
  20. }
  22. /*设置导航样式*/
  23. .thead {
  24.   position: fixed;
  25.   left: 0;
  26.   top: 0;
  27.   right: 0;
  28.   background-color: #000;
  29.   height: 40px;
  30. }
  32. .list {
  33.   display: flex;
  34.   justify-content: space-evenly;
  35.   align-items: center;
  36.   text-align: center;
  37. }
  38. .list > li:hover {
  39.   background-color: yellowgreen;
  40. }
  42. /*设置页脚样式*/
  43. .tfoot {
  44.   position: fixed;
  45.   left: 0;
  46.   bottom: 0;
  47.   right: 0;
  48.   text-align: center;
  49.   background-color: #000;
  50.   color: white;
  51. }
  53. /*设置主体样式*/
  55. .main {
  56.   position: absolute;
  57.   top: 40px;
  58.   bottom: 1rem;
  59. }

②页眉

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

③页脚

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

④主体

  1. <!-- 引入页眉 -->
  2. <? require 'php/thead.php'?>
  4.     <!-- 主体 -->
  5.     <div class="main">
  6.         <ul>
  7.             <!-- <li>HTML</li>
  8.             <li>CSS</li>
  9.             <li>JavaScript</li>
  10.             <li>PHP</li> -->
  11.         </ul>
  12.     </div>
  14. <!-- 引入页脚 -->
  15. <? require 'php/tfoot.php'?>
上一条：数字金额转大写文字下一条：PHP第一课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多