JS：for语句

马黑黑

JS工作效率高，离不开循环语句。循环语句所有编程语言都拥有，JS作为web脚本语言，自然也不能例外。

所谓循环语句，就是以一定方式重复做一些特定工作，但又和工厂流水线某个流水节点的重复性工作不一样，它是有变化的重复，变化的依据是循环的索引变化。

for循环语句很多语言都是这么写：

for(i=0; i<10; i++){
    //这里做点什么
}

JS也这么写。for紧跟着小括号，它和小括号之间可以有空格也可以没有，小括号里面有三句话，句和句之间用小角分号隔开，直到最后一句。它们的意思是：

首先弄明白，i 是一个计数变量，也可以用其它的字母代替，习惯上用 i ，用什么前后要一致；其次：

① i=0;  表示变量 i 从 0 开始计数，进入循环；
② i<10;  表示计数变量 i 在变成 10 之前一直循环地做点什么
③ i++  表示每完成一次循环，变量 i 自动累加（默认加1）

这个for循环语句要做什么事情，其描述放在一对大括号里。

现在举个实例。这个例子，有一个div标签，它有id标识，JS将把一个for的字符串运算结果赋值给这个div：

<div id="for"></div>

<script language="javascript">

var str = ""; //声明一个值为空的字符串变量 str
for(i=0; i<10; i++){
        str += i; // 变量 str 的值以 i 为累加
}

document.getElementById('for').innerText = str; //在 div 中显示for的运行结果

</script>


运行以上 HTML+JS 代码，得出的结果是： 0123456789

为什么会这样？

字符变量 str 开始时空的，for 从 0 开始循环，第一次循环执行的时候，i 是 0，i 的值 加给了 str，str 的值此时是 “0”，这时 for 进入第二次循环，进入之前 i++ 将索引变量 i 变成了 0+1=1，就是说，第二次循环执行的时候，i 值为 1，这时候，str += i 的结果是 “0”+“1”，就是 “01”，如此往复，直至 i 索引变量等于 10 的时候退出循环，str这个时候字符串值是"0123456789"，所以那个div的内容就是这个数字字串。

例句中，+= 是个重要的运算符，它可以是数学运算，也可以是字符串运算（本例就是）。+= 的意思是，在原基础上再加上。再如：

k = 2;
k += 10;

此时，k 是 12。k+=10 的原始写法是：k = k + 10

再再如：

k = "你好";
k += "马黑黑";

此时，k 是字符串变量，k 的值是“你好马黑黑”。同理，k += "马黑黑" 等同于 k = k + "马黑黑"。

当然，for不仅仅只会做数值相加和字符串连接，只要给它相应指令，它都能循环执行。

红影

这里面挺多不太好理解的。
“+= 的意思是，在原基础上再加上。” 那么k += 10 str += i  也就是说它可以等于固定值，也可以等于变量？

红影

i++  表示每完成一次循环，变量 i 自动累加（默认加1）
这个写法也怪怪的，还有下面那串
document.getElementById('for').innerText = str; 调用的是for，显示的是str的运算结果。

红影

k+=10 的原始写法是：k = k + 10，也就是写这步之前，k必须有初始赋值？

红影

那个闪光棒还有小雨点，都是用这个命令写的吧。谢谢黑黑，终于可以来一探它内部的秘密

红影

        for(i=0; i<20; i++) {
                var l = Math.ceil(Math.random()*800);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
        }

这个好像是雨点的，+=后面不但可以是数字，字符串，还可以是这么复杂的位置定位。

马黑黑

红影 发表于 2022-2-3 10:20
这里面挺多不太好理解的。
“+= 的意思是，在原基础上再加上。” 那么k += 10 str += i  也就是说它可以等 ...

动态的意思就是对象会发生变化，包括值得变化。作为举例，我们先给一个变量一个值：

k = 5;

此时 k 是一个静态的变量，它的值是固定的。变量 k 有可能在事情的推演中发生变化，例如吧，特定情形下，k要在原基础上增加（好比你要涨工资一样的情形）：

k = k + 10; // 或者写成： k += 10;

现在，k 不再是 5 了，它的值已经是 15

红影

刚才去看了，闪光棒的不是这个命令做的，那个是用动画做的。

马黑黑

红影 发表于 2022-2-3 10:27
k+=10 的原始写法是：k = k + 10，也就是写这步之前，k必须有初始赋值？

一切都是根据实际情况和需要来，如果我们声明一个变量，假如我们并不确定它的值是什么，可以声明一个空的字节变量或为0的数值变量，甚至可以只声明变量自身。例如：

var a = ""; //字节变量
var k = 0; // 数值变量
var h;  // 只声明变量名称

事态发展过程中，这些变量可能会重新赋值：

a += "<p>你在么</p>";
k += 98;
h += 5; // 这时 h 是一个数值变量
h += "<img src='图片地址' alt='' />";  //这事 h 是一个字符串变量

马黑黑

红影 发表于 2022-2-3 10:25
i++  表示每完成一次循环，变量 i 自动累加（默认加1）
这个写法也怪怪的，还有下面那串
document.getEl ...

for 语句是编程语言中很聪明的设计，效率不低的。理解了就没啥问题。

马黑黑

红影 发表于 2022-2-3 10:43
刚才去看了，闪光棒的不是这个命令做的，那个是用动画做的。

实现方法是多样的，并非只有一种方法。条条大路通水吧

红影

马黑黑 发表于 2022-2-3 10:50
一切都是根据实际情况和需要来，如果我们声明一个变量，假如我们并不确定它的值是什么，可以声明一个空的 ...

嗯嗯，大概有点懂了，也就是js的运作是先声明变量，然后是变量赋值，然后是如何展示。

红影

马黑黑 发表于 2022-2-3 10:42
动态的意思就是对象会发生变化，包括值得变化。作为举例，我们先给一个变量一个值：

k = 5;

嗯，知道了，k = k + 10;和 k += 10;是一样的，这个写法有点不适应。
那么， k += k就是k=k+k？这样的允许么，会不会进入死循环？

红影

马黑黑 发表于 2022-2-3 10:52
for 语句是编程语言中很聪明的设计，效率不低的。理解了就没啥问题。

嗯嗯，现在是对它不熟悉。

红影

马黑黑 发表于 2022-2-3 10:53
实现方法是多样的，并非只有一种方法。条条大路通水吧

黑黑厉害

马黑黑

红影 发表于 2022-2-3 14:52
嗯嗯，大概有点懂了，也就是js的运作是先声明变量，然后是变量赋值，然后是如何展示。

声明变量是一种规范，也是一种习惯。JS对变量的声明方式还算是比较宽松的，它的变量也属于弱变量。

马黑黑

红影 发表于 2022-2-3 14:56
嗯嗯，现在是对它不熟悉。

反正就这么简单：

小括号内三句话：描述一个变量的起始循环值 i=0 、描述循环范围 i<15 、描述循环变量步进 i++
大括号里是每一次循环要做的事情：~~~

样式：

for (i=0; i<15; i++) {
    //工作一
    //工作二
    //……
    //工作三
}

其中，步进方式 i++ 表示完成一次循环，i+1。

for语句起始循环值不一定是0，步进不一定是 ++ ，像：

for (i=40; i>0; i --){
    // do sth.
}

这表示，i 从 40 开始循环，只要 i>0 就一直循环下去，每一次循环结束，i 减去 1

马黑黑

红影 发表于 2022-2-3 14:56
嗯，知道了，k = k + 10;和 k += 10;是一样的，这个写法有点不适应。
那么， k += k就是k=k+k？这样的允 ...

k += k 是成立的，这里它没有循环，它只是把自己加给自己，不可能进入死循环。

加林森

继续来学习

红影

马黑黑 发表于 2022-2-3 15:58
声明变量是一种规范，也是一种习惯。JS对变量的声明方式还算是比较宽松的，它的变量也属于弱变量。

可以一次声明多个变量的吧。然后分别给变量赋值，我看你帖子里就有。