t0mmy

2020年12月30日に参加

学習履歴詳細

React 基礎

やったこと

Udemy : モダンJavaScriptの基礎から始める挫折しないためのReact入門

学んだこと

Javascript スプレッド構文

const ary1 = [1,2]
console.log(...ary1) # 1 2

配列を展開することができる。

使い道は思いつかないが、任意の変数をバラこともできる。

const ary1 = [1,2,3,4]
const [num1,num2,...ary3] = ary1

console.log(num1) # 1
console.log(ary3) # [ 3, 4 ]

配列を展開は、shallow copy。

const ary1 = [1,2,3,4]
const cp_ary1 = [...ary1]
console.log(ary1)       # [ 1, 2, 3, 4 ]
console.log(cp_ary1)  # [ 1, 2, 3, 4 ]

cp_ary1[0] = 100
console.log(ary1)       # [ 1, 2, 3, 4 ]
console.log(cp_ary1)  # [ 100, 2, 3, 4 ]

配列のjoinにも応用できる。

const ary1 = [1,2,3,4]
const ary2 = [5,6,7,8]

const join_ary = [...ary1,...ary2]
console.log(join_ary)

JSのmap関数

中間処理も終端処理のどちらも書けることに違和感。

慣れるしかないか。

const ary1 = [1,2,3,4,5]

ary1.map((num) => console.log(num))   # 終端処理

const ary = ary1.map((num) => num * 10)  # 中間処理

console.log(ary) # [ 10, 20, 30, 40, 50 ]

map 関数 indexも扱うことができる。

const ary1 = [1,2,3,4,5]

ary1.map((num,index) => console.log(`i: ${index}, number : ${num}`))
node map_filter.js
i: 0, number : 1
i: 1, number : 2
i: 2, number : 3
i: 3, number : 4
i: 4, number : 5

JSの論理演算子

JS の ||
左辺が false の場合、 右辺を実行する。
JS の &&
左辺が trureの場合、 右辺を実行する。

bashの || と && みたい

React

2022年04月24日(日)

2.0時間