テンプレート文字列
今までの書き方より楽になりました。
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);
実際に動かしてみてください。
資料