〽️ 引数に渡される内容。 〽️ NodeListで一括編集。
JavaScriptコードの見慣れない表記をまとめたページはこちら⬆︎。
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されます。
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割引にすることができました。
ここで朗報。
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、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。