配列を学ぶ意味は？
配列は複数のデータを扱うための仕組み。
SpreadSheetからデータを取得するとき等に複数データを扱う必要がでてくる。
本記事のゴール
配列から任意の値を取り出せるようになること。
演習1 配列の作成
とりあえず配列で動くコードを実装
.js
const helloArray = () => {
const values = [1, 2, 3, 4, 5]; // 配列の作成
console.log(values[0]); // 配列の中の値の一つを取得
}
helloArray();
ポイント
配列の作成
.js
const 配列の変数名 = [配列の要素1, 配列の要素2, 配列の要素3];
[]でくくって、,で区切る。
配列の要素の取得
.js
配列[何番目かを示す数]
今回のコードでは
.js
values[0]
0番目を指定している。
プログラミング初心者の方は0番目って何？と思うかもしれない。
多くのプログラミング言語では配列の要素を取得するときには0番目から数える。
つまりこういうこと
演習2 for文
とりあえず動くコードを書く。
まずは配列は使わない。
.js
const helloFor = () => {
for (let i = 0; i < 3; i++) {
console.log("HelloFor " + i);
}
}
helloFor();
上記のような結果になる。
なぜこんな結果になるのか処理順序順に見ていく。
まずfor文の構文
for.js
for (最初に実行される処理; ループ続行条件; ループごとに実行される処理){
繰り返す処理
}
日本語が多くて見づらい。多くの場合は形が決まってるので以下のような形で覚えると良い。
for.js
for(let i = 0; i < ループ数; i++){
繰り返す処理
}
ここで変数iはindexの頭文字。iっていう変数名でなくても問題ない。
これを踏まえて演習2のコードを見ていく。
演習2のfor文を分解すると以下のようになる
.js
let i = 0; // 最初に実行する処理
// --- ポイント1
if (i < 3){ // ループ続行条件
console.log("HelloFor" + i);
i++; // iに1足す. ループごとに実行される処理
// ポイント1に戻る
}
最初i=0から始まり、ループごとに1足されていく。
iが3になったらループ続行条件を満たさなくなる。
つまり、iが0, 1, 2のときに中の処理が実行される。
したがって3回処理が呼ばれる。
課題1
0 ~ 10までの数字を出力してみよう
課題2
0 ~ 10までの数字の和を出力してみよう。
ヒント: for文の前にlet sum = 0;を定義する。
演習3 配列の中身を全て出力する。
演習2のforを配列と組み合わせることによって、配列の中身を全部出力することができる。
.js
const logAll = () => {
const values = ["一郎", "二郎", "三郎"];
for (let i = 0; i < values.length; i++) {
console.log(values[i]);
}
}
logAll();
ポイント
配列.lengthで配列の要素の数を返す。
この例題では3