はじめに
JavaScriptにおける連想配列(オブジェクト)は、キーと値のペアを使用して情報を格納する基本的なデータ構造です。
この記事では、連想配列へのアクセス方法を多角的に解説し、それぞれのメソッドの引数や戻り値、使用する際のポイントを深掘りしていきます。
初期化から様々なアクセス方法、さらにはオブジェクト操作の高度なテクニックまで、解説してきますので、ぜひ最後までご覧ください!
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
連想配列の初期化と宣言
連想配列の初期化は、リテラル構文またはObject
コンストラクタを使用して行います。リテラル構文は最も一般的で直感的な方法です。
ソースコード例
1 2 3 4 5 6 7 |
let book = { title: 'JavaScriptの基礎', author: '山田太郎', pages: 300 }; console.log(book); |
出力結果
{title: 'JavaScriptの基礎', author: '山田太郎', pages: 300}
ドット記法とブラケット記法
オブジェクトのプロパティにアクセスする基本的な方法には、ドット記法とブラケット記法があります。
ソースコード例
1 2 3 4 5 6 7 |
let book = { title: 'JavaScriptの基礎', author: '山田太郎', pages: 300 }; console.log(book.title); // ドット記法 console.log(book['author']); // ブラケット記法 |
出力結果
JavaScriptの基礎
山田太郎
プロパティの動的アクセス
プロパティ名が動的に決定される場合、ブラケット記法を使用してアクセスします。
ソースコード例
1 2 3 4 5 6 7 |
let book = { title: 'JavaScriptの基礎', author: '山田太郎', pages: 300 }; let property = 'pages'; console.log(book[property]); // 300 |
出力結果
300
オブジェクトのプロパティの列挙
for...in
ループやObject.keys()
、Object.values()
、Object.entries()
メソッドを使用して、オブジェクトのプロパティを列挙することができます。
for...in
ループによる列挙
ソースコード例
1 2 3 4 5 6 7 8 |
let book = { title: 'JavaScriptの基礎', author: '山田太郎', pages: 300 }; for (let key in book) { console.log(`${key}: ${book[key]}`); } |
出力結果
title: JavaScriptの基礎
author: 山田太郎
pages: 300
for...in
ループを使うと、オブジェクトのキーと値を簡単に列挙できるね。Object.keys()
、Object.values()
、Object.entries()
によるプロパティの取得
JavaScriptのObject
クラスには、オブジェクトのキー、値、またはキーと値のペアを配列として取得する便利なメソッドが用意されています。
ソースコード例
1 2 3 4 5 6 7 8 |
let book = { title: 'JavaScriptの基礎', author: '山田太郎', pages: 300 }; console.log(Object.keys(book)); // キーの配列を取得 console.log(Object.values(book)); // 値の配列を取得 console.log(Object.entries(book)); // キーと値のペアの配列を取得 |
出力結果
['title', 'author', 'pages']
['JavaScriptの基礎', '山田太郎', 300]
[['title', 'JavaScriptの基礎'], ['author', '山田太郎'], ['pages', 300]]
Object.keys()
、Object.values()
、Object.entries()
を使うと、オブジェクトの構造を簡単に解析できるね。プロパティの存在チェック
オブジェクト内に特定のプロパティが存在するかどうかを確認するには、「in」演算子を使用します。また、hasOwnProperty()
メソッドを用いてオブジェクト自身が指定されたプロパティを持っているかどうかをチェックすることもできます。
ソースコード例
1 2 3 4 5 6 7 8 9 |
let book = { title: 'JavaScriptの基礎', author: '山田太郎', pages: 300 }; console.log('author' in book); // true console.log(book.hasOwnProperty('pages')); // true console.log('toString' in book); // true console.log(book.hasOwnProperty('toString')); // false |
出力結果
true
true
true
false
hasOwnProperty()
メソッドを使い分けることで、プロパティの存在を正確にチェックできるよ。オブジェクトのディープコピー
オブジェクトのシャローコピーでは、ネストされたオブジェクトは参照としてコピーされます。オブジェクトのディープコピーを作成するには、JSON.stringify()
とJSON.parse()
の組み合わせを使用する方法があります。
ソースコード例
1 2 3 4 5 6 7 8 |
let book = { title: 'JavaScriptの基礎', author: '山田太郎', pages: 300 }; let deepCopyBook = JSON.parse(JSON.stringify(book)); console.log(deepCopyBook); |
出力結果
{title: 'JavaScriptの基礎', author: '山田太郎', pages: 300}
-
連想配列をもっと知りたい方はコチラ【JavaScript】オブジェクト(連想配列)の初期化、検索、宣言、ループなど徹底解説!
はじめに JavaScriptにおける連想配列について知りたいですか?それなら、あなたは正しい場所に来ました。 この記事では、JavaScriptの連想配列の基本から、より高度なテクニックまで、一緒に ...
続きを見る
まとめ
JavaScriptでの連想配列(オブジェクト)の扱い方には多様な方法があります。
この記事では、連想配列の基本的な宣言から、プロパティへのアクセス方法、プロパティの存在チェック、オブジェクトのディープコピーなど、幅広いテクニックを解説しました。
これらの知識を駆使することで、より効率的かつ効果的にJavaScriptでのプログラミングが可能になります。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです!