はじめに
コジマです。
JavaScriptのオブジェクトの配列に出くわして
結構苦労してしまいました。
やっとそこそこ扱えるようになったので
まとめておきます。
チートシートっぽく使っていただけたらと思います。
網羅性を追求したものではなく、実務において必要になる技術を抽出してまとめたもの
という内容であることをご容赦ください。
配列の初期化
普通の配列の定義と同じで大丈夫です。
// オブジェクト配列の初期化
// 普通に配列でOK
let users = []
/* こうしても初期化できる。
連想配列を直接代入してOK。
let users = [
{ id: 1, name: 'Kojima' },
{ id: 2, name: 'Tanaka' },
{ id: 3, name: 'Harada' }
]
*/
要素の追加
追加するにはpushを使います。
pushに追加したいオブジェクトを丸ごと入れます。
ここではusersにidとnameを持ったオブジェクトの配列を作ってみます。
// オブジェクト配列の追加
// pushを使う
// 引数にオブジェクト入れればいい
users.push({ id: 1, name: 'Kojima' })
users.push({ id: 2, name: 'Tanaka' })
users.push({ id: 3, name: 'Harada' })
要素の参照
console.log()を使用して中身を見てみます。
// オブジェクト配列の参照
// すべてのオブジェクトを参照
console.log(users)
/* 結果
(3) [{…}, {…}, {…}]
0: {id: 1, name: "Kojima"}
1: {id: 2, name: "Tanaka"}
2: {id: 3, name: "Harada"}
length: 3
*/
// 0番目のオブジェクトを参照
console.log(users[0])
/* 結果
{id: 1, name: "Kojima"}
*/
// 1番目のオブジェクトのnameを参照
console.log(users[1].name)
/* 結果
Tanaka
*/
地味に便利なのがJSON.stringify()関数
JSONを文字列変換して表示してくれます。
// 文字列で表示する
console.log(JSON.stringify(users))
/*
[{"id":1,"name":"Kojima"},{"id":2,"name":"Tanaka"},{"id":3,"name":"Harada"}]
*/
要素の更新
find関数を使用して更新したいオブジェクトを取得する。
そのあと書き換える。
という手順です。
KojimaをKojimanotechに書き換えてみます。
// 更新したい要素を取得する let user = users.find((elm) => elm.id === 1) // 書き換える user.name = 'Kojimanotech' // 確認する console.log(user.name) /* Kojimanotech */
要素の削除
findIndex関数を使用して削除したい要素のインデックスを取得。
そのあとsplice関数を使用して削除します。
spliceを使用して任意の位置に要素を追加することもできますが、ここでは触れません。
気になる人はリファレンスを見てください。
http://www.htmq.com/js/array_splice.shtml
ここではKojimanotechをいなかったことにしたいと思います。
// 削除したい要素のインデックスを取得
let user_index = users.findIndex((elm) => elm.id === 1)
// 削除する(user_index番目から1個の要素を削除する。)
users.splice(user_index, 1)
// 確認する
console.log(users)
/* 結果
(2) [{…}, {…}]
0: {id: 2, name: "Tanaka"}
1: {id: 3, name: "Harada"}
length: 2
*/
さいごに
オブジェクトの配列はすごく難しく感じるし癖もありますが、
実際めちゃめちゃ使います。
これは無意識に手が動くようにしておきたいところだと思いました。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
もっと学びたい人はこちら
JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！
JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム
気になった人はぜひ見てみてくださいね！
以上、コジマでした。
