JavaScript 配列 forEach: すべての要素に対して関数を実行する

概要：このチュートリアルでは、JavaScript 配列のforEach()メソッドを使用して、配列内のすべての要素に対して関数を実行する方法を学びます。

JavaScript 配列 forEach() メソッドの概要

通常、関数を配列のすべての要素に対して実行したい場合は、forループステートメントを使用します。

例えば、次のコードは配列のすべての要素をコンソールに出力します。

let ranks = ['A', 'B', 'C'];
for (let i = 0; i < ranks.length; i++) {
    console.log(ranks[i]);
}Code language: JavaScript (javascript)

出力

A
B
C

JavaScript 配列は、すべての要素に対して関数を実行できるforEach()メソッドを提供します。

次のコードは、上記のコードと同等のforEach()メソッドを使用しています。

let ranks = ['A', 'B', 'C'];

ranks.forEach(function (e) {
    console.log(e);
});Code language: JavaScript (javascript)

出力

A
B
C

forEach()メソッドは、配列内の要素を反復処理し、要素ごとに一度、事前に定義された関数を実行します。

以下は、forEach()メソッドの構文を示しています。

Array.forEach(callback [, thisArg]);Code language: CSS (css)

forEach()メソッドは2つの引数を取ります。

1) callback

forEach()メソッドがすべての要素に対して実行するために使用するcallback関数。

callback は次の引数を受け入れます。

currentElement：処理中の現在の配列要素。
index：配列内のcurrentElementのインデックス。
array：forEach()メソッドを呼び出す配列。

indexとarrayはオプションです。

2) thisArg

thisArgは、コールバックを実行する際に this として使用する値です。

forEach()関数はundefinedを返すため、filter(), map(), some(), every(), およびsort()のような他の反復メソッドのようにチェーンすることはできません。

forEach()メソッドのforループと比較した1つの制限は、ループを制御するためにbreakまたはcontinueステートメントを使用できないことです。

forEach()メソッドでループを終了するには、callback関数内で例外をスローする必要があります。

JavaScript 配列 forEach() メソッドのその他の例

contextObjectを使用するforEach()メソッドの例を見てみましょう。

以下は、Counterコンストラクター関数を示しています。

function Counter() {
    this.count = 0;
    let self = this;
    return {
        increase: function () {
            self.count++;
        },
        current: function () {
            return self.count;
        },
        reset: function () {
            self.count = 0;
        }
    }
}Code language: PHP (php)

この例は、カウンターオブジェクトをforEach()メソッドに渡す方法を示しています。

var counter = new Counter();
var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function (e) {
    sum += e;
    this.increase();
}, counter);

console.log(sum); // 6
console.log(counter.current()); // 3
Code language: JavaScript (javascript)

仕組み

まず、新しいCounterオブジェクトを作成します。
次に、3つの数値の配列を定義します。
次に、変数sumを宣言し、ゼロの値を代入します。
その後、numbers配列でforEach()メソッドを呼び出します。コールバック関数で、要素をsum変数に追加し、counterオブジェクトのincrease()メソッドを呼び出します。counterオブジェクトは、コールバック関数内でthisとして参照されることに注意してください。
最後に、Webコンソールでsumの値とカウンターの現在の値をログに記録します。

このチュートリアルでは、JavaScript 配列のforEach()メソッドを使用して、配列のすべての要素に対してコールバックを実行する方法を学びました。

このチュートリアルは役に立ちましたか？