溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS中有哪些循環方法”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS中有哪些循環方法”這篇文章吧。
一、for循環
四部曲:
1、設置初始值 var i = 0
2、設置循環執行條件 i < 5
3、執行循環體中的內容{ [循環體] } 包起來的部分
4、每一輪循環完成后都執行我們的i++累加操作
for(var i = 0;i<5;i++){
console.log(i)
}break/continue:在循環體中遇到這兩個關鍵字，循環體中的后面的代碼就不在執行了
break：在循環體中，出現break，整個循環就直接的結束了，i++最后的這個累加的操作也不執行了
continue:在循環體中，出現continue，當前這一輪的循環就結束了，繼續下一輪的循環，i++繼續執行
for(var i = 0;i<10;i++){
if(i<=5){
i+=2;
continue;
}
i+=3;
break;
console.log(i)//不執行
}
console.log(i)//9二、for in 循環
用來循環一個對象中的屬性名和屬性值的
var object = {
name:'小李',
age:18,
height:'170cm',
hobby:'敲代碼'
}
//對象中有多少組鍵值對，就循環幾次
//順序問題:首先循環數字的屬性名(按照從小到大),再把剩下的屬性名按照我們寫得順序循環
for(var key in object){
console.log(key);//每一次循環獲取的屬性名
console.log(object[key])// 獲取屬性值 在for in 中只能通過對象名[key]來獲取 不能寫obj.key
}案例：表格隔行換色 （三元運算符滿足條件如果有多個執行，可以加上括號，然后使用逗號分隔）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,div,ul,li{
margin:0;
padding: 0;
font-family: Arial;
font-size:12px;
}
ul li{
list-style:none;
}
#list{
margin:10px auto 0;
padding:10px;
width:500px;
border:1px solid #ddd;
border-radius:10px;
/*background: -webkit-linear-gradient(top left,#31b0d5,#67b168,#ac2925)*/
}
#list li{
height:30px;
line-height: 30px;
cursor:pointer;
}
.c1{
background:#ddd;
}
.c2{
background: #a6e1ec;
}
.c3{
background: #67b168;
}
</style>
</head>
<body>
<div id='list'>
<ul>
<li>11111111111111111111111111</li>
<li>22222222222222222222222222</li>
<li>33333333333333333333333333</li>
<li>44444444444444444444444444</li>
<li>55555555555555555555555555</li>
<li>66666666666666666666666666</li>
<li>11111111111111111111111111</li>
<li>22222222222222222222222222</li>
<li>33333333333333333333333333</li>
<li>44444444444444444444444444</li>
<li>55555555555555555555555555</li>
<li>66666666666666666666666666</li>
</ul>
</div>
<script type='text/javascript'>
//原理：操作所有的li，讓按照奇偶行的規律，改變他的class樣式的屬性值，奇數行是c1，偶數行是c2
//通過元素的標簽名獲取一組元素
// document.getElementsByTagName('元素的標簽名字')
//在整個文檔中（獲取的范圍，上下文），我們通過元素的標簽名來獲取一組元素
//獲取整個文檔的所有的li，他是一個集合，我們把這個集合叫做類數組（類似于數組）
//并且類數組是對象數據類型的
// var oLis = document.getElementsByTagName('li');
//索引:就是代表當前是第幾個元素的位置下標，索引是從0開始的
//length：代表獲取的集合的長度，或者是當前獲取了多少li
//通過dom方法獲取到的類數組可以通過用.item(索引)來獲取某一個
var oList = document.getElementById('list');
var oLis = oList.getElementsByTagName('li');
for(var i = 0;i<oLis.length;i++){
var oLi = oLis[i];
i%2===0?oLi.className = 'c1':oLi.className='c2'
}
</script>
</body>
</html>以上是“JS中有哪些循環方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
