javascriptメソッド、コールバック関数　備忘録

# pushメソッド
```js
const characters = ["にんじゃ", "ベイビー", "ひつじ"];

characters.push("とりずきん");  //配列の最後に要素を追加する

console.log(characters);
//出力結果
//[ 'にんじゃ', 'ベイビー', 'ひつじ' ]
//[ 'にんじゃ', 'ベイビー', 'ひつじ', 'とりずきん' ]
```

# spliceメソッド
```js
 const scores = [80,90,40,70];
 scores.splice(1,1,40,50);     //splice(変化が開始する位置,削除数、追加する要素,..)
 console.log(scores);
//出力結果
//[ 80,40,50,40,70]
```

# forEachメソッド
```js
const characters = ["にんじゃ", "ベイビー", "ひつじ", "ずきん"];

characters.forEach((character) =>{
  console.log(character);
});

//出力結果
//にんじゃ
//ベイビー
//ひつじ
//ずきん
```

# findメソッド
```js
const numbers = [1, 3, 5, 7, 9];

const foundNumber = numbers.find((number)=>{
  return number%3 == 0   //1つしか取り出せない 
});

console.log(foundNumber);

//出力結果
//3
```

# filterメソッド
```js
const numbers = [1, 2, 3, 4];

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

console.log(evenNumbers);  //条件に合うものは全て取り出せる 
//出力結果
//2
//4
```

# mapメソッド
配列内のすべての要素に処理を行い、戻り値から新しい配列を作成するメソッド
for文の代わりに使用する
```js
const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map((number)=>{
  return number*2;
});

console.log(doubledNumbers);
//出力結果
//[2,4,6,8]
```

# joinメソッド
```js
const d = [2020, 11, 20];
console.log(d.join(" "));

//出力結果
//2020 11 20
```
# splitメソッド
```js
const t = "20:08:22";
const[hour, minute, second] = t.split(":");

console.log(hour);
console.log(minute);
console.log(second);
//出力結果
//20
//08
//22
```

# Mathメソッド
```js
let avg = 7.333333;

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未満の乱数を生成

//出力結果
//7
//8
//7
//7.333
//0.548941.....など
```
# 日時に関するメソッド
```js
const d = new Date();

d.getFullYear();       //年
d.getMonth();          //0-11
d.getDate();           //1-31
d.getDay();            //0-6　  日曜:0
d.getHours();          //0-23 
d.getMinutes();        //0-59
d.getSeconds();        //0-59
d.getMilliseconds();   //0-999
d.getTime()            //UTC 1970/1/1 00:00:00からの経過ミリ秒

console.log(`${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`);
//出力結果
//2022/9/17など(今日の日付) 
```
応用例
```js
const d = new Date(2019,10);
d.setHours(10,20,30);
d.setDate(31);
d.setDate(d.getDate()+3);
console.log(d);
//出力結果
//Wed Dec 04 2019 10:20:30 GMT+0900 (日本標準時)
```
# forcusメソッド
選択した要素にフォーカスを当てる
```js
const text = document.querySelector("input");
text.focus();       //inputの入力欄を選択する
```
![スクリーンショット 2022-09-19 21.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672823/90713ffb-172b-40c6-a48f-cc7bf33ad594.png)


# alertメソッド
alertダイアログをブラウザに表示
```js
alert("hello");
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672823/184704b8-d6bd-7b9d-e517-958f39b2ef34.png" width=50%>

# confirmメソッド 
```js
const answer = confirm("削除しますか?");

if (answer) {
    console.log("削除しました");
}else{
    console.log("キャンセルしました");
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672823/2fc9e49d-b964-add5-38ee-7de13adb333b.png" width=50%>

# setIntervalメソッド
ミリ秒間隔で実行 
```js
let i =0;
function showTime(){
    console.log(new Date());
    i++;
    if(i>2){
      clearInterval(intervalid);
    }
} 
const intervalid = setInterval(showTime,1000);
```
# setTimeoutメソッド
処理が終わる毎に実行
```js
let i =0;
function showTime(){
    console.log(new Date());
    const timeoutId = setTimeout(showTime,1000);
    i++;
    if(i>2){
      clearTimeout(timeoutId);
    }
}
showTime();
```


## コールバック関数
ほかの関数に引数として渡される関数
### 基本的な記述例
```js
//コールバック関数
const printWanko = () => {
  console.log("にんじゃ");
};

const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();      //コールバック関数を呼び出すときは()を付ける
};

call(printWanko);  //コールバック関数を渡すときは()を付けない

//出力結果
//コールバック関数を呼び出します。
//にんじゃ
```

### コールバック関数を他の関数の引数に直接入れて定義することもできる
```js
const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();
};

//コールバック関数を引数に入れる
call(()=>{
  console.log("にんじゃ");
});
//出力結果
//コールバック関数を呼び出します。
//にんじゃ
```

### コールバック関数に引数を渡すこともできる
```js
const call = (callback) => {
  callback("にんじゃ", 14);
};

//ほかの関数の引数として記述されているコールバック関数にnameとageの引数を渡す
call((name, age) => {
  console.log(`${name}は${age}歳です。`);
});

//出力結果
//にんじゃは14歳です。
```