JavaScript 配列を反復処理する

1. JavaScript で for ループを使用して配列をループする
2. JavaScript で while ループを使用して配列をループする
3. JavaScript で do...while ループを使用して配列をループする
4. JavaScript で forEach ループを使用して配列をループする
5. JavaScript で for...of を使用して配列をループする
6. 、JavaScript で for...in を使用して配列をループする
7. JavaScript で map メソッドを使用して配列をループする
8. JavaScript で reduce メソッドを使用して配列をループする
9. JavaScript で filter メソッドを使用して配列をループする
10. JavaScript で some を使用して配列をループする
11. JavaScript で every を使用して配列をループする

このチュートリアルでは、JavaScript で配列をループする方法について説明します。これは、for ループや while ループなどの Vanilla JavaScript の従来のメソッドを使用するか、forEach、for ... of、for ... in などの ES5、ES6 によって導入された新しいメソッドを使用して行うことができます。、およびユースケースとコードの速度/効率に応じて他の多くの方法。

JavaScript で for ループを使用して配列をループする

従来の for ループは、C++、Java などの他の言語の for ループに似ています。3つの部分で構成されています。

1. 変数/イテレータの初期化は、for ループの実行前に実行されます。
2. ループが実行される前に毎回チェックする条件。
3. ループ実行後に毎回実行するステップ。

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
for (var i = 0; i < length; i++) {
  console.log(arr[i]);
}

出力：

1
2
3
4
5
6

イテレータ i を取得し、反復ごとに i を 1 インクリメントして next 要素に移動する for ループを使用して配列をループします。

JavaScript で while ループを使用して配列をループする

while ループは、反復ごとにチェックする条件があり、この条件が満たされない限り、実行を継続するため、非常に単純です。

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

for ループと同様に、イテレータ i を取得し、配列の長さまで増やしてすべての要素をループします。

JavaScript で do...while ループを使用して配列をループする

do...while ループは、ループ条件が false であっても、少なくとも 1 回実行されることを除いて、while ループと同じです。したがって、このループを作成するときは注意する必要があります。

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
var i = 0;

do {
  console.log(arr[i]);
  i++;
} while (i < length);

JavaScript で forEach ループを使用して配列をループする

ES5 は、配列を反復処理する新しい方法として forEach を導入しました。forEach は関数を引数として受け取り、配列内に存在するすべての要素に対してそれを呼び出します。

const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => console.log(item));

ここでは、関数に渡された引数を出力する矢印関数を記述し、その関数を forEach に渡して配列を反復処理し、その要素を出力します。

JavaScript で for...of を使用して配列をループする

ES6 は、反復可能なオブジェクトの概念を導入し、配列オブジェクトを反復するために使用できる for ... of を提供しました。

let arr = [1, 2, 3, 4, 5, 6];
for (const item of arr) {
  console.log(item);
}

これを通常のループとして使用しますが、配列だけでなく、さまざまなオブジェクトを簡単に反復できます。

、JavaScript で for...in を使用して配列をループする

for ... in を使用して配列を反復処理できますが、オブジェクトのプロパティを列挙するため、お勧めしません。配列要素に加えて、Array.prototype にアタッチされたメソッドも列挙します。

var arr = [1, 2, 3, 4, 5, 6];

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

JavaScript で map メソッドを使用して配列をループする

map メソッドは配列をループし、各要素でコールバック関数を使用して、新しい配列を返します。つまり、入力を取り、配列を新しい配列にマップし、コールバック関数によって計算を実行します。

arr = [1, 2, 3, 4, 5, 6];
const square = (x) => {
  return Math.pow(x, 2);
} mapped = arr.map(square);
console.log(arr);
console.log(mapped);

ここでは、入力配列を繰り返し処理し、配列内に要素の正方形を持つ配列を形成しました。

JavaScript で reduce メソッドを使用して配列をループする

reduce メソッドは配列をループし、reducer 関数を呼び出して、アキュムレータの関数による配列計算の値を格納します。アキュムレータは、配列をループした累積結果を格納するために、すべての反復を通じて記憶される変数です。

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

ここでは、配列をループして、アキュムレータ内のすべての要素を合計します。

JavaScript で filter メソッドを使用して配列をループする

filter メソッドは配列をループし、特定の条件を満たす要素をフィルターで除外します。

const fruits =
    ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

ここでは、配列をループして、指定されたフルーツ名の長さが 6 より大きいかどうかを確認します。大きい場合は、結果配列に含めます。つまり、必要な要素を除外します。

JavaScript で some を使用して配列をループする

これは、配列をループして、配列内に存在する要素の少なくとも 1つが特定の条件を満たしているかどうかを確認するために使用されます。

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.some(under_three));

ここでは、some を使用して、配列内に 3 未満の要素が存在するかどうかを確認します。ブール値 true または false を返します。

JavaScript で every を使用して配列をループする

これは、配列をループして、配列内のすべての要素が特定の条件を満たしているかどうかを確認するために使用されます。

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.every(under_three));

ここでは、every を使用して、配列内に存在するすべての要素が 3 未満であるかどうかを確認します。ブール値 true または false を返します。