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
// 遍历属性对应的值
}