JavaScript loops that must be learned every day_javascript skills

Hello friends, today, we will continue with the previous content. We have already talked about conditional branches. Today we will talk about loops. As the name suggests, the same operation is performed repeatedly. Normal loops are controlled by the program. Abnormal situations will cause an infinite loop, that is, bugs will appear in our code. In that case, we will also need to learn to debug bugs. After we have finished explaining the basic knowledge first, I will also devote some space to explaining what is inside the browser. By debugging, the program will be under our control. This is the result we want.

The structures included in loops include for, while, do--while. There are two forms of for loops. One is a loop caused by changes in digital variables, and the other is the for...in form, which is Cyclic changes caused by attributes or subscripts, but for...in is not the key, the key is for. For example, in the C# language, its name is foreach. Well, it is just a title. There is no other difference. I will say When we get there, we’ll talk more about it.

Start with for

for(var i = 0;i<10;i++){
  console.log(i);
}

(A new operator is used here, which I missed in my previous discussion. However, everyone will understand at a glance that the less than operator returns a Boolean value (true, false))

1 to 9 are successfully printed here. See the above 4 execution steps. The first step (declaring variables) is only executed once; then The second step Determine whether the condition is true (the same type as the conditional reception after if). If it is true, the content in the loop body will be executed immediately. This is regarded as the third step of . After the third step is executed, That is to execute the fourth step to let the variables change; then, execute the second step to determine whether it is established. So far it has been connected, and then the cycle alternates like this.

Note: Explain the fourth step i++. We can understand i = i + 1 in this way; it will be understood at once. i = 0 was declared before; then i = i + 1 means that i will be re- Assignment means changing it, i = 0 + 1; in this way, i becomes 1. When one cycle is completed, 0 is printed, and i becomes 1. When the second cycle is completed, print is 1, i becomes 2,..., when the 10th round is executed, 9 is printed, and i changes to 10. When the judgment is performed in the second step again, i < 10 is 10 < 10 , the return is false, so it is not established, so it will not continue later.

The control we have mentioned above was executed 10 times exactly as we intended. If it is the same condition, can we jump out of the loop halfway? The answer is definitely yes, this requires using a keyword we have already learned about break. Let’s take a look at the sample code

for(var i = 0;i<10;i++){
  console.log(i);
  //当i等于5的时候，我们就跳出循环
  if(i == 5){
    break;
  }
}

As you can see, as long as our conditions are met, we can break out of the loop whenever we want. This will forcefully interrupt the execution of subsequent steps.

Since there is a forced interruption, I would like to ask, is there a forced continuation of the cycle? The answer is definitely yes, we have to use a new keyword continue

for(var i = 0;i<10;i++){
  //当i小于5的时候，我们强制循环
  if(i < 5){
    continue;
  }
  console.log(i);
}

Have we achieved the effect we want? When i is less than 5, we will force the loop. The subsequent printing has not been executed yet, so we will continue the next loop. When i is greater than or equal to 5 , we just print out the value of i.

Let’s continue to talk about for...in. Before that, we need to understand another data type, which is array. The reason why I didn’t say it before is because even if I said it before, everyone still can’t understand it. So now let’s learn about arrays first. We only talk about one-dimensional arrays here. There is no need to talk about two-dimensional and multi-dimensional arrays now. See the sample code

//声明一个数组，用中括号包含，组里面的内容单位用逗号分隔，数组可以包含各种类型的值
var arr = [1,2,"abc","MrDream",true,false,null];

//数组取值就是用下标来获取，在程序中，第一个值的下标就是0，第二个才是1，后面的以此类推
//在这里 arr 数组里面，我们放了7个值进去，所以最大的下标就是6

Next, let’s take a look at how to get a single value

arr[0] // 1
arr[1] // 2
arr[2] // "abc"
arr[3] // "MrDream"
arr[4] // true
arr[5] // false
arr[6] // null

Let’s execute it and see if this is the case

Exactly what we expected

From the above example, we can get the values ​​in the array and print them out, but is it troublesome to write like this every time? By the way, we can use loops

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i = 0;i<7;i++){
  console.log(arr[i]);
}

哈哈，看到循环的神奇之处了吧，就是这么的方便，但是这里，我们是用的一个变量来模拟的下标，下面我就用for...in来循环

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i in arr){
  console.log(arr[i]);
}

for...in在javascript中就是用来循环 数组的下标和对象的属性，对象的属性以及对象，我们后面再说，现在我们只说数组，我现在来解释一下for...in这种写法的执行步骤，var i用来声明一个变量下标（针对数组），in 用来指定在哪个集合里面，依次取得下标，如果数组里面没有东西，循环也将会直接终止。这个理解比前面的理解要抽象，大家多写几次就会理解了。

现在我们来验证一下，在数组中，我们取得的变量是不是下标

看到示例了吧，明显就是取得的下标。

下在我们就讲解新的循环方式 while

while(条件){
  //执行
}

现在大家看到条件两个字是不是再也不陌生了，还是跟if后面的条件使用同一类型，我们还是用售票来举个例子

var tickets = 10;//车票总数量

//条件，当车票数量大于0时，就执行售票行为
while(tickets > 0){
  console.log("目前还有"+ tickets +"张可售车票，下一位");//这里我们用到了字符串拼接
  tickets --; //卖出一张车票，我们就减少一张
}

注：在这里，我们又接触到一个前面没有提及到的运算符 -- ，就是使得变量自减1；和上面所说的 ++ 运算方式一样。

这里我们刚好执行10次售卖动作，是不是感觉这种写循环方式很简单呢？就这么一下下，我们就把它给理解透彻了，首先就是判断条件是否成立，如果成立，就执行循环体里面的行为，直到条件不成立为止。说到这里，大家是不是觉得很疑惑，这种循环，只有条件，成立时，才执行里面的循环，和前面的for循环，差不多，只有先满足条件，然后才执行里面的内容。那么有没有一种循环式，是先执行一次循环体内容，然后才来判断条件是否成立？问得好，我们就是需要这样的研究精神，然后，javascript语言也没有让我们失望，他还真有这样循环体，那就是do...while；下面我们先看语法

do{
  //执行
}while(条件)

这里就是先执行一次循环体里面的内容，然后再来判断条件是否成立，如果条件成立，那么就又循环前面的内容执行

下面我们就以人生励志赚钱为例进行讲解 路人甲想取媳妇，但是只有10万元存款，但是取媳妇需要50万，那么怎么办，只有辛苦工作了，当有足够多的存款的时候，就可以高高兴兴地取媳妇了

var money = 100000; //路人甲有10万元存款

do{
  console.log("辛苦工作1年，存下了10万"); 
  money += 100000; //工作后，有钱了，就修改一次变量
}while(money < 500000); //条件是，存款不足50万，又继续执行工作行为

看到了吧，没有钱，就先去努力赚钱，路人甲 同学经过4年的不懈努力，终于存够了50万（因为他之前已经有10万元了），终于取上媳妇了，过上了幸福美满的生活。我们也要努力了。

这样讲大家是不是一下就理解了do...while循环的方式了呢。

总结一下，我们今天讲解了循环，包括了4种循环方式 for  、 for...in   、 while   、 do...while，大家是不是已经学会了呢，看一遍不过瘾，我们还可以多看几遍，今天所讲的东西，理解上是有一些小困难，但多写多练，自然就能熟练使用了。