はじめに
JavaScriptにおける連想配列（オブジェクト）は、キーと値のペアを使用して情報を格納します。
この柔軟なデータ構造を使いこなすことで、プログラムの可能性が広がります。
本記事では、連想配列に要素を追加、更新、削除するさまざまな方法を掘り下げて解説します。
各メソッドの使い方から、実践的なテクニックまで、幅広くカバーします。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
要素の追加
連想配列に新しいキーと値のペアを追加するのは非常に簡単です。
ドット記法またはブラケット記法を使用して、新しいプロパティを定義するだけです。
ソースコード例
|
1 2 3 4 5 |
let user = { name: 'Taro' }; user.age = 30; // ドット記法で追加 user['email'] = 'taro@example.com'; // ブラケット記法で追加 console.log(user); |
出力結果
{name: 'Taro', age: 30, email: 'taro@example.com'}
要素の更新
既存のキーに新しい値を割り当てることで、連想配列の要素を更新できます。
これもドット記法やブラケット記法を用いて行います。
ソースコード例
|
1 2 3 |
let user = {name: 'Taro', age: 30, email: 'taro@example.com'}; user.age = 31; // 既存の値を更新 console.log(user); |
出力結果
{name: 'Taro', age: 31, email: 'taro@example.com'}
要素の削除
連想配列から要素を削除するには、delete演算子を使用します。
これにより、指定したキーとそれに関連付けられた値がオブジェクトから完全に削除されます。
ソースコード例
|
1 2 3 |
let user = {name: 'Taro', age: 31, email: 'taro@example.com'}; delete user.email; // キー'email'とその値を削除 console.log(user); |
出力結果
{name: 'Taro', age: 31}
deleteを使えば、不要になった情報をきれいに取り除けるね。動的なキーを使用した要素の操作
場合によっては、キー名を動的に指定して連想配列を操作する必要があります。
これにはブラケット記法が便利です。
ソースコード例
|
1 2 3 4 |
let user = {name: 'Taro', age: 31}; let key = 'status'; user[key] = 'active'; // 動的なキーを使用して新しい要素を追加 console.log(user); |
出力結果
{name: 'Taro', age: 31, status: 'active'}
連想配列のメソッドを使った高度な操作
JavaScriptではObjectクラスのメソッドを使用して、連想配列に対するさらに高度な操作を行うことができます。
たとえばObject.assign()を使用してオブジェクトを合成したり、Object.keys()でキーの一覧を取得することが可能です。
オブジェクトの合成
ソースコード例
|
1 2 3 4 |
let user = {name: 'Taro', age: 31, status: 'active'}; let userDetails = { username: 'taroYamada', password: 'secret' }; Object.assign(user, userDetails); console.log(user); |
出力結果
{name: 'Taro', age: 31, status: 'active', username: 'taroYamada', password: 'secret'}
Object.assign()を使えば、複数のオブジェクトを簡単に合成できるんだね。-
-
連想配列をもっと知りたい方はコチラ【JavaScript】オブジェクト（連想配列）の初期化、検索、宣言、ループなど徹底解説！
はじめに JavaScriptにおける連想配列について知りたいですか？それなら、あなたは正しい場所に来ました。 この記事では、JavaScriptの連想配列の基本から、より高度なテクニックまで、一緒に ...
続きを見る
まとめ
JavaScriptでの連想配列の操作は、プログラミングの基礎として非常に重要です。この記事を通じて、要素の追加、更新、削除から、より高度なオブジェクト操作まで、連想配列を効果的に扱う方法を網羅的に学びました。
これらのテクニックを駆使することで、データ構造の操作がより柔軟かつ効率的になり、JavaScriptでの開発がより快適になることでしょう。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
