JavaScript 循环

Question

1、for 循环

for (initializer; exit-condition; final-expression) { // code to run } var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
var info = 'My cats are called '; var para = document.querySelector('p'); for (var i = 0; i < cats.length; i++) { info += cats[i] + ', '; } para.textContent = info;

输出：My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

理想情况下，我们想改变最后循环迭代中的连接，以便在句子末尾没有逗号。

for (var i = 0; i < cats.length; i++) { if (i === cats.length - 1) { info += 'and ' + cats[i] + '.'; } else {
info += cats[i] + ', ';
} }

2、使用 break 退出循环

如果要在所有迭代完成之前退出循环，可以使用 break 语句。

<label for="search">Search by contact name: </label>
<input type="text"> <button>Search</button>
<p></p>
var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
var para = document.querySelector('p');
var input = document.querySelector('input');
var btn = document.querySelector('button');

btn.addEventListener('click',function(){
  // 我们将输入的值输入到一个名为searchName的变量中，然后清空文本输入并重新对准它，准备进行下一个搜索
  var searchName = input.value;
  input.value = '';
  input.focus();

  for( var i = 0; i < contacts.length; i++){
    // 将当前联系人（contacts [i]）拆分为冒号字符，并将生成的两个值存储在名为splitContact的数组中
    var splitContact = contacts[i].split(':');
    // 使用条件语句来测试splitContact [0]（联系人姓名）是否等于输入的searchName。 如果是，我们在段落中输入一个字符串来报告联系人的号码，并使用break来结束循环
    // 在(contacts.length-1) 迭代后，如果联系人姓名与输入的搜索不符，则段落文本设置为“未找到联系人”，循环继续迭代。
    if(splitContact[0] === searchName){
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
}) 

3、使用 continue 跳过迭代

var para = document.querySelector('p'); var input = document.querySelector('input'); var btn = document.querySelector('button'); var num  = input.value;
for(var i = 1; i <= num; i++){
  var sqRoot = Math.sqrt(i); 
  // 用Math.sqrt(i)找到每个数字的平方根,然后通过测试平方根是否是一个整数，当它被四舍五入到最接近的整数时，它是否与自身相同（这是Math.floor(...)对传递的数字是什么）
  if( Math.floor(sqRoot) !== sqRoot){
    continue;
  }
  // 如果平方根和四舍五入的平方根不相等（!==），则表示平方根不是整数，因此我们对此不感兴趣。 在这种情况下，我们使用continue语句跳过下一个循环迭代，而不在任何地方记录该数字。
   para.textContent += i + ' ';
  // 如果平方根是一个整数，我们完全跳过if块，所以continue语句不被执行; 相反，我们将当前i值加上一个空格连接到段落内容的末尾
}

4、while 语句和 do ... while 语句

while循环

initializer while (exit-condition) { // code to run final-expression } var i = 0; while (i < cats.length) { if (i === cats.length - 1) { info += 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; } i++; }

do...while 循环非常类似但在 while 后提供了终止条件：

initializer do { // code to run final-expression }
while (exit-condition) var i = 0; do { if (i === cats.length - 1) { info += 'and ' + cats[i] + '.'; } else { info += cats[i] + ', '; } i++; }
while (i < cats.length);

5、启动倒计时

// 方法一： // var i = 10;
// 初始化 // while ( i >= 0){
// 退出条件 //
var para = document.createElement('p'); //     if( i === 10 ){
//     para.textContent = 'Countdown' + i;
//     } else if( i === 0 ){
//         para.textContent = 'Blast off！';
//     } else{
//         para.textContent = i;
//     }
//     output.appendChild(para);
//     i--;  
//     // 在循环中的代码运行（迭代已经完成）之后，运行最后的条件，这只有在尚未达到退出条件时才会发生
// }

// 方法二：
// for(var i = 10; i >= 0; i--){
//     var para = document.createElement('p');  
//     if( i === 10){
//         para.textContent = 'Countdown' + i;
//     }else if( i === 0 ){
//         para.textContent = 'Blast off！';
//     } else{
//         para.textContent = i;
//     }
//     output.appendChild(para);
// }

// 方法三：
var i = 10;
do {  
// 花括号中的代码总是在检查之前运行一次，以查看是否应该再次执行（在while和for中，检查首先出现，因此代码可能永远不会执行）。
var para = document.createElement('p');  
if( i === 10){
para.textContent = 'Countdown' + i;
}else if( i === 0 ){
para.textContent = 'Blast off！';
} else{
para.textContent = i;
}
output.appendChild(para);
i--;
} while( i >= 0 );

6、填写来宾列表

var people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; var admitted = document.querySelector('.admitted'); var refused = document.querySelector('.refused'); admitted.textContent = 'Admit: '; refused.textContent = 'Refused: '; var i = 0;
while( i < people.length){
  if( people[i] === 'Phil' || people[i] === 'Lola'){
    refused.textContent += people[i] + ', ';
  } else {
    admitted.textContent += people[i] + ', ';
  }
  i++;
}
refused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.';
admitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';