Reactでよく使うJavaScriptの書き方
テンプレート文字列
const firstName = "太朗";
const lastName = "田中";
//テンプレート文字列
const myName = "私の名前は${lastname} ${firstName}です。"
//昔はこんな感じで書いていた
const myName2 = "私の名前は" + lastName + firstName + "です。"; 引数にデフォルト値を設定する
引数がある関数を、引数なしで実行するとundefineがなるが、引数に初期値を設定しておくことができる。
const test = (value) => {
console.log(`私の名前は${value}です`);
};
test();
//私の名前はundefineです
const test2 = (value:"太朗") => {
console.log(`私の名前は${value}です`);
};
test();
//私の名前は太朗ですスプレッド構文と分割代入
配列をまとめて展開する場合や、配列をまとめて受け取る場合に使える。
const arr1 = [ 1, 2 ];
console.log( ...arr1 );
//結果 1と2がそれぞれ表示される
const arr2 = [ 1, 2, 3, 4];
const [ num1, num2, ...arr3 ] = arr2;
console.log( num1 );
//1
console.log( num2 );
//2
console.log( ...arr3 );
//[3,4]また配列自体をコピーしたり、配列を結合することもできる。
const arr4 = [ 8, 9 ];
const arr6 = [ 10, 11 ];
//arr1の配列をコピー
const arr5 = [ ...arr4 ];
// [ 8,9 ]
//配列を結合させる
const arr7 = [ ... arr4, ...arr6 ]
console.log(arr7);
//[8,9,10,11]分割代入については以下
配列のループ処理
配列をループする方法は複数あります。
const arr1 = [ 1, 2, 3, 4];
//for文
for(let i = 0; i < arr1.length; i++){
console.log( `これは${ arr1[i] }番目です` )
}
//map
arr1.map( num ) => {
console.log( `これは${ num }番目です` )
}
//foreach
arr1.foreach( num ) => {
console.log( `これは${ num }番目です` )
}for文は処理スピードが速い。mapは元の配列を残しつつ、新しい配列を作ることに適している。foreach文は返り値（return）を持たないが、mapは返り値を持つ。
