JS：for语句
本帖最后由 马黑黑 于 2022-2-2 21:11 编辑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必须有初始赋值？ 那个闪光棒还有小雨点，都是用这个命令写的吧。谢谢黑黑，终于可以来一探它内部的秘密{:4_187:} 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
实现方法是多样的，并非只有一种方法。条条大路通水吧
黑黑厉害{:4_187:} 红影 发表于 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对变量的声明方式还算是比较宽松的，它的变量也属于弱变量。
可以一次声明多个变量的吧。然后分别给变量赋值，我看你帖子里就有。