React開発で知っておくと開発が楽になる書き方 まとめ

スプレット演算子

新しいオブジェクトや配列を複製するときや、更新する時に便利

## 更新
const params = {
  complete_date: { start: 'aa', end: 'bb'},
  due_date: { start: 'aa', end: 'bb'}
}

const newParams = {...params, complete_date: { start: 'cc', end: 'dd' }}

console.log(newParams)

• 一括更新をしたい場合

キーが同じであれば一括更新可能

const obj = {id: 1, name: "aa", data: "data1"}

const obj2 = {id: 1, name: "aa22", data: "data222"}

const newObj = { ...obj, ...obj2 }

console.log(newObj)

=> {
  data: "data222",
  id: 1,
  name: "aa22"
}


### ...がないと
const newObj = { ...obj, obj2 }

=> {
  data: "data1",
  id: 1,
  name: "aa",
  obj2: [object Object] {
    data: "data222",
    id: 1,
    name: "aa22"
  }
}

• 配列のデータの中の要素を更新する場合

const obj2 = {id: 2, name: "aa22", data: "data222"}

const arrs = [
  {id: 1, name: "aa", data: "data1"},
  {id: 2, name: "bb", data: "data2"},
]


const newAer = arrs.map((item) => {
  if (item.id === obj2.id) {
    return { ...item, ...obj2 }
  } else {
    return item
  }
})


console.log(newAer)

オブジェクトの更新 キー利用

キーを利用した方がコードを簡潔にかける時があった

• キーを利用しない方法

const params = {
  complete_date: { start: 'aa', end: 'bb'},
  due_date: { start: 'aa', end: 'bb'}
}

params.complete_date.start = 'cc'
params.complete_date.end = 'dd'
console.log(params)

• キーを利用する方法

const params = {
  complete_date: { start: 'aa', end: 'bb'},
  due_date: { start: 'aa', end: 'bb'}
}

params['complete_date'] = { start: 'cc', end: 'dd'}
console.log(params)