【Progate】JavascriptⅥ に突入Pushから【本日の勉強ログ】
pushメソッドとは、
★━━━━━━━━━━━━━━━━━━━━★★━━━━━━━━━━━━━━━━━━★
「配列の最後に新しい要素を追加」するメソッド。
方法
・pushメソッドの後の()の中に追加したい要素を入力。
コンソ－ルにその順番通りに要素が追加される。
以下の例では、pushメソッドの引数「4」が配列の最後に追加されています。Ex.const numbers = [1, 2, 3];console.log(numbers);numbers.push(4);console.log(numbers);
forEach
★━━━━━━━━━━━━━━━━━━━━★★━━━━━━━━━━━━━━━━━━★
forEachメソッドは配列の中の要素を1つずつ取り出して全ての要素に繰り返し同じ処理を行うメソッドです。
以下の例では、配列numbersの要素が順番にすべて出力されています。
実際にどのような処理がされているか詳しく確認しましょう。
Ex.const numbers = ["x","y", "z"];numbers,forEach((number) => {console.log(number);});
コンソール
x
y
z
配列の値に注目。全てconsole.logによって出力される。
forEachの仕組み
★━━━━━━━━━━━━━━━━━━━━★★━━━━━━━━━━━━━━━━━━★
forEachメソッドの引数には、学習Ⅲで学んだアロー関数が入っています。配列内の要素が1つずつ順番にアロー関数の引数に代入され、処理が繰り返し実行されます。
これから学ぶメソッドはこのようにアロー関数を使う形が多いので覚えておきましょう。
forEachの使い方
★━━━━━━━━━━━━━━━━━━━━★★━━━━━━━━━━━━━━━━━━★
forEachメソッドを使うときは以下のように書きます。
以下の例では、1,配列numbersの要素が1つずつ順番に引数numberに代入され、2,処理内に書いてあるconsole.log(number)が繰り返し実行されています。
Ex.const numbers = [1, 2, 3];numbers.forEach((number) => {console.log(number);});
コンソール123
コールバック関数ーｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐ－ｐコールバック関数とは
引数に入っている関数の事です
Ex.
const numbers = [1, 2, 3];njmbers.forEach((number) => {console.log(number);});
上記 (number) => {console.log(number);}); をコールバック関数と呼びます。これから学ぶメソッドはコールバック関数を使う形が多いです。覚えておきましょう。
長いコードの書き方
★━━━━━━━━━━━━━━━━━━━━★★━━━━━━━━━━━━━━━━━━★
forEachメソッドのように引数にコールバック関数を使うメソッドはコードが長くなりやすいため、以下のように書くことが多いです。
Ex.const numbers = [1, 2, 3];numbers.forEach((number) => { console.log(number);});
コンソール123
さて、上記のどこが「コールバック関数」になるでしょうか。
A.下記の部分(number) => { console.log(number);}
処理の前の中括弧「{」から改行することで、長いコードでも見やすくなるという利点があります。
-point-
長いコードを見やすくするために「{」から改行する
まとめ
重要な点は２つ
1,forEachメソッドを使えるようにすること
2,配列OOの要素をすべて出力できるようになること
forEachメゾットを書きまくってみるforEachメゾットには二つの書き方がある
1 const menbers = ["愛","情熱", "酒動画"]; menbers.forEach((nember) => { console.log(menber); }); ↑半角1回だけ
2 const number = ["愛","情熱", "酒動画"]; numbers.forEach((nember) => {
console.log(nember); });
コンソール
愛
情熱
酒動画
findメソッド
★━━━━━━━━━━━━━━━━━━━━★★━━━━━━━━━━━━━━━━━━★
-point-
findメソッドもコールバック関数を使うメソッドと認識する
findはこうやって理解する
１．findメソッドと
２．コールバック関数の処理部分に
３．記述した条件式に合う
４．1つ目の要素を
５．配列の中から取り出す
６．それがfindメソッド
