js循环3 学习总结
封面画师：唏嘘的星辰 p站ID：13312138
for循环嵌套
案例1
先执行 var i = 0; 判断 i < 10,
成立再去执行内部的循环，先去执行 var j = 0 ，
再去判断 j < 10 ,如果成立，去执行内部循环体，再去执行j++ ，
再去判断是否小于10，如果小于10，在执行内部循环，直到j不小于10，最后执行i++
i 和 j 值的变化
ij
00 1 2 3 4 5 6 7 8 9
10 1 2 3 4 5 6 7 8 9
20 1 2 3 4 5 6 7 8 9
…
90 1 2 3 4 5 6 7 8 9
// 外循环
for(var i = 0;i<10;i++){
// console.log(i) //0-9
// 内循环
for(var j=0;j<10;j++){
// i=0;j=0
// console.log("i=" + i + ";j=" + j)
console.log(`i=${i};j=${j}`)
}
}案例2
for(var i= 0;i<5;i++){
// break 跳出离他最近的循环嵌套
for(var j = 0;j<5;j++){
console.log(i,j)
break
}
}
// i = 0 j = 0
// i = 1 j = 0
// i = 2 j = 0
// i = 3 j = 0
// i = 4 j = 0案例3
for (var i = 0; i < 3; i++) {
// break 跳出离他最近的循环嵌套
for (var j = 0; j < 3; j++) {
console.log(i, j)
if(j<2){
break
}
}
}
/*
i = 0 j=0
i = 1 j= 0
i = 2 j = 0
*/
案例4
for(var i = 0;i<3;i++){
for(var j = 0;j<3;j++){
if(j==2){
break
}
console.log(j,"--------------------") //打印几次 分别多少
// 0 1
}
console.log(i,"+++++++++++++++++++++++++")//打印几次 分别多少 0 1 2
}
/*
i = 0 j = 0 1 i = 0
i = 1 j=0 1 i = 1
i=2 j=0 1 i = 2
*/数据分析
案例1 （弹性布局）
<style>
#main{
width: 1200px;
margin: 0 auto;
/* 弹性布局 */
display: flex;
/* 水平的排版方式 space-around：周围有空间*/
/* space-between 俩者之间有间距 */
justify-content:space-between;
/* 换行 */
flex-wrap: wrap;
border: 1px solid red;
}
#main .item{
width: 250px;
padding: 10px;
}
#main img{
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div id="main">
</div>
<script src="腾发.js"></script>
<script>
</script>
</body>JS文件（因篇幅问题，部分数据已被删减）：
var data = {
"status": 200,
"success": true,
"msg": "操作成功",
"data": {
"totalElements": 3754,
"pages": 188,
"content": [
{
"ind": "202107151725080963",
"carName": "2019款 揽胜星脉(进口) 250PS",
"dateOfRegistration": 1546272000000,
"currentPrice": 40.9,
"mileage": 3.16,
"saleType": 2,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/257819713441103872.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202105231822590022",
"carName": "2003款 陆地巡洋舰 4.5L 手动 GX",
"dateOfRegistration": 1075564800000,
"currentPrice": 9.9,
"mileage": 30.16,
"saleType": 2,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/227801833416949760.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202106211755020723",
"carName": "2014款 起亚K5 2.0L 手动 GL",
"dateOfRegistration": 1404144000000,
"currentPrice": 4.9,
"mileage": 10.31,
"saleType": 2,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/270495116668436480.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202107201459061126",
"carName": "2011款 汉兰达 2.7L 自动 两驱豪华版 7座",
"dateOfRegistration": 1359648000000,
"currentPrice": 8.9,
"mileage": 13.52,
"saleType": 2,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/275572024418500608.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202106161151190127",
"carName": "2007款 捷豹XJ(进口) XJ6L 新一代皇家加长版",
"dateOfRegistration": 1196438400000,
"currentPrice": 19.9,
"mileage": 16.68,
"saleType": 0,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/278907000484528128.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202107191448321079",
"carName": "2015款 奔驰E级 改款 E180L 运动型",
"dateOfRegistration": 1451577600000,
"currentPrice": 19.9,
"mileage": 10.8,
"saleType": 0,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/257802955825086464.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202109231134445865",
"carName": "2017款 别克GL8 25S 舒适型 国V",
"dateOfRegistration": 1509465600000,
"currentPrice": 16.59,
"mileage": 9.0,
"saleType": 0,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/178107228115435520.jpeg?x-oss-process=style/watermark",
"reportAssess": false
},
{
"ind": "202106171618320442",
"carName": "2017款 自由侠 180T 自动动能版+",
"dateOfRegistration": 1506787200000,
"currentPrice": 6.99,
"mileage": 8.0,
"saleType": 0,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/275287714641739776.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202108061724331343",
"carName": "2014款 宝马5系 525Li 领先型",
"dateOfRegistration": 1427817600000,
"currentPrice": 20.9,
"mileage": 15.42,
"saleType": 2,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/275570205638262784.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202106161645460187",
"carName": "2020款 威霆 2.0T 精英版 7座",
"dateOfRegistration": 1612108800000,
"currentPrice": 46.9,
"mileage": 0.08,
"saleType": 2,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/275286122685267968.jpg?x-oss-process=style/watermark",
"reportAssess": true
},
{
"ind": "202106160917050115",
"carName": "2013款 兰德酷路泽(进口) 4000 中东版",
"dateOfRegistration": 1420041600000,
"currentPrice": 43.9,
"mileage": 11.87,
"saleType": 2,
"cover": "https://tfcar.oss-cn-hangzhou.aliyuncs.com/265569758785568768.jpg?x-oss-process=style/watermark",
"reportAssess": true
}
]
},
"time": "2022-07-08 15:03:25"
}