【JavaScript】オブジェクト(連想)配列の初期化・追加・参照・更新・削除

【JavaScript】オブジェクト(連想)配列の初期化・追加・参照・更新・削除

はじめに

コジマです。

JavaScriptのオブジェクトの配列に出くわして
結構苦労してしまいました。

やっとそこそこ扱えるようになったので
まとめておきます。

チートシートっぽく使っていただけたらと思います。
網羅性を追求したものではなく、実務において必要になる技術を抽出してまとめたもの
という内容であることをご容赦ください。

配列の初期化

普通の配列の定義と同じで大丈夫です。

要素の追加

追加するにはpushを使います。
pushに追加したいオブジェクトを丸ごと入れます。
ここではusersにidとnameを持ったオブジェクトの配列を作ってみます。

要素の参照

console.log()を使用して中身を見てみます。

地味に便利なのがJSON.stringify()関数
JSONを文字列変換して表示してくれます。

要素の更新

find関数を使用して更新したいオブジェクトを取得する。
そのあと書き換える。
という手順です。

KojimaをKojimanotechに書き換えてみます。

要素の削除

findIndex関数を使用して削除したい要素のインデックスを取得。
そのあとsplice関数を使用して削除します。

spliceを使用して任意の位置に要素を追加することもできますが、ここでは触れません。
気になる人はリファレンスを見てください。
http://www.htmq.com/js/array_splice.shtml

ここではKojimanotechをいなかったことにしたいと思います。

さいごに

オブジェクトの配列はすごく難しく感じるし癖もありますが、
実際めちゃめちゃ使います。

これは無意識に手が動くようにしておきたいところだと思いました。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


javascriptカテゴリの最新記事