【プロゲート】JavaScript ES6（最新版） JavaScript VIの学習内容まとめ

JavaScript VI

1.pushメソッド

配列を操作するメソッドを学ぼう
・このレッスンでは「配列を操作するメソッド」について学習していく
・配列の操作を学ぶと、データを柔軟に扱えるようになる
・これから学ぶ便利なメソッドはJavaScriptを実践的に使う場合に必須の知識

push
・pushメソッドとは、配列の最後に新しい要素を追加するメソッド
・pushメソッドの後の()の中に追加したい要素を入力する
・pushメソッドの引数「4」が配列の最後に追加されている

2.forEachメソッド

forEach
・forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッド
・配列numbersの要素が順番にすべて出力されている

forEachの仕組み
・forEachメソッドの引数には、学習Ⅲで学んだアロー関数が入っている
・配列内の要素が1つずつ順番にアロー関数の引数に代入され、処理が繰り返し実行される
・これから学ぶメソッドはアロー関数を使う形が多いので覚えておく

forEachの使い方
・forEachメソッドを使うときの書き方
・配列numbersの要素が1つずつ順番に引数numberに代入され、処理内に書いてあるconsole.log(number)が繰り返し実行されている

コールバック関数
・引数に入っている関数はコールバック関数と呼ぶ
・これから学ぶメソッドはコールバック関数を使う形が多いので覚えておく

長いコードの書き方
・forEachメソッドのように引数にコールバック関数を使うメソッドはコードが長くなりやすいため、処理の前の中括弧「{」から改行すると長いコードでも見やすくなるという利点がある

3.findメソッド

find
・findメソッドとは、条件式に合う1つ目の要素を配列の中から取り出すメソッド
・配列numbersの中から、3より大きい1つ目の要素である5がfoundNumberに代入されコンソールに出力されている

findの使い方（1）
・findメソッドを使うときは配列numbersの要素が1つずつ引数numberに代入されて処理が進む
・コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となる
・findメソッドは条件に合う要素が見つかった時に終了するので、条件に合う最初の1つの要素しか取り出せない

findの使い方（2）
・配列の要素がオブジェクトの場合もfindメソッドを使うことができる
・オブジェクトのプロパティを条件の中で使用している
・オブジェクトのプロパティを条件として使用する場合、そのプロパティを持っているオブジェクトそのものを取り出す

4.filterメソッド

filter
・filterメソッドとは記述した条件に合う要素のみを取り出して新しい配列を作成するメソッド
・配列numbersから「3より大きい数字」をすべて取り出している

filterの使い方（1）
・配列numbersの要素が1つずつ引数numberに代入される
・その後、filterメソッド内で「3より大きい数字」かどうかを判定し、条件に合う要素が定数filteredNumbersに配列として代入される

filterの使い方（2）
・findメソッドと同様に、配列の要素がオブジェクトの場合もfilterメソッドを使うことができる
・オブジェクトのプロパティを条件として使用する場合、そのプロパティを持っているオブジェクトそのものを取り出す

5.mapメソッド

map
・mapメソッドとは、配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッド

mapの使い方（1）
・配列numbersの要素が1つずつ引数numberに代入されている
・その後、mapメソッド内の 「要素を2倍する処理」 をした配列が新しく作られ、定数doubledNumbersに配列として代入されている
・コールバック関数の中の処理は { return 値 } と書く

mapの使い方（２）
・mapメソッドもこれまでのメソッドと同様に、配列のオブジェクト要素に対しても使うことができる
・mapでfirstNameプロパティとlastNameプロパティを繋げる処理をしている