0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript基礎メモその2

Last updated at Posted at 2021-04-22

while文

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

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

結果
1
2
3
.
.
.
100

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

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


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

結果
1
2
3
.
.
.
100

#for文とif文を使ったコード
1から100を順番に出力し3の倍数の時には「3の倍数です」と表示させる。
>```javascript
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]のように作る。
配列に入っているそれぞれの値を要素と呼ぶ。
配列も一つの値なので、定数に代入することができる。
>```javascript
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

#配列の要素を更新する
要素に値を代入することでその要素を上書きすることができる。
>
```javascript
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

>```javascript
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}


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

>console.log(user);

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

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

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

console.log(user.name);


結果
aoi

・値の更新
>```javascript
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

#存在しない容姿、プロパティの取得
配列に対して存在しないインデックス番号を指定したり、オブジェクトに対して存在しないプロパティを指定するとどうなるか試してみる。
>```javascript
const users = ["noda", "enndou", "saitou"];
console.log(users[1]);
console.log(users[4]);

結果
endou
undefined

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

結果
undefined

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?