for 语句循环语句中的一种。

for 语句可以使程序在某一个条件重复执行一段代码

1. 基本语法

for 语句相对if 语句稍微复杂,通常为以下格式

for (初始语句; 条件; 条件为真值时执行的语句) {
  // 循环体
}

初始语句会在循环开始前进行执行

条件会在每次循环结束执行结果影响循环语句是否要继续执行

条件为真时执行的语句通常会用来影响一次计算条件结果

2. 为什么需要循环语句

循环的应用非常广泛,如果有学习数据结构算法,会发现部分算法需要循环介入,否则会使程序变得冗余复杂

我们需要生成一段 HTML 列表代码

<div id="container"></div>

<script>var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  var li1 = '<li>' + arr[0] + '</li>';
  var li2 = '<li>' + arr[1] + '</li>';
  var li3 = '<li>' + arr[2] + '</li>';
  var li4 = '<li>' + arr[3] + '</li>';
  var li5 = '<li>' + arr[4] + '</li>';
  var li6 = '<li>' + arr[5] + '</li>';
  var li7 = '<li>' + arr[6] + '</li>';
  var li8 = '<li>' + arr[7] + '</li>';
  var li9 = '<li>' + arr[8] + '</li>';

  var ul = '<ul>'+ li1 + li2 + li3 + li4 + li5 + li6 + li7 + li8 + li9 + '</ul>';

  document.getElementById('container').innerHTML = ul;</script>

可以发现这里生成列表代码冗余,都是重复操作,如果使用 for 循环,代码可以改成这样:

<div id="container"></div>
<script>var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  var lis = '';

  // 单独拿到数组长度
  var len = arr.length;
  // 声明变量i用来计数
  var i;
  for (i = 0; i < len; i++) {
    lis = lis + ('<li>' + arr[i] + '</li>');
  }

  var ul = '<ul>' + lis + '</ul>';

  document.getElementById('container').innerHTML = ul;</script>

这里使用 for 循环生成一个列表效果上述声明九个变量然后拼接方式是一样的。

循环开始前先声明变量i用于计数表示当前循环到第几次。

在循环开始前先将i设置为0,这只会执行一次,随后比较当前循环的次数是否小于数组长度,如果比数组长度小则执行i++i++会先使用i的值,再做累加 ( i = i + 1) 操作,随后执行循环体,重复上述操作

具体的流程如下

len值为 9

  • 一次循环
  • 第二次循环
  • 三次循环
    • i 的值为 2,i 是小于 len 变量的,所以 arr[2] 的值就是 3,这个时候 lis 被累加了<li>3</li>
  • 第四次循环
    • i 的值为 3,i是小于 len 变量的,所以 arr[3] 的值就是 4,这个时候 lis 被累加了<li>4</li>
  • 第五次循环
    • i的值为 4,i 是小于 len 变量的,所以arr[4]的值就是5,这个时候lis被累加了<li>5</li>
  • 第六次循环
    • i的值为 5,i 是小于 len 变量的,所以 arr[5] 的值就是 6,这个时候 lis 被累加了<li>6</li>
  • 第七次循环
    • i的值为 6,i 是小于 len 变量的,所以 arr[6] 的值就是 7,这个时候 lis 被累加了<li>7</li>
  • 第八次循环
    • i 的值为 7,i 是小于 len 变量的,所以 arr[7] 的值就是 8,这个时候 lis 被累加了<li>8</li>
  • 第九次循环
    • i的值为 8,i 是小于 len 变量的,所以 arr[8] 的值就是 9,这个时候 lis 被累加了<li>9</li>
  • 第十次循环
    • i 的值为 9,i 等于 len 变量,不再小于 len,条件不成立,循环结束
  • i 的值为 0,i是小于 len 变量的,所以 arr[0] 的值就是 1,这个时候 lis 被累加了<li>1</li>
  • i的值为 1,i 是小于 len 变量的,所以 arr[1] 的值就是 2,这个时候 lis 被累加了<li>2</li>
  • i 的值为 2,i 是小于 len 变量的,所以 arr[2] 的值就是 3,这个时候 lis 被累加了<li>3</li>
  • i 的值为 3,i是小于 len 变量的,所以 arr[3] 的值就是 4,这个时候 lis 被累加了<li>4</li>
  • i的值为 4,i 是小于 len 变量的,所以arr[4]的值就是5,这个时候lis被累加了<li>5</li>
  • i的值为 5,i 是小于 len 变量的,所以 arr[5] 的值就是 6,这个时候 lis 被累加了<li>6</li>
  • i的值为 6,i 是小于 len 变量的,所以 arr[6] 的值就是 7,这个时候 lis 被累加了<li>7</li>
  • i 的值为 7,i 是小于 len 变量的,所以 arr[7] 的值就是 8,这个时候 lis 被累加了<li>8</li>
  • i的值为 8,i 是小于 len 变量的,所以 arr[8] 的值就是 9,这个时候 lis 被累加了<li>9</li>
  • i 的值为 9,i 等于 len 变量,不再小于 len,条件不成立,循环结束

虽然流程看起来复杂,但是代码可维护性得到了提高冗余代码也减少了,如果这个时候li标签需要加一属性,如class或者style,只需要修改循环体中的一行代码即可

这种形式的 for 循环还有一种语法

for (初始语句; 条件; 条件为真值时执行的语句) 需要循环的语句;

和 if 语句很像,这种属于行循环语句,这种用到比较少,因为代码的可阅读比较低,而且一般用到循环的场景都不止一行代码。

3. for … in

for…in 循环可以用来遍历对象属性名。

var obj = {
  name: '小红',
  age: 12,
  hobby: ['打篮球', '唱歌'],
};

for (key in obj) {
  console.log(obj[key]);
}

// 输出:
//   "小红"
//   12
//   ["打篮球", "唱歌"]

一次遍历拿到的 key 就是对象的某一个属性名,当属性名被遍历完后会自动退出循环。

部分 key 是无法遍历到的,具体规则可以参阅对象章节

4. 无限循环

for (;;) {
  console.log('loop...');
}

这样的循环语句会陷入无限循环。

部分无限循环会让浏览器卡死,需要强制退出浏览器

5. 循环应用例子

5.1 判断一个数是不是质数

var num = 17;

var flag = false;

var len;
var i;

for (i = 2, len = 17 -1; i <= len; i++) {
  if (num % i === 0) {
    flag = true;
    break; // break可以中断循环
  }
}

if (flag) {
  console.log(num + '不是质数');
} else {
  console.log(num + '是质数');
}

// 输出:"17是质数"

首先要知道什么质数质数就是只能被1和本身整除的数。

所以如果要判断num是不是质数,只需要去掉头尾,从2循环到num - 1,用num对每一个循环数做取余操作,如果存在余数为 0 的,就说明中间有个数可以被整除,那就不是质数,反之就是质数。

5.2 计算阶乘

var num = 4;

var result = 1;

var i;
for (i = num; i > 1; i--) {
  result = result * i;
}

console.log(result); // 输出:24

阶乘是所有小于及等于某一数的正整数的积,如4的阶乘,在数学表示4!结果4 * 3 * 2 * 1

在代码中,就可以用一个变量来保存每次做乘法结果,如 4 的阶乘,就可以用变量result记录结果初始值为 1,循环可以从 4 循环到 1,每次将循环到的值乘以result,循环结束后就可以得到结果

6. 小结

循环语句和条件语句一样,是给语言带来处理业务能力的重要特性之一。

通常如果需要连续执行多次重复操作,都应该考虑使用循环来解决

原文地址:https://blog.csdn.net/linyichao123/article/details/128594139

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36712.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注