JavaScript、forEachとは?
〜配列に対するループ処理。

〽️ 引数に渡される内容。 〽️ NodeListで一括編集。





JavaScriptコードの見慣れない表記をまとめたページはこちら⬆︎。



syntax。


array.「「1forEach」」(function(value){ bb 「「3〜 処理 〜」」 bb});


配列の値をループ処理。


こんにちは、「ふ」です。
JavaScriptコードの「これって何?」シリーズです。今回は、

const array1 = [〇〇,〇〇,〇〇]; array1.「「1forEach」」 (............)

配列があったとして、それに対してforEach( )というものでなんらかの処理をしている....

これは、配列の値に対してループ処理を行うforEach( )メソッドです。
含まれる要素1つ1つに対して、一括で処理を行うことができるものです。

forEachは一見「for」や「for in」のようなループ文の1つに分類されそうですが、配列(Arrayオブジェクト)のメソッドです。
JavaScriptのサンプルコードでは頻繁に登場するものなので、ぜひ理解を深めておいてください。

記事の前半では配列をサンプルにして、forEachの基本的な挙動と使い方について紹介します。そして後半では、forEach本来の使いどころとも言える「HTML要素の一括編集」について紹介したいと思います。

基本形。


array.forEach(「「1function(){ }」」);

forEachの基本形について。
実行するには、「配列.forEach( )」とし、第1引数には処理内容が記述された関数が入ります。


let array1 = ["a","b","c"];

配列を用意しました。3つの値が入っています。
この配列に対してforEachメソッドを使ってみます。


array1.「「1forEach」」(function() { bbconsole.log("こんにちは"); bb}); 「「3▶︎ こんにちは」」 「「3▶︎ こんにちは」」 「「3▶︎ こんにちは」」

「こんにちは」を出力する処理をforEachさせました。
array1には3つの値が入っています。

「"a"に対して"こんにちは"を出力」
「"b"に対して"こんにちは"を出力」
「"c"に対して"こんにちは"を出力」

というように、値の数だけループして処理が行われます。
しかしこれでは "こんにちは" を出力しているだけで、値に対して何をしているわけでもありません。
処理関数に値そのものを渡してみましょう。


array.forEach(function(「「1value」」){ });

処理関数に第1引数(名前は何でもよい)を記述すると、そこには配列の値が渡されます。これもforEachメソッドの持つ機能です。


array1.forEach(function(「「1value」」){ bbconsole.log(「「1value」」); bb}); 「「3▶︎ a」」 「「3▶︎ b」」 「「3▶︎ c」」

forEachメソッドは配列内の値をループし、

「"a"に対して自身の値を出力」
「"b"に対して自身の値を出力」
「"c"に対して自身の値を出力」

とループ処理が実行されていきます。
結果、値が1つづつconsole.logされました。



〜これがforEachメソッドの基本的な形です。

メソッド自身の第1引数に処理内容を関数で記述→さらにその処理関数の第1引数に配列要素の値を渡して、ループ処理させる

〜というものです。

その他渡される値。


array.forEach(function(value,「「1index,array」」){ });

処理関数に第2、第3引数を記述すると、それぞれ「配列のindex」と「配列そのもの」が渡されます。これについても引数名はなんでも構いません。

let array2 = ["e","f","g"]; array2.forEach(function(value,「「1index」」,array){ bbconsole.log(「「1index」」); bb}); 「「3▶︎ 0」」 「「3▶︎ 1」」 「「3▶︎ 2」」

forEachで処理関数の第2引数を出力すると、インデックスが出力されました。


array2.forEach(function(value,index,「「1array」」){ bbconsole.log(「「1array」」); bb}); 「「3▶︎ (3)["e","f","g"]」」 「「3▶︎ (3)["e","f","g"]」」 「「3▶︎ (3)["e","f","g"]」」

第3引数を出力すると、値の数だけ配列そのものがconsole.logされます。

valueでは書き換えられない。


forEachメソッドは「配列の値をループ処理する」といっても、「値を書き換える」場合にはひと手間が必要になってきます。

let price = [100,200,300];

商品の値段を並べた配列「price」というものを想定します。
普段は100円、200円、300円のもの。

今回、「全品2割引」にしたい。


plice.forEach(function(value){ bbvalue *= 0.8; bb}); console.log(price); 「「3▶︎ (3)[100,200,300]」」

ためしに、valueに0.8を掛け合わせるループ処理を行いました。しかし💧その後配列自体を出力してみたのですが、処理前と内容は変わっていません。

処理関数の第1引数は配列の値そのものを取り出しているのに過ぎず、indexなどの参照情報は持ち合わせていないためです。
この場合、「配列+index」でちゃんと参照してやる必要があります。
処理関数の引数で配列本体とindexを呼び出しましょう。


plice.forEach(function(value,「「1index,array」」){ bb「「1array[index]」」 *= 0.8; bb});

「配列本体+index」で処理をループさせました。
そのうえで改めて配列を出力。


console.log(price); 「「3▶︎ (3)[80,160,240]」」

全品2割引にすることができました。

NodeListにもforEach。


ここで朗報。
forEachメソッドを持つのは配列(Array)だけではないのです。class要素をまとめて取得したときに得られる「NodeList」もforEachメソッドに対応しているんです。

forEachメソッドの使いどころ、むしろこっちが本命と言えるでしょう。

<p class = "namae">太郎</p> <p class = "namae">二郎</p> <p class = "namae">サブロー</p>

3つの<p>要素があり、class名はいづれも「namae」です。

太郎

二郎

サブロー

ブラウザ上での表示⬆︎です。
これから、すべての「.namae」要素の内容を変更したいと思います。

const namae = document.「「1querySelectorAll」」(".namae");

querySelectorAll( )メソッドは、引数に指定した要素名やclass名に該当するものをまとめて取得するものです。

console.log(namae); 「「3▶︎ NodeList(3) [p.namae, p.namae, p.namae]

console.logしてみると、「NodeList」というものが出力されました。
NodeListとは、HTML文書を構成する要素をリスト状にしたものです。後につづく角括弧[ ]を見ると、配列のように要素が並べられています。ここにforEachを使ってみましょう。


namae.forEach(function(value){ bbvalue.「「1innerText」」 += "、こんにちは"; });

この場合、引数valueには<p>要素が渡され、ループ処理が行われます。
innerTextプロパティでvalueのテキスト部分にアクセスし、あいさつを追加しました。



太郎、こんにちは

二郎、こんにちは

サブロー、こんにちは

結果⬆︎です。
取得したclass要素の内容を一括で書き換えることができました。
このように

「querySelectorAllで要素をまとめて取得」→「NodeListに対してforEach」

とすることで、HTML要素の一括編集を行うことができます。
とても便利なので、ぜひ知っておいてください。

メソッドの引数処理に慣れよう。


最後までお読みくださり、ありがとうございます。
forEachメソッド、サンプルコードで見かけたときには「何らかのループ処理かな?」くらいの想像はつくかもしれません。しかし「引数に自動的に内容が渡される」というメソッドの働き。初学者の方は、そこのところが引っかかるとおもいます。

以前紹介した「function(e)」のときもそうでしたが、いつの間にか引数に値が渡されている←それはメソッドの仕業です。ご自分でもコードを書いて実験し、理解を深めていくようにしてください。

観てくれた人.forEach( function { ありがとう、またお会いしましょう! } );





JavaScriptの点3つ「 ... 」 〜スプレッド構文(演算子)について。

2022.02.14
本質は「オブジェクトの複製」にあり。


JavaScript、乱数の範囲や重複を指定〜Math.random使い方。

2021.11.17
整数/範囲/重複の有無を自在にあやつろう。

JavaScriptの矢印「=>」〜これはアロー関数というものです。

2022.01.09
使い方とメリットについて解説。


ブログのクリックをGoogle Analyticsで計測。

2021.11.30
新たなツールは導入せずともOK。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。