はじめに
Rails + Reactでポートフォリオを作ろうと思いReactの勉強を始めたけどJavaScriptの知識があまりにもなかったので、最低限Reactを使うなら知っておいた方がいいJavaScriptの知識をまとめました！ その2です！
スプレッド構文
...arrayのようにドット３つの形で記述され、配列やオブジェクトの要素を展開する構文のこと。
スプレッド構文を使うと要素が順番に設定されていく
例
const array = [1, 2, 3, 4 ,5 ];
console.log(array[0],array[1], ...array); // => 1, 2, 3, 4, 5
コピーや結合もできる。
例
const array1 = [10, 20];
const array2 = [30, 40];
const array3 = [...array1];
console.log(array3); // => [10, 20]
const array4 = [...array1, ...array2];
console.log(array4) // => [10, 20, 30, 40]
また分割代入でも使うこともできるので便利！
例
const array1 = [1, 2, 3, 4 ,5 ];
const [num1, num2, ...num3] = array1;
console.log(num1); // => 1
console.log(num2); // => 2
console.log(num3); // => [3, 4, 5]
mapとfilter
・map
新しく配列を生成したり、
例
const nameArr = ["山田", "田中", "佐藤"];
const nameArr2 = nameArr.map((name) => {
return name;
})
console.log(nameArr2); // => ["山田", "田中", "佐藤"]
配列をループさせることができる。
例
const nameArr = ["山田", "田中", "佐藤"];
nameArr.map((name) => console.log(name));
console
山田
田中
佐藤
indexを持たせたい時は第2引数に持たせる
例
const nameArr = ["山田", "田中", "佐藤"];
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です`));
console
1番目は山田です
2番目は田中です
3番目は佐藤です
・filter
条件を設定して設定した条件に一致した新しい配列を生成する。
return内に条件式を記述する。
例
const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
return num % 2 === 0;
});
console.log(newNumArr); // => [2, 4]
三項演算子
if文をシンプルに書ける。
単純な処理ならいいが多用するのは可読性が悪くなるので注意。
通常
if (条件式) {
//true時の処理
} else {
//false時の処理
}
三項演算子
条件式 ? true時の処理 : falseの処理
例
const num = 1 > 0 ? "trueです" : "falseです";
console.log(num); // => trueです
retrun部分に使う例
例
const sum = (num1, num2) => {
return num1 + num2 > 100 ? "100以上です" : "100以下です";
}
console.log(sum(80, 10)); // => 100以下です
論理演算子 ｜｜ && の意味
| | は左側がfalseなら右側を返す
この場合valは値が入っていないnullでfalse判定なので右側が返っている。
例
const val = null;
const num = val || '(^○^)';
console.log(num); // => (^○^)
逆に&&の場合左側がtrueなら右側を返す。
例
const val = 1;
const num = val && '(^○^)';
console.log(num); // => (^○^)
以上です！
これでReactが少しは分かるはず！