JavaScript 循环

发布于 2023-01-23 19:45:35 字数 5681 浏览 4 评论 0

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) + '.';

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据
原文
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。