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

pushメソッド

const characters = ["にんじゃ", "ベイビー", "ひつじ"];

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

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

spliceメソッド

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

forEachメソッド

const characters = ["にんじゃ", "ベイビー", "ひつじ", "ずきん"];

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

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

findメソッド

const numbers = [1, 3, 5, 7, 9];

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

console.log(foundNumber);

//出力結果
//3

filterメソッド

const numbers = [1, 2, 3, 4];

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

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

mapメソッド

配列内のすべての要素に処理を行い、戻り値から新しい配列を作成するメソッド
for文の代わりに使用する

const numbers = [1, 2, 3, 4];

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

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

joinメソッド

const d = [2020, 11, 20];
console.log(d.join(" "));

//出力結果
//2020 11 20

splitメソッド

const t = "20:08:22";
const[hour, minute, second] = t.split(":");

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

Mathメソッド

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.....など

日時に関するメソッド

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など(今日の日付) 

応用例

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メソッド

選択した要素にフォーカスを当てる

const text = document.querySelector("input");
text.focus();       //inputの入力欄を選択する

alertメソッド

alertダイアログをブラウザに表示

alert("hello");

confirmメソッド

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);

setTimeoutメソッド

処理が終わる毎に実行

let i =0;
function showTime(){
    console.log(new Date());
    const timeoutId = setTimeout(showTime,1000);
    i++;
    if(i>2){
      clearTimeout(timeoutId);
    }
}
showTime();

コールバック関数

ほかの関数に引数として渡される関数

基本的な記述例

//コールバック関数
const printWanko = () => {
  console.log("にんじゃ");
};

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

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

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

コールバック関数を他の関数の引数に直接入れて定義することもできる

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

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

コールバック関数に引数を渡すこともできる

const call = (callback) => {
  callback("にんじゃ", 14);
};

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

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