モダンJavascriptまとめ

概要

2015年以降に追加、変更された便利機能のまとめ

let , const

constだと再代入を防ぐことができるが中身が配列とオブジェクトの場合、
中身の書き換え、追加ができる。

let name = "tanaka";
//再代入出来る　◯
name = "suzuki"

const name = "tanaka";
//再代入できない　×
name = "suzuki"

テンプレートリテラル

const name = 'shohei';
const age = 29

console.log(`私の名前は${name}です。年齢は${age}です。`);

アロー関数

//従来の書き方
//例１
function func(val) {
	return val;
}

//例２
const func = function(val) {
	return val;
}
------------------------------------------------------------
//アロー関数の書き方
const func = (val) => {
	return val;
}

//引数が一つの時,省略できる
const func = val => {
 return val;
}

//処理が単一式の場合一行でかける
const func = val => val;

//オブジェクトを単一で返す
const func = (num1 , num2) => ({
	hoge : num1,
	fuga : num2
})

分割代入

//オブジェクトの場合。
const myProfile = {
  name: 'shohei',
  age: 29,
};

// 従来の書き方;
const message = `私の名前は${myProfile.name}で年齢は${myProfile.age}です。`;
console.log(message);

//分割代入を使った書き方
const { name, age } = myProfile;
const message = `私の名前は${name}で年齢は${age}です。`;
console.log(message);

---------------------------------------------------------------------

//配列の場合。オブジェクトとは違い値に名前がついてないので順番に注意して分割代入する。
const myProfile = ['shohei', 29];

const [name, age] = myProfile;
const message = `私の名前は${name}で年齢は${age}です。`;
console.log(message);

デフォルト値

デフォルト値

オブジェクトの省略

const name = 'shohei';
const age = 29;

//オブジェクトのプロパティと設定する変数の値が同じ場合、値を省略で出る。
const myProfile = {
  name,
  age,
};

console.log(myProfile);

スプレッド構文

//配列の展開
const arr1 = [1,2]

const sumFunc = (num1 , num2) => console.log(num1  +  num2);
sumFunc(...arr1);

//まとめる
const arr2 = [1,2,3,4,5];
const [num1 ,num2 ,...arr3] = arr2;
console.log(num1);
console.log(num2);
console.log(arr3);

//配列の結合
const arr4 = [1,2,3];
const arr5 = [4,5,6];

const arr6 = [...arr4 , ...arr5];
console.log(arr6);

//コピー
const arr7 = [...arr4];
console.log(arr7);

map関数

//配列の中身を一つずつ取り出してreturnで返すと新しい配列を生成することができる
const nameArr = ['tanaka', 'suzuki', 'shohei'];

const newNameArr = nameArr.map((name) => {
  return name;
});
console.log(newNameArr);


//以下のようにindexを受け取ることで、配列のインデックス番号を使うこともできる。
const nameArr = ['tanaka', 'suzuki', 'shohei'];

nameArr.map((name, index) => {
  console.log(`名前は${name}です。番号は${index + 1}です。`);
});


//実戦に近い。画面にmapでデータを繰り返し出力し、中の条件分岐で画面への出し訳を行うパターンが多い。
const nameArr = ['tanaka', 'suzuki', 'shohei'];

const newNameArr = nameArr.map((name, index) => {
  if (name === 'shohei') {
    return name;
  } else {
    return `${name}さん`;
  }
});

console.log(newNameArr);

filter関数

//returnの後に条件式を書くことで条件に合うもののみを返す。
const numArr = [1, 2, 3, 4, 5, 6];
const newNumArr = numArr.filter((num) => {
  return num % 2 == 0;
});

console.log(newNumArr);

三項演算子

const checkSum = (num1, num2) => {
  return num1 + num2 > 100 ? '合計は１００を超えています。': '合計は１００以下です';
};

console.log(checkSum(80, 39));

論理演算子の意味

//　||　は左側がtruthyの時その時点で返却する
const num = 100;
const hoge = num || '金額未設定です。';
console.log(hoge);

//　＆＆　は左側がfalsyの時その時点で返却する
const num2 = 'ABC';
const fuga = num2 && '何か設定されました。';
console.log(fuga);