【JavaScript】連想配列（オブジェクト）の初期化と宣言とアクセス方法を徹底解説！

はじめに

JavaScriptにおける連想配列（オブジェクト）は、キーと値のペアを使用して情報を格納する基本的なデータ構造です。

この記事では、連想配列へのアクセス方法を多角的に解説し、それぞれのメソッドの引数や戻り値、使用する際のポイントを深掘りしていきます。

初期化から様々なアクセス方法、さらにはオブジェクト操作の高度なテクニックまで、解説してきますので、ぜひ最後までご覧ください！

サルモリ

連想配列の扱い方をマスターすると、JavaScriptの可能性がぐんと広がるよ！

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

連想配列の初期化と宣言

連想配列の初期化は、リテラル構文またはObjectコンストラクタを使用して行います。リテラル構文は最も一般的で直感的な方法です。

ソースコード例

let book = {
    title: 'JavaScriptの基礎',
    author: '山田太郎',
    pages: 300
};

console.log(book);

let book = {

title: 'JavaScriptの基礎',

author: '山田太郎',

pages: 300

};

console.log(book);

 出力結果
{title: 'JavaScriptの基礎', author: '山田太郎', pages: 300}

サルモリ

オブジェクトリテラルを使うと、簡単に連想配列を作成できるね。

ドット記法とブラケット記法

オブジェクトのプロパティにアクセスする基本的な方法には、ドット記法とブラケット記法があります。

ソースコード例

let book = {
    title: 'JavaScriptの基礎',
    author: '山田太郎',
    pages: 300
};
console.log(book.title); // ドット記法
console.log(book['author']); // ブラケット記法

let book = {

title: 'JavaScriptの基礎',

author: '山田太郎',

pages: 300

};

console.log(book.title); // ドット記法

console.log(book['author']); // ブラケット記法

 出力結果
JavaScriptの基礎
山田太郎

サルモリ

ドット記法とブラケット記法を使い分けることで、柔軟にプロパティにアクセスできるね。

プロパティの動的アクセス

プロパティ名が動的に決定される場合、ブラケット記法を使用してアクセスします。

ソースコード例

let book = {
    title: 'JavaScriptの基礎',
    author: '山田太郎',
    pages: 300
};
let property = 'pages';
console.log(book[property]); // 300

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`ループによる列挙

ソースコード例

let book = {
    title: 'JavaScriptの基礎',
    author: '山田太郎',
    pages: 300
};
for (let key in book) {
    console.log(`${key}: ${book[key]}`);
}

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クラスには、オブジェクトのキー、値、またはキーと値のペアを配列として取得する便利なメソッドが用意されています。

ソースコード例

let book = {
    title: 'JavaScriptの基礎',
    author: '山田太郎',
    pages: 300
};
console.log(Object.keys(book)); // キーの配列を取得
console.log(Object.values(book)); // 値の配列を取得
console.log(Object.entries(book)); // キーと値のペアの配列を取得

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()メソッドを用いてオブジェクト自身が指定されたプロパティを持っているかどうかをチェックすることもできます。

ソースコード例

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

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

サルモリ

「in」演算子とhasOwnProperty()メソッドを使い分けることで、プロパティの存在を正確にチェックできるよ。

オブジェクトのディープコピー

オブジェクトのシャローコピーでは、ネストされたオブジェクトは参照としてコピーされます。オブジェクトのディープコピーを作成するには、JSON.stringify()とJSON.parse()の組み合わせを使用する方法があります。

ソースコード例

let book = {
    title: 'JavaScriptの基礎',
    author: '山田太郎',
    pages: 300
};
let deepCopyBook = JSON.parse(JSON.stringify(book));

console.log(deepCopyBook);

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でのプログラミングが可能になります。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【JavaScript】連想配列（オブジェクト）の初期化と宣言とアクセス方法を徹底解説！

はじめに

連想配列の初期化と宣言

ドット記法とブラケット記法

プロパティの動的アクセス

オブジェクトのプロパティの列挙

for...inループによる列挙

Object.keys()、Object.values()、Object.entries()によるプロパティの取得

プロパティの存在チェック

オブジェクトのディープコピー

連想配列をもっと知りたい方はコチラ【JavaScript】オブジェクト（連想配列）の初期化、検索、宣言、ループなど徹底解説！

まとめ

Ads Blocker Detected!!!

`for...in`ループによる列挙

`Object.keys()`、`Object.values()`、`Object.entries()`によるプロパティの取得