javascript メソッド関連

# 配列

`const array = [10,20,30]`

- 要素の追加
    - unshift():先頭に追加
    - push():末尾に追加
- 要素の削除(1つずつしか削除できない)
    - shift():先頭から削除
    - pop();末尾から削除
- 配列の操作
    - splice(変化が開始する位置,削除数)
    - splice(変化が開始する位置,削除数,追加する要素)
- 参照渡し
    - 配列とオブジェクトは参照渡しである。
    - スプレッド構文を使うと値渡しとなる。

# スプレッド構文

配列を展開してくれる。

```javascript
  const otherScores = [10, 11];
  const scores = [6, 7, 8, 9, ...otherScores];
  // console.log(scores);

  function sum(a, b) {
    console.log(a + b);
  }

  sum(...otherScores);
  // sum(10, 11);
と同じ意味
```

# 分割代入　レスト構文　値の交換

```javascript
//分割代入
  const [a, b, c, d] = scores;
//レスト構文
  const [a, b, ...others] = scores;
//値の交換
  let x = 10;
  let y = 20;
  [x, y] = [y, x];
```

# forEach

- 配列の要素数を気にする必要が無い
- **オブジェクトには使えない**
- **breakやcontinueは使えない**
- 3つの引数を与えられる。
    - 第一引数:配列データの値
    - 第二引数:配列のインデックス番号
    - 第三引数:現在処理している配列

```javascript
  const scores = [10, 20, 30, 40];
  scores.forEach((score, index) => {
    console.log(`Score ${index}: ${score}`);
  });
  //Score 0: 10...
  //Score 1: 20...
```

# map

 - 返り値:処理後の配列

```javascript
  const prices = [180, 190, 200];

  const updatedPrices = prices.map((price) => {
     return price + 20;
   });

  console.log(updatedPrices); //[200,210,220]
```

# filter

- 返り値:フィルター後の配列
- trueの値だけが残る

```javascript
  const numbers = [1, 4, 7, 8, 10];

  const evenNumbers = numbers.filter(number => {
     return number % 2 === 0;
   });

  console.log(evenNumbers); //[4,8,10]
```

# オブジェクト

- []ではなく{}を使う。
- 最後のカンマはあってもなくてもエラーにならない。
- 要素の削除にはdeleteを使う

```javascript
 
  // const point = {x: 100, y: 180};
  const point = {
    x: 100,
    y: 180,
  };
  point.x = 120;
  console.log(point.x); //120
  console.log(point.['y']); //180

  point.z = 90;
  delete point.y;
  console.log(point); //{x :120,z:90}
```

- スプレッド構文　分割代入　レスト構文も使用可
- 分割代入ではオブジェクトのキーと同じ定数名を使えば、そのキーの値が代入される。

```javascript
 
 const others = {
    r: 4,
    color: 'red',
  };

  const point = {
    x: 100, 
    y: 180,
    ...others,
  };

  const {x, r, ...others} = point;
  console.log(x); //100
  console.log(r); //4
  console.log(others); // {y:180,color:red}
```

# 文字列,配列の操作

- length:長さ取得
- substring(開始位置,終了位置):一部の文字列を取得
- join(区切り文字):配列を区切り文字でつないで文字列として返す
- split(区切り文字):文字列を区切り文字で分割して配列として返す

# 数値の操作

```javascript
let score = 7.33333; 
Math.floor(score) // 7 小数点切り捨て
Math.ceil(score) // 8 小数点切り上げ
Math.round(score) // 7 四捨五入
score.toFixed(3) // 7.333 小数点3桁まで表示
Math.random() // 0以上1未満のランダムな数値を生成
```

# 日時

- Dateクラスを使う
    - 引数を使う場合は、年と月は必須。

```javascript
const d = new Date();

d.getFullYear(); //2020
d.getMonth; //0-11 (Jan:0,Feb:1)
d.getDate(); // 1-31
d.getDay(); //0-6 (Sun:0,Mon:1)
d.getHours(); //0-23
d.getMinutes(); //0-59
d.getSeconds(); //0-59
d.getMilliseconds(); 0-999 1000ミリ秒=1秒

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

# タイマー機能

- setInterval(関数名,ミリ秒)
    - ミリ秒ごとに関数を実行する。
    - **関数を引数に設定するときは()は不要。**`setInterval(func)`
    - 返り値はインターバルを一意に識別するインターバルID
- clearInterval(インターバルID)
    - 処理を止める。
- setTimeout(関数,ミリ秒)
    - ミリ秒後に一回だけ実行する
    - 返り値は一意に識別するタイムアウトID


```javascript
let i = 0;

const id = setInterval(() => {
    const d = new Date();
    console.log(d);
    i++;
    if (i > 3) {
        clearInterval(id);
    }
}, 1000);
```

setIntervalとsetTimeoutの違い

- 前者はインターバルの時間を超える処理であってもインターバルの時間間隔で実行されるため処理が重なることがあり、システムに負荷がかかる場合がある
- 後者は処理が終わってからを起点に次の処理になるため、負荷がかからない。

# クラス

- **静的メソッド内でthisを使うことはできない**
    - クラス内で使われるthisはそのクラスから作られるインスタンスである。
    - 静的メソッドはインスタンスを作らずに呼び出せるためthisを使うことができない。
- 子クラスのconstructorでthisを使うにはsuper()を記述
- 親クラスのメソッドを使うにはsuperを頭につける(`super.関数名();`)