JavaScript基礎メモその2

while文

while文は繰り返し処理を行う場合に用いる。

let number = 1;
//変数numberの値が100以下の時に処理を繰り返す
while (number <= 100) {
//繰り返す処理
  console.log(number);
  number += 1;
}

結果
1
2
3
.
.
.
100

for文

for文はwhile文と同様に繰り返し処理を行うが、while文よりシンプルに書くことができる。

for (変数の定義; 条件式; 変数の更新) {
  処理
}

for (let number = 1; number <= 100; number += 1) {
  console.log(number);
}

結果
1
2
3
.
.
.
100

for文とif文を使ったコード

1から100を順番に出力し3の倍数の時には「3の倍数です」と表示させる。

for (let number = 1; number <= 100; number++) {
  if (number % 3 === 0) {
  console.log("3の倍数です");
  } else {
    console.log(number);
  }
}

結果
1
2
3の倍数です
.
.
.
98
3の倍数です
100

配列

配列は、複数の値をまとめて管理する場合に用いり、[値1, 値2, 値3]のように作る。
配列に入っているそれぞれの値を要素と呼ぶ。
配列も一つの値なので、定数に代入することができる。

const number = [1, 2, 3];

console.log(number);

結果
[1, 2, 3]

配列が出力される。

インデックス番号

配列の要素にはそれぞれインデックス番号が割り振られている。
インデックス番号は左側の要素から、0から始まる。
インデックス番号を用いて配列の要素を取得するには定数名の後に(変数名[1])のように取得したい要素のインデックス番号を指定する。

const names = ["toda", "sakurai", "owada"];

console.log(names[0]);
console.log(names[2]);

結果
toda
owada

配列の要素を更新する

要素に値を代入することでその要素を上書きすることができる。

const names = ["ishida", "kondou", "wakai"];

console.log(names[0]);
names[0] = "harada";
console.log(names[0]);

結果
ishida
harada

インデックス番号[0]の"ishida"が"harada"に更新される。

配列と繰り返し

for文を使って配列の要素を順番に取り出してみる。

const names = ["tokoro", "nanase", "mogami"];

for (let i = 0; i < 3; i++) {
  console.log(names[i]);
}

for文では、i = 0 で変数iに0を代入し、 i++ でiの値を1ずつ増やし、 i < 3 で3未満になったら処理を停止するようにしている。
変数iを用いて要素を取得している。　(names[ i ])

結果
tokoro
nanase
mogami

length

lengthは配列の要素数を取得できる。
for文の条件式に使うことができる。

const names = ["tokoro", "nanase", "mogami"];
console.log(names.length);

結果
3

const names = ["tokoro", "nanase", "mogami"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

結果
tokoro
nanase
mogami

オブジェクト

オブジェクトは配列と同じく複数のデータをまとめて管理する場合に用いる。
配列との違いは、オブジェクトはそれぞれの値に対してプロパティと呼ばれる名前をつけて管理する。

//配列
[値1, 値2, 値3]

//オブジェクト
{プロパティ1: 値1, プロパティ2: 値2}

const user = {name: "aoi", sex: "woman"};

console.log(user);

結果
{name: "aoi", sex: "woman"}

オブジェクトの値の取得・更新

・値の取得

const user = {name: "aoi", sex: "woman"};

console.log(user.name);

結果
aoi

・値の更新

const user = {name: "aoi", sex: "woman"};
user.name = "akane";

console.log(user.name);

結果
akane

オブジェクトを要素に持つ配列

配列の要素には、オブジェクトも使うことができる。

const users = [
  {name: "noriko", sex: "woman"},
  {name: "yoshiki", sex: "man"}
];

// 配列の値がオブジェクトなので、配列[インデックス番号]で対応するオブジェクトを取得できる。
console.log(users[1]);

// 配列の中のオブジェクトのプロパティの値を取り出すには、配列[インデックス番号].プロパティ名 で取得できる。
console.log(users[1].name);

結果
{name: "yoshiki", sex: "man"}

yosiki

存在しない容姿、プロパティの取得

配列に対して存在しないインデックス番号を指定したり、オブジェクトに対して存在しないプロパティを指定するとどうなるか試してみる。

const users = ["noda", "enndou", "saitou"];
console.log(users[1]);
console.log(users[4]);

結果
endou
undefined

const user = {name: "gotou", age: 22};
console.log(user.phonenumber);

結果
undefined

存在しない要素は取得しようとすると、undefinedとなる。
undefinedは未定義という意味。