循环吧代码

循环的标准

for (initializer; exit-condition; final-expression) {
  // code to run
}
关键字for，后跟一些括号。
在括号内，我们有三个项目，以分号分隔：
一个初始化器 - 这通常是一个设置为一个数字的变量，它被递增来计算循环运行的次数。它也有时被称为计数变量。
一个退出条件 -如前面提到的，这个定义循环何时停止循环。这通常是一个表现为比较运算符的表达式，用于查看退出条件是否已满足的测试。
一个最终条件 -这总是被判断（或运行），每个循环已经通过一个完整的迭代消失时间。它通常用于增加（或在某些情况下递减）计数器变量，使其更接近退出条件值。
一些包含代码块的花括号 - 每次循环迭代时都会运行这个代码。
<main>
    <p id="for_test"></p>
</main>


<script>
     var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
     var info = 'My cats are called ';
     var para = document.querySelector('#for_test');
    //
    // for (var i = 0; i < cats.length; i++) {
    //     info += cats[i] + ',';
    // }
    // para.textContent = info
    for (var i = 0; i < cats.length; i++) {
      if (i === cats.length - 1) {
        info += 'and ' + cats[i] + '.';
      } else {
        info += cats[i] + ', ';
      }
    }
    para.textContent = info
</script>


<main>
    <label for="search"> Please by contact name:</label>
    <input id="search" type="text">
    <button>Search</button>
    <p></p>
</main>

使用break退出循环
如果要在所有迭代完成之前退出循环，可以使用break语句。 当我们查看switch语句时，我们已经在上一篇文章中遇到过这样的情况 - 当switch语句中符合输入表达式的情况满足时，break语句立即退出switch语句并移动到代码之后。

与循环相同 - break语句将立即退出循环，并使浏览器移动到跟随它的任何代码。
<script>
    //定义数组
    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');
    //EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行
    btn.addEventListener('click', function () {
        //获取输入内容
        var searchName = input.value;
        //清空 input.value 变量
        input.value = '';
        //将鼠标聚焦在input
        input.focus();
        //开始循环

        for (var i = 0; i < contacts.length; i++) {
            //以分号为分隔符 ，将每个字典 分割为数组，而进行获取 name
            var contactsName = contacts[i].split(':');
            if (searchName === contactsName[0]){
                para.textContent = contactsName[0] + '\'s number is ' + contactsName[1] + '.';
            break
            } else {
                para.textContent = 'Conttact not found.'
            }
        }
    });
</script>


使用continue跳过迭代
continue语句以类似的方式工作，而不是完全跳出循环，而是跳过当前循环而执行下一个循环。 我们来看另外一个例子，它把一个数字作为一个输入，并且只返回开平方之后为整数的数字（整数）。

<main>
    <label for="search"> Please intput a number:</label>
    <input id="search" type="text">
    <button>Submit</button>
    <p></p>
</main>


<script>
    var num = input.value;
    var para = document.querySelector('p');
    for (var i = 1; i <= num; i++) {
        //获取 i 的平方根
        var sqRoot = Math.sqrt(i);
        //判断 i 的平方根是不是一个整数
        if (Math.floor(sqRoot) !== sqRoot) {
            //如果不是跳过
            continue;
        }
        //如果是
        para.textContent += i + ' ';
    }



while语句和do ... while语句
for 不是JavaScript中唯一可用的循环类型。 实际上还有很多其他的，而现在你不需要理解所有这些，所以值得看几个人的结构，这样你就可以在稍微不同的方式识别出相同的功能。

首先，我们来看看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后提供了终止条件：
//do 中的代码总是要执行一次 ，才进行while 判断
var i = 0;

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

  i++;
} while (i < cats.length);





<script>
    //两种方式实现相同效果

var output = document.querySelector('.output');

for (var i = 10; i >= 0; i--) {
        var para = document.createElement('P');
        output.appendChild(para);
        if (i === 10 ) {
            para.textContent = 'Countdown 10';
        } else {
            para.textContent = i;
        }
    }
        var para = document.createElement('P');
        output.appendChild(para);
        para.textContent = 'Blast off！';

//  var output = document.querySelector('.output'); output.innerHTML = ''; 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--; }