Reactを学ぶ前にJavaScript基礎を学ぶその2

はじめに

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が少しは分かるはず！

####参考にしたもの
モダンJavaSciptの基礎から始める挫折しないためのReact入門