毎日学ばなければならないJavaScriptループ_JavaScriptスキル

こんにちは、今日は前の内容の続きです。今日は、ループについて説明します。その名前が示すように、通常のループはプログラムによって制御されます。異常な状況が発生すると無限ループが発生します。つまり、コードにバグが発生します。その場合は、最初に基礎知識の説明を終えた後、次の部分にもスペースを割きます。ブラウザの内部にあるものを説明します。デバッグすることで、プログラムは私たちが望む結果になります。

ループに含まれる構造には、for、while、do-while が含まれます。for ループには、デジタル変数の変更によって発生するループと、for...in 形式があります。属性や添え字によって循環的に変化しますが、for...in はキーではなく、たとえば C# 言語では foreach という名前になります。これは単なるタイトルです。違いについては、到着したら詳しく話しましょう。

で開始します

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

(ここでは新しい演算子が使用されていますが、前の説明では見逃していました。ただし、小なり演算子がブール値 (true、false) を返すことは誰でも一目で理解できるでしょう)

1 から 9 はここで正常に出力されます。上記の 4 つの実行ステップを参照してください。最初のステップ (変数の宣言) は 1 回だけ実行され、その後、2 番目のステップ が条件を満たしているかどうかを判断します。 true (if 以降の条件受信と同じ型) の場合、ループ本体の内容が の 3 番目のステップとして扱われます。つまり、 の 4 番目のステップ を実行して変数を変更し、次に 2 番目のステップを実行して、それが確立されたかどうかを判断します。ここまでは繋がっていて、その後はこのように交互にサイクルが進みます。

注: i++ の 4 番目のステップを説明すると、i = i + 1 が前に宣言されたことがすぐに理解できます。 i が再割り当てされることは、i = 0 + 1 を変更することを意味します。このように、i は 1 になります。1 つのサイクルが完了すると、0 が出力され、i は 1 になります。2 番目のサイクルが完了すると、print は 1 になります。 , i が 2,... となり、10 ラウンド目を実行すると 9 が出力され、i が 10 になります。再度 2 段階目の判定を行うと、i

上記の制御は、意図したとおりに 10 回実行されました。同じ条件であれば、途中でループを抜け出すことはできますか?答えは間違いなく「はい」です。これには、break についてすでに学習したキーワードを使用する必要があります。サンプル コードを見てみましょう
。

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

ご覧のとおり、条件が満たされている限り、いつでもループから抜け出すことができます。これにより、後続のステップの実行が強制的に中断されます。

強制中断があるので聞きたいのですが、サイクルの強制継続はありますか？答えは間違いなく「はい」です。新しいキーワード continue
を使用する必要があります。

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

目的の効果が得られましたか? i が 5 未満の場合、後続の印刷はまだ実行されていないため、i が 5 以上の場合は次のループを続行します。 、 i の値を出力するだけです。

for...in について話を続けましょう。その前に、配列という別のデータ型を理解する必要があります。ここでは 1 次元配列についてのみ説明します。ここで 2 次元配列と多次元配列について説明する必要はありません。サンプル コードを参照してください。

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

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

次に、単一の値を取得する方法を見てみましょう

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

実行して、これが当てはまるかどうかを確認してみましょう

まさに私たちが期待していた通り

上記の例だと、配列の値を取得して出力することができますが、毎回こうやって書くのは面倒でしょうか？ちなみにループも使えます

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，大家是不是已经学会了呢，看一遍不过瘾，我们还可以多看几遍，今天所讲的东西，理解上是有一些小困难，但多写多练，自然就能熟练使用了。