FullStackOpen Part1-b Javascript メモ

jsファイルは "node nameoffile.js"で実行可

変数定義

 const: 値を変更できない定数
 let: 通常の変数
varもあるが基本的にはこの二つを使う(スコープの概念があいまいなので)

配列

配列の場合はconstでも内容を変更できる
追加するときはpushを使う
メンバーにアクセスするときはforEachなど
例: const t = [0,1,2]
t.push(3)
t.forEach(value => {
console.log(value)
})

配列に新しいデータを追加して新規配列として扱うにはconcatを使用
例: const t = [1,2,3]
const t2 = t.concat(5)

Map関数 新しい配列を作成し、操作を加える
const m1 = t.map(value => value*2)
const m2 = t.map(value => '<li>' + value + '</li>') //よく使う

分割代入 …rest
const t = [1,2,3,4,5]
const [first, second, …rest] = t
console.log(first, second) // 1,2が出力
console.log(rest) // [3,4,5]が出力

オブジェクト

const object1 = {
 name: 'Masashi',
 age: 45,
 education: 'no'
}
など jsonみたいな形式
object1.nameやobject1['age']みたいにアクセス
あとでプロパティを追加することもできる
object1.address = 'Tokyo'
object1['phone number'] =12345667

関数

アロー関数をよく使う

定義
const sum = (p1, p2) =>{
 console.log(p1)
 console.log(p2)
 return p1+p2
}
使用
const result = sum(1,2)

mapの時に特に便利
const t =[1,2,3]
const tSquared = t.map(p => p*p)

ES6以前はfunctionで定義するしかなかったがアロー関数の登場により便利になった

function product(a,b){
 return a*b
}

検証するときはpropsをconsoleに出すとよい

thisについて
オブジェクトをthisで指定して呼び出すことができる

Warning: Each child in a list should have a unique "key" prop.
リスト中のアイテムを区別するためにkeyプロパティ

Class
JavascriptでもES6でクラスが導入されたが、ReactのHook機能を使うのが一般的