JavaScript のループ ステートメントにはどのような種類がありますか?

ループ ステートメントには次が含まれます: 1. for ループ; 2. "for...in" ループ; 3. while ループ; 4. "do...while" ループ; 5. forEach ループ; 6. map ; 7 、フィルター フィルター ループ; 8. 「Object.keys」はオブジェクトのプロパティをトラバースします。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

プロジェクト開発では、どのフレームワークに基づいているかに関係なく、データ処理が必要であり、データ処理はさまざまなトラバーサル ループから切り離すことができません。 JavaScript でループする方法はたくさんありますが、ここでは一般的な JS ループをいくつか紹介します。

1. for ループ

for ステートメントは主に、実行回数を決定するループを実行するために使用されます。

for ステートメントの基本的な構文は次のとおりです。

for([初始值表达式]；[条件表达式]；[增量表达式]){
   循环体语句；
}

説明:

• 「初期値式」: ステートメントの初期値を設定します。ループ変数;

• 「条件式」: ループに入るかどうかの基準として、任意の式を使用できますが、一般的には関係式または論理式であり、値は true または false です。ループ実行前に毎回条件式の値を判定します。値が true (値が true、0 以外、または空でない) の場合は、ループ本体のステートメントが実行されます。それ以外の場合は、ループが終了し、ループ ステートメントの後のコードが実行されます。

• "インクリメント式 Expression": この式に基づいてループ変数の値を更新します。

上記 3 つの式はいずれも省略できますが、; in for() は省略できないことに注意してください。したがって、3 つの式をすべて省略すると、for ステートメントは for(;;){ループ本体ステートメント} になります。このとき注意が必要なのは、ループ本体内にループを抜け出す記述がないと無限ループになってしまうことです。

例:

     var sum = 0;
     for(var i = 1; i <= 100;i++){        //在for语句中使用var声明循环变量，使代码更简洁
         sum += i;
     }
     alert("1～100的累加和sum=" + sum);

2. for...in

for...in ループは、主にオブジェクトを走査することを目的としています。オブジェクトの対応するキー値を取得したい場合は、for...in

var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定义数组
var b = [], num = 0;
for (var i = 0; i < a.length; i ++) {  //遍历数组
    if (typeof a[i] == "number")  //如果为数字，则返回该元素的值
        b.push(a[i]);
    num ++;  //计数器
}
console.log(num);  //返回42，说明循环了42次
console.log(b);  //返回[1,2,4,56]

3 を使用すると便利です。は、最も一般的に使用される A ループ ステートメントであり、ループの回数を気にせずに条件に基づいてループを実行するプログラムでよく使用されます。

while 语句的基本语法如下：
while(条件表达式){
     循环体;
}

説明:

条件式: これはループ制御条件であり、括弧で囲む必要があります。任意の式を使用できますが、一般的には関係式です。または true または false に評価される論理式。注: true、0 以外、null 以外の値はすべて true 値であり、それ以外の場合は false 値です。

• ループ本体: 繰り返し実行する必要がある操作を表し、単純なステートメントまたは複合ステートメントにすることができます。単純なステートメントの場合は中括弧 {} を省略できますが、それ以外の場合は中括弧 {} を使用する必要があります。

• while 文を実行すると、まず条件式の値を判定し、真の場合はループ本体文を実行してから条件式を判定します。値が true のままである場合は、ループ本体ステートメントの実行を続行し、それ以外の場合は、while ステートメントの後のステートメントを実行します。初めて評価されるときに式の値が false (false、0、null など) の場合、ループの本体は一度も実行されません。

while ループが正常に終了するには、ループ条件を変更するステートメントまたはループを終了する他のステートメントがループ本体に存在する必要があることに注意してください。そうでない場合、while ループはエラー状態に入ります。無限ループ、つまりループ内で実行が継続されます。ループ本体。

たとえば、次のループ ステートメントは無限ループを引き起こします。

var i=1,s=0;
whiel(i<=5){
    s+=i;      
}

上記のコードの i の初期値は 1 です。 i 変数の値はループ本体で変更されないため、式 i無限ループはシステム リソースを大幅に占有し、最終的にはシステムのクラッシュを引き起こす可能性があるため、プログラミング時には無限ループを避けるように注意する必要があります。

     var sum = 1, i = 1;
     var ex = 1;
     while(sum <= 1.5){
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

4. do...while ループ

do...while ステートメントは while ステートメントのバリエーションです。両者の違いは、while 文はループ本体文の実行前にループ条件の判定を行うのに対し、do...while 文はループ本体文の実行後にループ条件の判定を行うことです。

do...while 文の基本的な構文は次のとおりです。

do{
  循环体;
}while (条件表达式);

「条件式」と「ループ本体」の意味は while 文と同じです。ここで注意する必要があるのは、 do...while ステートメントは; で終わる必要があるということです。これがコードに追加されていない場合は、JavaScript によって自動的に追加されます。

do...while文を実行すると、まずループ本体文が実行され、その後条件式の値が判定され、値がtrue(値がtrueか非-値がゼロ)、ループ本体ステートメントが再度実行されます。 do...while ステートメントはループ本体を少なくとも 1 回実行しますが、これは while ステートメントとは大きく異なります。

     var sum = 1, i = 1;
     var ex = 1;
     do{
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }while(sum <= 1.5);
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

5. forEach

forEach を使用する方法は、forEach メソッドが値を返さず、値を返すだけである点を除けば、map を使用する方法と似ています。データの操作に使用され、ループの途中では使用できません。停止すると、すべてのメンバーが常に走査されます。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

6.map

map メソッド配列のすべてのメンバーを順番にパラメーター関数に渡し、それぞれを渡します。実行結果は新しい配列に構成されて返されます。 ループを途中で停止することはできず、すべてのメンバーが常に走査されます

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

七、filter过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

 ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素  (false, null, undefined, 0, NaN or an empty string)：

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一个函数，它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.

八、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

判断一个对象是否是空对象，可以用Object.keys(obj).length>0

【推荐学习：javascript高级教程】

以上がJavaScript のループ ステートメントにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。