見出し画像
Photo by soeji

【GAS基礎編17】ループ応用編_配列からの取り出し方

MARIE

おはようございます！MARIEです(｀・ω・´)ゞ

宿題の答え合わせ

前回出題した宿題は無事に完了しましたでしょうか？

宿題は以下でした。

1から100の整数のうち、偶数だけを足した値を出力してください。

これ、前回のテストが解けていたら簡単でしたね！
答えはこうです( ｀ー´)ノ

function loopTest() {
let total = 0;

for (i = 1; i <= 100; i++) {

  if (i % 2 === 0) {
    total = total + i;
  }
}

console.log(total);
}

「if」のところ、if (i % 2 === 0)
もし1～100の整数のうち偶数であれば足し算をしていくというところのみを変えたら宿題が解けたかと思います！
詳しい解説については、前回の記事を参照してくださいm(_ _)m

ループっていつ使うの？

ところで、ループを頑張って覚えているけど、イマイチ使いどころがわからないなぁ(ﾟ∀ﾟ)って方いませんか？
実は私はそのうちの中の1人でございます（笑）

今日はループの応用がイメージしやすくなる章にしたいなと思います。

【配列の中の処理】

const animal = ['cat', 'dog', 'lion'];

上記の配列の中身を1つずつ取り出して処理をしたい場合、例えば以下のように出力をしたい場合。

function forLoop() {
 const animal = ['cat', 'dog', 'lion'];

 console.log(animal[0] + 'を飼っています');
 console.log(animal[1] + 'を飼っています');
 console.log(animal[2] + 'を飼っています');

}

画像2

こんな感じで取り出すことができますが、要素が多くなった場合、めっちゃ大変じゃないですか。

画像3

そんな時、黄色いマーカーが引かれている部分に注目。
これ「i++」でできそう(ﾟ∀ﾟ)！！な気がしてならない！

for文で繰り返しの回数を指定する方法

いつものごとく、まずは以下のプログラムを書いて実行をしてみましょう！

function forLoop() {
 const animal = ['cat', 'dog', 'lion'];

 for (let i = 0; i < animal.length; i++) {
   console.log(animal[i] + 'を飼っています')
 }
}

もうこのプログラムを書いているうちにピンときた方も多いのではないでしょうか。

for (let i=1; i<=10; i++){
 console.log(i);
}

これに似てる(*´ω｀*)

つまり、「let i = 0;」でカウンターの初期値を決め、「i < animal.length;」で条件（終了値）を決め、「i++」で1回の処理が終わったら1を増やす。
これまで学んできたループのところと同じことをやっているだけですね。

ちなみに、「length」とは前もやったかな？おさらいになるかもしれませんが、配列の最後のデータということ。

つまり･･･つまりでたー(ﾟ∀ﾟ)
「animal.length」は、animalという配列の最後のデータを表しています。
もうわかりましたよね！

for...of文で配列の要素を最初から全部見ていく方法

なんかまたofという新しいものが出てきましたね(゜-゜)
でももう怖くはないです。ここまでこれたんで。

では、さっそく以下のプログラムを書いて実行をしてみましょう！

function forLoopof() {
 const animals = ['cat', 'dog', 'lion'];

 for (const animal of animals) {
   console.log(animal + 'を飼っています')
 }
}

for (const animal of animals)
の部分は、何を表しているかというと、配列の最初から最後までを繰り返すという書き方です。ちなみに結果はこうなりました。

画像3

あれ、普通のfor文と何が違うの？って思いましたよね？
もう皆さんのお気持ちはわかりますよ(ﾟ∀ﾟ)だって今回の記事で基礎編17まで一緒にやってきたんですから（笑）

では、普通のfor文と見比べてみましょう！

//for文
function forLoop() {
 const animal = ['cat', 'dog', 'lion'];

 for (let i = 0; i < animal.length; i++) {
   console.log(animal[i] + 'を飼っています')
 }
}


//for of文
function forLoopof() {
 const animals = ['cat', 'dog', 'lion'];

 for (const animal of animals) {
   console.log(animal + 'を飼っています')
 }
}

今回のプログラムだと、出力される結果は同じですが、
for文はあくまでも、iで初期値と終了値を決め、その間繰り返すというやり方です。そう、開始と終了を指定することができます。

一方でfor of文は、開始と終了の指定はできないけれど、配列の全部の要素を見るときにはすごく便利なものとなります。

for (const animal of animals)
さらに詳細を説明すると、animalsの配列から要素を1つずつ取り出し、取り出した要素をanimalという変数に入れるよ！ってことです。

どうでしょうか。ここまでOKですか( ｀ー´)ノ

forEach関数で配列の要素を最初から全部見ていく方法

まぁ～た新しいやつ（笑）
懲りずに、さっそく以下のプログラムを書いて実行をしてみましょう！

function forLoop() {
 const animals = ['cat', 'dog', 'lion'];

 animals.forEach((animal) => {
   console.log(animal + 'を飼っています');

 });
}

新しく出てきた「forEach」について、解説をしていきますね。

「forEach」の基本的な形は、以下のようなものです。

let animals = [配列データ];

animals,forEach(コールバック関数)

「forEach」は配列データの値1つずつに対して、コールバック関数に記述した処理を実行できます。

さきほどのプログラムでいうと、変数（animals）に格納した配列を、forEachで要素1つずつに対して処理をして、animalという変数に入れてくださいということです。

書いておいてあれですが、初心者はforを覚えれば十分で、中級者以上になったら、より「forEach」のありがたみがわかってくるようです（笑）
「forEach」を使えば効率的なコーディングができるようになるそう。

私はちょっと頭がゴチャゴチャになってきたので、一旦触りだけってことで頭の片隅に置いておくことにします。

では宿題です

今日の宿題はテスト並みに難しいかもしれません（笑）
宿題は以下です。

function homeWork() {
 const members = ["MARIEさん", "TAKESHIさん", "SAEさん", "TOSHIさん"];

 // ここに処理を書く
}

membersの配列があります。
全員に対して、メッセージを伝えてください。
但し、それぞれに伝えるメッセージは以下とします。

MARIEさん「今週の土曜日は何をしてますか？」
TAKESHIさん「金曜日飲みに行きません？」
SAEさん「釣りに行きましょう」
TOSHIさん「釣りに行きましょう」

※for、for of、forEachのどれを使ってもOKとします。
※ヒント、if,else,else ifを使うよ

以上、ではまた次回よろしくお願いいたします(｀・ω・´)ゞ


いいなと思ったら応援しよう！