【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ② #JavaScript

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

while文 - 繰り返し処理

　- while文は、条件式がtrueの間、{　}内の処理を繰り返す。
　{　}の後にセミコロンは不要。

書き方

while(条件式){
  処理内容
}　←　セミコロンは不要

例

// 変数numberを定義
let number = 1;

// while文を作成
while(number<=100){
  // 処理内容
  console.log(number);
  number +=1;
}

for文 - 繰り返し処理

　- while文と同様の処理をする。

書き方

for(変数の定義;条件式;変数の更新){
  処理内容
}　←　セミコロンは不要

例

// for文を用いて、1から100までの数字を出力
for(let number = 1; number<=100; number+=1){
  console.log(number);
}

例2

// for文を完成
for (let number = 1;number<= 100 ;number+=1) {

  // if文を用いて、numberが3の倍数の時に「3の倍数です」、そうでないときは数字を出力
  //「3の倍数である」ということは、「3で割った余りが0と等しい」という条件と同じ
  if(number % 3 === 0){
    console.log('3の倍数です');
  }else{
  console.log(number);
  }

}

　- 余談
　「number += 1」は「number ++」のように省略して書くことが出来る。
　「number -= 1」の場合は「number --」と書くことが出来る。

配列 - 複数の値をまとめて扱う

　- 配列は、[値1, 値2, 値3] のように作成。
　配列に入っているそれぞれの値のことを要素と呼ぶ。

例

// 定数animalsに、指定された配列を代入
// 配列の中は、コンマで区切る
const animals = ['dog','cat','monkey'];

// 定数animalsを出力
console.log(animals);

// 出力結果 → ['dog','cat','monkey']

　- 配列の要素の取得
　配列の要素にはそれぞれインデックス番号という番号がついている。
　インデックス番号は、0から１、２・・・と始まることに注意。

例

const animals = ['dog','cat','monkey'];

// 配列の1つ目の要素を出力
console.log(animals[0]);

// 配列の3つ目の要素を出力
console.log(animals[2]);


// 出力結果 → dog　monkey

　- 配列の要素の更新

更新の仕方

const animals = ['dog','cat','monkey'];

// 配列animalsの3つ目の要素を「elephant」に更新
animals[2] = 'elephant';

// 配列animalsの3つ目の要素をコンソールに表示
console.log(animals[2]);

// 出力結果 → elephant

　- 配列と繰り返し
　for文を使って作成

例

const animals = ['dog','cat','monkey'];

// for文を用いて、配列の値を順にコンソールに出力
for(let i = 0 ;i<3 ; i++){
  console.log(animals[i]);
}

// 出力結果 → dog　cat　monkey

　- 配列の要素数を取得
　配列.length と書く事で要素数を取得

例

const animals = ['dog','cat','monkey'];

// lengthを用いて配列の要素の数を出力
console.log(animals.length);

// 出力結果 → ３

オブジェクト

　- オブジェクトは配列と同じく複数のデータをまとめて管理するもの
　オブジェクトはそれぞれの値にプロパティと呼ばれる名前をつけて管理
　{プロパティ1: 値1, プロパティ2: 値2} のように作成

例

// 定数clothesを定義し、指定されたオブジェクトを代入
const clothes = {type:'pants' , color:'red'};

console.log(clothes);

// 出力結果 → {type:'pants' , color:red}

　- オブジェクトの値の取得・更新
　オブジェクトの値を取得するには、「オブジェクト.プロパティ名」 で取得出来る。

例

const clothes = {type:'pants' , color:'red'};

// 定数clothesのtypeの値を出力
console.log(clothes.type);

// 出力結果 → pants

　オブジェクトの値を更新するには「オブジェクト.プロパティ名 = 新しい値」 で更新出来る。

例

const clothes = {type:'pants' , color:'red'};

// 定数clothesのcolorの値をblueに更新
clothes.color = blue;

// 出力結果 → {type:'pants' , color:'blue'}

　- オブジェクトを要素に持つ配列
　配列[インデックス番号]で対応するオブジェクトを取得することが出来る。
　配列の中のオブジェクトのプロパティの値を取り出すには、配列[インデックス番号].プロパティ名

例

const clothes = [
  {type:'pants' , color:'red'},
  {type:'jacket' , color:'yellow'}
];

// clothesの1つ目の要素をコンソールに出力
console.log(clothes[0]);

// 出力結果 → {type:'pants' , color:'red'}


// clothesの2つ目の要素の「color」に対応する値をコンソールに出力
console.log(clothes[1].color);

// 出力結果 → yellow

　- 複雑なオブジェクト
　オブジェクトの値の部分には、文字列や数値だけでなく、オブジェクトを用いることが出来る。

例

const cafe = {
  name: 'ドトール',
  times: {
    opening:'10:00(AM)',
    closing:'10:00(PM)'
  },
};

// 「店名:〇〇」を出力
console.log(`店名:${cafe.name}`);

// 出力結果 → 店名:ドトール


// 「営業時間:〇〇から△△」を出力
// 「オブジェクト名.プロパティ.プロパティ」で呼び出す
console.log(`営業時間:${cafe.times.opening}から${cafe.times.closing}`);

// 出力結果 → 営業時間:10:00(AM)から営業時間:10:00(PM)

　- オブジェクトの値には配列を用いる

例

const cafe = {
  name: 'ドトール',
  times: {
    opening:'10:00(AM)',
    closing:'10:00(PM)'
  },
  // menusプロパティに配列を代入
  menus: ['コーヒー', '紅茶', 'チョコレートケーキ']

};

console.log(`店名: ${cafe.name}`);
console.log(`営業時間:${cafe.times.opening}から${cafe.times.closing}`);

console.log('おすすめメニューはこちら');
// for文を用いて配列menusの中身を表示
for(let i = 0; i < cafe.menus.length; i += 1){
  console.log(cafe.menus[i]);
}

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
 【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12