JavaScript

[JavaScript]findメソッドを使ってオブジェクトの値を変更する

フィヨルドブートキャンプのプラクティスで、VueCLIを使ってメモアプリを作成しました。
【メモを編集する機能】の実装をするときに学んだJavaScriptのfindメソッドが便利だったので、方法をまとめておきます!

他にも方法はあると思いますが、ご了承ください🙏

findメソッドを使ってオブジェクトの値を変更する

今回は、このcolors の値を変更していきたいと思います。

 let colors = [
... { id: 1, color: 'red' },
... { id: 2, color: 'blue' },
... { id: 3, color: 'green' }
... ]

colors{ id: 3, color: 'green' }{ id: 3, color: 'white' } に変更していきます。
メモアプリの場合、idが変わってしまうと表示するメモの順番が変わってしまうので、idは同じになるようにしています。

const colorWhite = { id: 3, color: 'white' }

ではオブジェクトの値を変更します。
まずはfindメソッドを使って変更する要素を見つけ出します。

const changeColor = colors.find(color => color.id === colorWhite.id)

これでchangeColorに変更したい要素が入りました。
次はchangeColorにcolorWhiteの値を代入していきます。

changeColor.color = colorWhite.color

これでcolorsの要素を変更できました。
確認してみましょう。

> console.log(colors)
[
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'white' }
]

これでcolorsの要素を変更することができました。