トラたんの挑戦するBlog in Japan

プログラミング初心者が半年でプログラミングの仕事をする

毎日投稿していくはずが、、、(なんてこった。)

こんばんは!!!

 

 

トラたんです!

 

 

タイトルのとおり、毎日投稿していくはずがお休みしてしまいました。

 

これは僕自身あかんなって思いました。

 

なんでかっていうと、毎日このブログに学んだことを記録していくブログなので、毎日やらないと意味がないと思っているからなんですね。

 

正直、二日間お休みしたのには理由があって、

 

1つ目は卒論をそろそろ書き始めないといけないって話だよね

2つ目は昨日は友達と3人でゴルフをしていたって話。

 

そもそもプログラミングの勉強二日間お休みしていたので書くことないんですけど

 

それに、

 

毎日の勉強って大事だと思うんですけど、

 

二日間お休みすることによって頭がリフレッシュされてより理解できると思ったんですよ!

 

だから、毎日やるのもいいけどたまには休息も必要だなって思いました。

正直、あと少しでJavaScriptの学習も終わりを迎えているので、、、

 

それじゃあ今日の学びから!

 

<本日のプログラミング学習>

 

①pushメゾット

②forEachメゾット

③findメゾット

④filterメゾット

⑤mapメゾット

 

①pushメゾット

 

このメゾットは、

配列の最後に新しい要素を追加することができるメゾットです。

 

例えば、元々の配列が1,2,3だったとしましょう

その配列をコンソールにそのまま出力するだけでなく、新たに4という数字を配列の中の要素に加えましょうってなった際に使うメゾットがpushメゾットです

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543829630497.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543829630497.png

 

②forEachメゾット

 

このメゾットは、

配列の中の要素を1つだけ取り出して、全ての要素に繰り返し同じ処理を行わせるメゾットです。

 

ここではアロー関数を使うことを覚えておきましょう!

 

仕組みとしては、配列の中の要素が引数の中に代入され、

コンソールにて処理が実行されることでこのメゾットが使えるというわけであります。

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/159002882228.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/159002882228.png

 

③findメゾット

 

このメゾットは、

条件式に合う1つ目の要素を配列から取り出すメゾット

です。

 

例えば、配列が1,3,5,7とあったとする。

 

この配列の数から3より大きい数字を取り出せという条件式を書きます。

 

そしてこの配列の中から3より大きい最初の数字は5なので、コンソールには5が出力されます。

 

この場合の定数名はfoundNumberを書く必要があり、5がこの定数名に代入されることによってコンソール上に出力されます

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1544087316788.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1544087316788.png

 

④filterメゾット

 

このメゾットは先ほどのfindメゾットと少し似ているのですが、

 

記述した条件に合う要素のみを取り出して新しい配列を作るメゾットです

 

先ほどの配列と条件式をそのまま使うと、

3より大きい数字を取り出すとすると、5の他に7もありました。

 

findメゾットは1つのみを取り出すのに対し、

 

filterメゾットは複数の要素を配列の中から取り出すことができます。

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318080620.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318080620.png

 

※findメゾットもfilterメゾットも数値のみを取り出すだけじゃなく、オブジェクトも取り出すことができるのでとても便利だと言えますね

 

findメゾットの場合

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543918178849.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543918178849.png

 

filterメゾットの場合

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1568083446197.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1568083446197.png

 

 

⑤mapメゾット

 

このメゾットの特徴は、

配列内の全ての要素に処理を行い、その戻り値から新たな配列を作るメゾットです

 

例えば、配列内の数字が1,2,3だったとします

 

次に定数名、doubledNumberがあるとします。

 

そうすることで、配列内の数字が×2され、

コンソール上では、2,4,6というふうに処理され実行されます。

 

戻り値returnを使うことで、このように処理されます。

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318156790.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318156790.png

 

このメゾットにもオブジェクトを呼び出すこともできるので覚えておく必要があります。

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318180704.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318180704.png

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

本日はここまで!

 

今日もありがとうございました!

 

 

それじゃまた

 

バイバイバイ~