React,Vue.jsの前にJavaScriptを習得すべし！(テンプレート文字列、アロー関数、分割代入{}、デフォルト値=,スプレッド構文)

テンプレート文字列

今までの書き方より楽になりました。

const name = "ルフィ";
const age = 19;

const man = `俺は${name}だ！。今${age}で`;
console.log(man);
//俺はルフィだ！。今19歳だ

\nはJavaScriptの改行です。

const name = "ルフィ";
const age = 19;

const man = `俺は${name}だ！。今${age}歳で\n海賊王になる男だ`;
console.log(man);

//俺はルフィだ！。今19で
//海賊王になる男だ

アロー関数

アロー関数は=>を使います。

const arrow = (str) => {
  return str;
};
console.log("func2です");

//func2です 

const arrow = (num1, num2) => {
  return num1 + num2;
};
console.log(arrow(100, 200));

//300

function fn(number) {
  return number * 20;
}

console.log(fn(10));

const Arrow = (number) => {
  return number * 20;
};
console.log(Arrow(10));

//200
//200

returnの省略法

returnを省略して書くことができます。

//const arrow = (str) => {
//  return str;
//};
//console.log(arrow("func2です"));

const arrow = (str) => str;
console.log(arrow("func2です"));
//func2です

//const Arrow = (number) => {
//  return number * 20;
//};
//console.log(Arrow(10));

const Arrow = (number) => number * 20;
console.log(Arrow(10));
//200

const fn_Arrow_Object = (number) => ({
  result: number * 20,　//こう書く場合は()を使う
});

console.log(fn_Arrow_Object(10));

結果は

⚫︎補足
引数は１つなら()を省略しても大丈夫です。

分割代入{}

配列やオブジェクトから特定の要素を取り出す書き方です。
色々な書き方を見ていきます。

まずは基本的な書き方です。

index.js

const pirates = {
  name: "ルフィ",
  age: 19
};

const man = `俺は${pirates.name}です。年齢は${pirates.age}歳だ`;
console.log(man);

//俺はルフィです。年齢は19歳だ 

index.js

const pirates = ["ゾロ", 21];

const man = `俺は${pirates[0]}だ!年齢は${pirates[1]}だ`;
console.log(man);

//俺はゾロだ!年齢は21だ

const pirates = ["ゾロ", 21];

const man = `俺は${pirates[0]}だ!年齢は${pirates[1]}だ`;
console.log(man);

const [name, age] = pirates;
const man2 = `俺は${name}だ！年齢は${age}だ`;
console.log(man);

//俺はゾロだ!年齢は21だ
//俺はゾロだ!年齢は21だ

const [fire, , grass] = ["炎タイプ", "水タイプ", "草タイプ"];
console.log(fire);
console.log(grass);
//"炎タイプ"
//"草タイプ"

const { water, fire } = {
  fire: "リザードン",
  grass: "フシギバナ",
  water: "カメックス",
};
console.log(fire);
console.log(water);
//リザードン
//カメックス

基本的な形でした。この後は関数に関する分割代入です。

const array = ["UK", "England", "London"];
const objAddress = { state: "UK", nation: "England", city: "London" };

const fnArray = ([state, nation, city]) => {
  console.log("---配列---");
  console.log(`country: ${state}`);
  console.log(`state: ${nation}`);
  console.log(`city: ${city}`);
};

//---配列---
//country: UK
//state: England
//city: London

const array = ["UK", "England", "London"];
const objAdd = { state: "UK", nation: "England", city: "London" };

const fnObj = ({ state, nation, city }) => {
  console.log("---オブジェクト---");
  console.log(`state: ${state}`);
  console.log(`nation: ${nation}`);
  console.log(`city: ${city}`);
};

fnObj(objAdd);
//---オブジェクト---
//state: UK
//nation: England
//city: London

デフォルト値

const sayHello = (name = "悟空") => console.log(`オッス!オラは${name}だ`);
sayHello();
//オッス!オラは悟空だ 

スプレッド構文

...を使う構文です。
まずは配列で展開していきます。この構文は配列を順番に処理していきます。
手で色々動かしていってみてください。

const arr1 = [10, 20];
console.log(arr1);
console.log(...arr1);

//[10, 20]
//10
//20

const arr1 = [10, 20];
const sum = (score1, score2) => console.log(score1 + score2);
sum(arr1[0], arr1[1]);
sum(...arr1);

//30

配列のコピーと結合です。

const array4 = [100, 300];
const array5 = [500, 800];

const array6 = [...array4];
console.log(array6);

const array7 = [...array4, ...array5];
console.log(array7);

//[100, 300]
//[100, 300, 500, 800]

配列とコピーをします。

const array4 = [100, 300];
const array5 = [500, 800];

const array8 = array4;
array8[0] = 100;
console.log(array8);

// [100, 300]

//配列コピー
const array4 = [100, 300];
const array5 = [500, 800];

const array6 = [...array4];
//array6[0] = 100;
console.log(array6);
console.log(array4);
// [100, 300]
// [100, 300]

もう少し使ってみましょう。

main.js

const nums = [300, 100, 400, 1000, 500, 150, 200, 600];

const result = Math.max(...nums); //max最高値を出力 minにすると最低値
console.log(result);
//1000

main.js

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1];

console.log(newArr);

main.js

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1];
let newArr1 = arr1;
newArr.push(4);

console.log(newArr);

main.js

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr1 = arr1;
let newArr = [...arr1, 10, ...arr2];
console.log(newArr);

//(7) [1, 2, 3, 10, 4, 5, 6]

main.js

const obj = {
  name: "Tom",
  age: 22,
};
const newObj = { ...obj };
newObj.name = "John";

console.log(newObj, obj);

main.js

const resultA = (...argA) => console.log(argA);
resultA(10, 50);

const resultB = (n, ...argB) => console.log(argB);
resultB(10, 30, 40);

実際に動かしてみてください。

資料