JavaScript備忘録(数値、クラス)

数値

  const scores = [10,3,9];

  let sum = 0;

  scores.forEach(score =>{
    sum += score;
  });

  const avg = sum / scores.length;

  console.log(sum);
  console.log(avg);

  console.log(Math.floor(avg)); //切り捨て
  console.log(Math.ceil(avg)); //切り上げ
  console.log(Math.round(avg)); //四捨五入
  console.log(avg.toFixed(3)); //少数点以下3桁まで

  console.log(Math.random()); //0以上1未満のランダムな数値
  
  console.log(Math.floor(Math.random()*6)+1);
  //1~6のランダムな数値

時刻

  const d = new Date();
  console.log(d);//現在の時刻

  console.log(`${d.getMonth()+1}月${d.getDate()}日`);
  
  const d = new Date(2019,10); // 2019/11/01 00:00:00
  d.setHours(10,20,30); // 2019/11/01 10:20:30
  d.setDate(31); //2019/12/01 10:20:30
  d.setDate(d.getDate()+3); //2019/12/04 10:20:30
  console.log(d);

alert confirm

  alert('hello');

  const answer = confirm('削除しますか？');
  if(answer){
    console.log('削除しました');
  }else{
    console.log('キャンセルしました');
  }

setInterval

let i = 0;

 function showTime() {
   console.log(new Date());
   i++;
   if(i > 2){
     clearInterval(intervalId); //三回実行されると処理が止まる
   }
 }

 const intervalId = setInterval(showTime, 1000); //1000ミリ秒ごとに関数を実行する
 // 関数を引数として渡す場合関数名だけを書く

setTimeout

 let i = 0;

 function showTime() {
   console.log(new Date());
   const timeoutId = setTimeout(showTime, 1000); //一度だけ実行される
   i++
   if(i > 2){
     clearTimeout(timeoutId); //三回実行されると処理が止まる
   }
   }

   showTime(); 
   //showTimeを繰り返し呼び出すことで繰り返し処理のようになる

例外処理

  const name = 5;

  try{
    console.log(name.toUpperCase()); 
    //大文字になる(文字列にしか使えない)
  }catch(e){
    console.log(e);
  }
  // 例外処理することで処理を止めずに最後まで実行される


  console.log('Finish!');

オブジェクト

  const posts = [
    {
      text: 'JavaScriptの勉強中',
      likeCount: 0,
    },
    {
      text: 'JavaScript!!',
      likeCount: 0,
    },
  ];

  function show(post){
    console.log(`${post.text} - ${post.likeCount}いいね`);
  }
  show(posts[0]);

メソッド

  const posts = [
    {
      text: 'JavaScriptの勉強中',
      likeCount: 0,
      // show:　function(){ //関数をプロパティの値にした場合その関数をメソッドと呼ぶ
      show(){ // 上記から省略可能 
        console.log(`${this.text} - ${this.likeCount}いいね`);
        // 同じオブジェクト内のプロパティにアクセスするにはthisを使う
      }
    },
    {
      text: 'JavaScript!!',
      likeCount: 0,
      show(){  
        console.log(`${this.text} - ${this.likeCount}いいね`);
      },
    },
  ];


  posts[0].show();
  posts[1].show();

クラス

  class Post{ // クラス
    constructor(text){
      this.text = text; 
      this.likeCount = 0;
      //このクラスから作られるインスタンスをクラス内ではthisで表現する
    }

    show(){ 
      console.log(`${this.text} - ${this.likeCount}いいね`);
    }
  }

  const posts = [ // クラスから作られるオブジェクトのことはインスタンス
    new Post('JavaScriptの勉強中'),
    new Post('JavaScript!!'),
  ];


  posts[0].show();
  posts[1].show();

カプセル化

 class Post{ 
    constructor(text){
      this.text = text; 
      this.likeCount = 0;
    }

    show(){ 
      console.log(`${this.text} - ${this.likeCount}likes`);
    }

    like(){
      this.likeCount++;
      this.show(); // 同じクラス内のメソッドはthisを付けて呼び出す
    }
  }

  const posts = [ 
    new Post('JavaScriptの勉強中'),
    new Post('JavaScript!!'),
  ];

  posts[0].like();

静的メソッド

  class Post{ 
    constructor(text){
      this.text = text; 
      this.likeCount = 0;
    }

    show(){ 
      console.log(`${this.text} - ${this.likeCount}likes`);
    }

    like(){
      this.likeCount++;
      this.show(); 
    }
    // 静的メソッド(インスタンスを介さず直接クラスから呼び出せるメソッドの事)
    // thisは使わない(静的メソッドではインスタンスを作らず呼び出すから使えない)
    static showInfo(){ // クラスから直接呼び出す静的メソッドにしたい場合staticをつける
      console.log('Post class version 1.0');
    }
  }

  const posts = [ 
    new Post('JavaScriptの勉強中'),
    new Post('JavaScript!!'),
  ];

  Post.showInfo(); //クラス名.メソッド名で実行できる

クラス 継承

  class Post{ 
    constructor(text){
      this.text = text; 
      this.likeCount = 0;
    }

    show(){ 
      console.log(`${this.text} - ${this.likeCount}likes`);
    }

    like(){
      this.likeCount++;
      this.show(); 
    }    
  }
  class SponsiredPost extends Post{ 
    constructor(text, sponsor){
      super(text);
      // 子クラスのcounstructorでthisを使うにはsuper()とする必要がある
      this.sponsor = sponsor;
    }

    show(){ 
      super.show(); //super.メソッド名とすると親クラスのメソッドが呼ばれる
      console.log(`...sponsored by${this.sponsor}`);
    }

  }

  const posts = [ 
    new Post('JavaScriptの勉強中'),
    new Post('JavaScript!!'),
    new SponsiredPost('プログラミング', 'dotinstall'),
  ];

  
  posts[2].show();
  posts[2].like();