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

一.JavaScript：for和forEach遍历数组

①for循环遍历数组

②forEach遍历数组

代码块

       

        
<script>
        
let box=document.querySelector(".box");
        

        
//建立一个数组
        
let arr=["宝马","奔驰","奥迪","雷克萨斯"];
        
//用forEach遍历数组
        
arr.forEach((item)=>{
        
box.append(item+"-");
        
});
        

        
//用for循环来遍历数组
        
for(let i=0;i<arr.length;i++){
        
box.before(arr[i]+"-");
        
}
        
script>
       

二.PHP：for和forEach遍历数组

①for循环遍历数组

②forEach遍历数组

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

代码块

       

        

        
//用$符号声明一个变量。值是数组
        
$Arr=["宝马","奔驰","奥迪","雷克萨斯"];
        
//让后用for循环遍历这个数组
        
for($i=0;$i<count($Arr);$i++){
        
echo $Arr[$i].'
';
        
}
        
echo'
';
        
//在php中 foreach 是小写，第一个参数是数组对象，第二个参数是键名（选填），第三个参数是遍历的变量，遍历出来的数据保存在变量中
        
foreach($Arras$key=>$value){
        
echo $key.'=>'.$value;
        
}
        

        
?>
       

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

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

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

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

①css样式

       

        
/* 初始化 */
        
*{
        
padding:0;
        
margin:0;
        
box-sizing:border-box;
        
}
        
a{
        
text-decoration:none;
        
color:white;
        
}
        

        
li{
        
list-style:none;
        
margin:0.5em;
        
height:1.5em;
        
}
        

        
:root{
        
background:#ccc;
        
}
        

        
/*设置导航样式*/
        
.thead{
        
position:fixed;
        
left:0;
        
top:0;
        
right:0;
        
background-color:#000;
        
height:40px;
        
}
        

        
.list{
        
display:flex;
        
justify-content:space-evenly;
        
align-items:center;
        
text-align:center;
        
}
        
.list>li:hover{
        
background-color:yellowgreen;
        
}
        

        
/*设置页脚样式*/
        
.tfoot{
        
position:fixed;
        
left:0;
        
bottom:0;
        
right:0;
        
text-align:center;
        
background-color:#000;
        
color:white;
        
}
        

        
/*设置主体样式*/
        

        
.main{
        
position:absolute;
        
top:40px;
        
bottom:1rem;
        
}
       

②页眉

       

        

        

        
lang="en">
        

        
charset="UTF-8">
        
http-equiv="X-UA-Compatible"content="IE=edge">
        
name="viewport"content="width=device-width, initial-scale=1.0">
        

        

        


        

        

        
class="thead">
        
class="nav">
        
class="list">
        
class='item'>href="">首页
        
class='item'>href="">技术博客
        
class='item'>href="">技术论坛
        
class='item'>href="">我的博客
        
class='item'>href="">会员中心