JavaScript - 迴圈和遍歷
阿新 • • 發佈:2018-12-17
for語句
<form name="selectForm"> <p> <label for="musicTypes">Choose some music types, then click the button below:</label> <select id="musicTypes" name="musicTypes" multiple="multiple"> <option selected="selected">R&B</option> <option>Jazz</option> <option>Blues</option> <option>New Age</option> <option>Classical</option> <option>Opera</option> </select> </p> <p><input id="btn" type="button" value="How many are selected?" /></p> </form> <script> function howMany(selectObject) { var numberSelected = 0; for (var i = 0; i < selectObject.options.length; i++) { if (selectObject.options[i].selected) { numberSelected++; } } return numberSelected; } var btn = document.getElementById('btn'); btn.addEventListener('click', function() { alert('Number of options selected: ' + howMany(document.selectForm.musicTypes)); }); </script>
do...while語句
先執行do中的語句,之後再判斷while中的條件是否為真,以決定是否再次執行do中的語句。
var i = 0;
do {
i += 1;
console.log(i);
} while (i < 5);
while語句
先判斷while中的條件是否為真,以決定是否執行之後的花括號塊中的語句。
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
labeled語句
用一標籤名稱,指代迴圈語句。
markLoop: while (theMark == true) { doSomething(); }
break語句
使用break語句來結束迴圈;若break語句後沒有指定標籤,那麼只是結束當前的迴圈,要繼續執行後續的語句;若break語句後連線有指定的標籤,那麼就結束標籤指代的迴圈。
for (var i = 0; i < a.length; i++) { if (a[i] == theValue) { break; } } var x = 0; var z = 0; labelCancelLoops: while (true) { console.log('Outer loops: ' + x); x += 1; z = 1; while (true) { console.log('Inner loops: ' + z); z += 1; if (z === 10 && x === 10) { break labelCancelLoops; } else if (z === 10) { break; } } }
continue語句
使用continue語句來繼續迴圈;若continue語句後沒有指定標籤,那麼只是跳過當前迴圈下方的語句,繼續執行當前迴圈;若continue語句後連線有指定的標籤,那麼就跳過下方的語句,繼續執行標籤指定的迴圈。
var i = 0;
var n = 0;
while (i < 5) {
i++;
if (i == 3) {
continue;
}
n += i;
console.log(n);
}
//1,3,7,12
var i = 0;
var n = 0;
while (i < 5) {
i++;
if (i == 3) {
// continue;
}
n += i;
console.log(n);
}
// 1,3,6,10,15
var i = 0;
var j = 10;
checkiandj:
while (i < 4) {
console.log(i);
i += 1;
checkj:
while (j > 4) {
console.log(j);
j -= 1;
if ((j % 2) == 0) {
continue checkj;
}
console.log(j + ' is odd.');
}
console.log('i = ' + i);
console.log('j = ' + j);
}
for...in語句
該語句遍歷物件中的列舉屬性,也可以用來遍歷陣列中的元素。
function dump_props(obj, obj_name) {
var result = '';
for (var i in obj) {
result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
}
result += '<hr>';
return result;
}
for...of語句
建立一個迴圈,來遍歷可遍歷物件中所含有的值。
var arr = [3, 5, 7];
arr.foo = 'hello';
for (var i in arr) {
console.log(i); // logs "0", "1", "2", "foo"
// 遍歷屬性對應的名稱
}
for (var i of arr) {
console.log(i); // logs 3, 5, 7
// 遍歷屬性對應的值
}