React JSで押さえておくところ[No.1]
モダンJavaScript
スプレッド構文
map関数
filter関数
論理演算子
モダンJavaScript
ES6=ES2015以降のこと
ECMAScriptという規格があり年に1回更新される
以下詳細
モジュールバンドラー
JSファイルを本番用に一つにまとめたもの
webpackなど
トランスパイラ
古い記法のJavaScriptに変換してくれるもの
Babelなど
テンプレート文字列
`文字列${変数}文字列`;
アロー関数
引数が1つだと()が、1行の時は{}とreturnを省略できる
const func = str => console.log(str);
ちゃんと書くと下になる
const func = (str) =>{
return console.log(str);
}
メモinnerHTMLの使い方
分割代入
オブジェクトや配列の中身を取り出して変数のようにする
//オブジェクトの場合
const myProfile ={name: 'fukada', age: 29,};
const {name, age} = myProfile;
const talk = `私の名前は${name}、${age}歳よろしくね`;
//配列の場合
const score = [50, 30];
const [lang, math] = score;
const total = `あなたの点数は国語が${lang}点、算数が${math}点です。`
スプレッド構文
配列を一気に扱うもの…配列名と書く
//まとめて展開
const ary1 = [2, 55, 89, 93];
console.log(...ary1);// 2 55 89 93
console.log(ary1);// [2, 55, 89, 93]
//まとめて分割代入
const ary2 = [1, 2, 3, 4, 5];
const[ary3, ary4, ...aryEtc] = ary2;
console.log(ary3);// 1
console.log(ary4);// 2
console.log(aryEtc);// [3, 4, 5]
//配列のコピー
const ary5 = [9, 8, 7];
const aryCp = [...ary5];
console.log(aryCp);// [9, 8, 7]参照が別物になっている
aryCp[0] = 100
console.log(aryCp);// [100, 8, 7]
console.log(ary5);// [9, 8, 7]
//配列の結合
const ary6 = [99, 88, 77];
const ary7 = [66, 55, 44];
const ary8 = [...ary6, ...ary7];
console.log(ary8);// [99, 88, 77, 66, 55, 44];
map関数
配列の各要素に処理を加える
第二引数にインデックス番号が入る
const nameArr = ['佐藤', '田中', '山田'];
const nameArr2 = nameArr.map( (name, index) => {
return `出席番号${index + 1}、${name}さん`;
})
console.log(nameArr2);// ["出席番号1、佐藤さん", "出席番号2、田中さん", "出席番号3、山田さん"]
filter関数
配列を絞り込む
const numAry = [1, 2, 3, 4, 5, 6];
//偶数のみに絞り込み
const newNumber = numAry.filter((num) =>{
return num % 2 === 0;
});
console.log(newNumber);//[2, 4, 6]
三項演算子
if文を1行で書くことができる
let num1 = 100;
let num2 = 200;
const judge = (x, y) =>{
return num1 + num2 >= 100 ? '100以上です。' : '100より小さいです。';
}
console.log(judge(num1, num2));// 100以上です。
論理演算子
|| 左側がtrueなら左側の値を、
左側がfalseなら右側の値を返す
let x = 100;
const fee = x || '値を入力してください';
console.log(fee);// 100
let x2 = null;
const fee1 = x2 || '値を入力してください';
console.log(fee1); //値を入力してください
&& 両方trueなら右側を
左がfalseなら左側を返す
let x = 100;
const fee = x && "値が設定されました";
console.log(fee);// 値が設定されました
let x2 = null;
const fee1 = x2 && "値が設定されました";
console.log(fee1); //null
この記事が気に入ったらサポートをしてみませんか?