1. 程式人生 > >JavaScript - 迴圈和遍歷

JavaScript - 迴圈和遍歷

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
// 遍歷屬性對應的值
}