JS のすべてのループ トラバーサル メソッドの概要

今回はJSでのループトラバーサルメソッドのまとめをお届けします。 JSでループトラバーサルをまとめる際に注意すべき注意点は次のとおりです。

1. for ループ

let arr = [1,2,3];
for (let i=0; i<arr.length; i++){
 console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3

for ループは JS で最も一般的に使用されるループ ツールであり、配列のループ走査によく使用されます。

2. for in ループ

let obj = {name:'zhou',age:'**'}
for(let i in obj){
 console.log(i,obj[i])
}
// name zhou
// age **

for in ループは主に通常のオブジェクトを走査するために使用され、obj[i] は走査に使用する場合の対応する値を表します。配列、ほとんどの場合、同じ効果が得られますが、これは危険です。i は配列に必要な数値添字ではなく文字列として出力されるため、場合によっては、文字列操作により、必要な 53 の代わりに '52'+1 = '521' などのデータ エラーが発生します。

さらに、for in ループが自身のプロパティを走査するだけでなく、プロトタイプも見つけることになるため、ループ本体に判断を追加するのが最善です。obj[i].hasOwnProperty(i) を使用するだけです。あまりにも多くの不要な属性をトラバースしないようにするためです。

3. while ループ

同様に、cars 配列を走査し、最初に for ループ メソッド

let cars=["BMW","Volvo","Saab","Ford"];
let i=0;
for (;cars[i];)
{
console.log(cars[i])
i++;
};
// BMW
// Volvo
// Saab
// Ford

を使用し、次に while ループ メソッド

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
console.log(cars[i] + "<br>")
i++;
};

を使用すると、実際にはその根底にあるものと同じ効果を達成できることがわかりました。処理内容は同じですが、for ループで定義、条件判定、自動インクリメント演算とデクリメント演算を 1 つの条件にまとめて実行できるようになり、コードがより便利に見えます。

4. do while ループ

let i = 3;
do{
 console.log(i)
 i--;
}
while(i>0)
// 3
// 2
// 1

do while ループは、最初に演算を実行し、次に条件判定を実行します。true の場合は、演算を継続します。 false の場合、ループは終了します。

5. 配列 forEach ループ

let arr = [1,2,3];
arr.forEach(function(i,index){
 console.log(i,index)
})
// 1 0
// 2 1
// 3 2

forEach ループは、配列内の各要素をループして演算を行います。配列の長さを知る必要はありません。パラメータ。最初のパラメータのみが必要です。現在の添え字の値を表します。

また、forEach ループは、すべての要素が呼び出される前に停止できないことにも注意してください。これには、break ステートメントがありません。停止する必要がある場合は、try catch ステートメントを試すことができます。これは、必要なときにエラーをスローすることを意味します。強制的に終了し、キャッチで戻るようにすることで、このメソッドを頻繁に使用する場合は、ライブラリでこのように forEach 関数をカスタマイズすることをお勧めします。

6. 配列map()メソッド

let arr = [1,2,3];
let tt = arr.map(function(i){
 console.log(i)
 return i*2;
})
// [2,4,6]

map()メソッドは新しい配列を返し、配列内の要素は関数呼び出し後の元の配列要素の値になります。
注:map メソッドと forEach メソッドは配列を走査するためにのみ使用でき、通常のオブジェクトには使用できません。

7. Array filter() メソッド

let arr = [1,2,3];
let tt = arr.filter(function(i){
 return i>1;
})
// [2,3]

filter メソッドは、Array オブジェクトの組み込みメソッドで、元の配列を変更せずにフィルターされた要素を返します。

8. 配列 some() メソッド

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// true

some() メソッドは、配列内の要素が指定された条件 (関数によって提供される) を満たしているかどうかを検出し、元の配列を変更せずにブール値を返すために使用されます。 。

9. 配列のevery()メソッド

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// 检测数组中元素是否都大于1
// false

every()メソッドは、配列のすべての要素が指定された条件（関数を通じて提供される）を満たすかどうかを検出するために使用され、元の値を変更せずにブール値を返します。配列。

10. 配列reduce()メソッド

let arr = [1,2,3];
let ad = arr.reduce(function(i,j){
 return i+j;
})
// 6

reduce()メソッドはアキュムレータとして関数を受け取り、配列内の各値(左から右へ)が減算され、最終的には価値。

11. 配列reduceRight()メソッド

let arr = [1,2,3];
let ad = arr.reduceRight(function(i,j){
 return i+j;
})
// 6

reduceRight()メソッドはreduce()と同じ機能を持ち、配列の末尾から順に計算を開始します。

12. for of ループ

let arr = ['name','age'];
for(let i of arr){
 console.log(i)
}
// name
// age

for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS反射与依赖注入使用案例分析

如何使用js统计页面标签数量

以上がJS のすべてのループ トラバーサル メソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。