ES6でのforeach()の使用方法-フロントエンドQ&A-php.cn

ES6でのforeach()の使用方法

青灯夜游

リリース： 2022-03-09 13:49:03

オリジナル

6570 人が閲覧しました

es6 では、foreach() メソッドを使用して配列を走査し、配列の各要素を呼び出し、その要素を処理のためにコールバック関数に渡します。構文は「array.forEach(function(currentValue,インデックス、arr)、thisValue)」。

ES6でのforeach()の使用方法

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

es6 では、foreach() メソッドを使用して配列を走査し、配列の各要素を呼び出し、その要素を処理のためにコールバック関数に渡します。具体的な説明は次のとおりです。

array.forEach(function(currentValue, index, arr), thisValue)

ログイン後にコピー

オプション。関数に渡される値は通常、「this」値を使用します。

Parameter	Description
function(currentValue,インデックス、arr )	必須。配列内の各要素に対して呼び出す必要がある関数。関数パラメータ: パラメータの説明 currentValue は必須です。現在の要素のインデックスはオプションです。現在の要素のインデックス値。 arr はオプションです。現在の要素が属する配列オブジェクト。
#thisValue	このパラメータが空の場合、「未定義」が「this」値に渡されます

配列内に表示される各要素に対して、forEach メソッドが呼び出されます。 callbackfn 関数はインデックスの昇順で 1 回呼び出されますが、配列内の空の要素に対してコールバック関数は呼び出されません。

forEach メソッドは、配列オブジェクトに加えて、長さプロパティを持ち、数値インデックス付きのプロパティ名を持つ任意のオブジェクト (連想配列オブジェクト、Arguments など) にも使用できます。

forEach メソッドは元の配列を直接変更しませんが、コールバック関数によって変更される可能性があります。 forEachメソッドの起動後に配列オブジェクトを変更した結果は表のとおりです。

コールバック関数による配列変更の影響forEach メソッド開始後の条件要素がメソッドに渡されるかどうかコールバック関数配列の元の長さを超える要素を追加しますコールバック関数で不足している要素を埋めるために要素を追加します。 array要素が変更されました配列から要素を削除



##No
はい、インデックスがコールバック関数に渡されていない場合は
はい、要素が変更されていない場合はコールバック関数に渡されました
要素がコールバック関数に渡されていない限り、いいえ

例 1

次の例では、forEach を使用して配列 a を反復し、各要素の値と添字インデックスを出力および表示します。コードは次のとおりです:

function f(value,index,array) {
    console.log("a[" + index + "] = " + value);
}
var a = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
a.forEach(f);

ログイン後にコピー

デモンストレーションの結果は次のとおりです。

ES6でのforeach()の使用方法

例 2

次の例では、forEach を使用して配列を反復します。 a、配列要素の合計を計算して出力します。

var a = [10, 11, 12], sum = 0;
a.forEach (function (value) {
    sum += value;
});
console.log(sum);  //返回33

ログイン後にコピー

例 3

次の例は、コールバック関数の this 渡しオブジェクトである forEach() メソッドの 2 番目のパラメーターの使用方法を示しています。配列を反復処理する場合、最初に配列要素の値が読み取られ、次にその値が上書きされます。

var obj = {
    f1 : function(value,index,array) {
        console.log("a[" + index + "] = " + value);
        arrar[index] = this.f2(value);
    },
    f2 : function (x) {return x * x;}
};
var a = [12, 26, 36];
a.forEach(obj.f1, obj);
console.log(a);  //返回[144, 676, 1296]

ログイン後にコピー

[関連する推奨事項:

JavaScript ビデオチュートリアル

、Web フロントエンド ]

以上がES6でのforeach()の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。