JavaScript 連想配列の基本操作まとめ！初期化/追加/削除

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScriptの連想配列とは

JavaScriptの配列とはArrayオブジェクトで扱われ、複数のデータを一つの変数にまとめたものです。
目的のデータをインデックス（位置番号）で呼び出すことができますが、もう一つの方法として添え字の指定により呼び出すことができます。

このようにキーを添え字により値を割り振り、また添え字により呼び出すことができる配列を連想配列と呼んでいます。

JavaScriptの連想配列の使い方

JavaScriptの連想配列の使い方について説明をします。

連想配列を宣言する

新しいArray オブジェクトを生成し連想配列を作成

新しいArray オブジェクトを生成し連想配列を作成します。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array();
console.log( arrTemp );

結果です。

new Array()に数字を指定すると、数分の空要素が作成されます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
console.log( arrTemp );

結果です。

タカヒロ

ここまでは通常の配列と同じですね。

連想配列に値を代入する

連想配列に値を代入していきましょう。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [{ name:'taro', age:40 }];
console.log( arrTemp );

結果です。

複数の連想配列をまとめて渡すことができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
console.log( arrTemp );

結果です。

new Arrayを省略して、[]で値を代入すると同じく連想配列として扱われます。

let arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
console.log( arrTemp );

結果です。

連想配列の初期化を行う

連想配列の初期化を行いましょう。

一旦連想配列に代入した値を最後に初期化しています。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
console.log( arrTemp );
//連想配列を初期化します。
arrTemp = [];
console.log( arrTemp );

結果です。

連想配列の要素を取得する

連想配列の要素を取得していきましょう。

複数レコードの場合

連想配列の要素を取得するには位置番号であるインデックス値を指定し、取得したい要素を添え字（キー）で指定する必要があります。

JavaScript の連想配列はゼロオリジンで、最初の要素は 0 の位置にあるので、0から数える必要があります。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
//0番目のnameキーを取得します。
console.log( arrTemp[0].name );

結果です。

単一レコードの場合

単一レコードの場合は以下のように添え字のみで取得ができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(1);
arrTemp =  { name:'taro', age:40 };
//nameキーを取得します。
console.log( arrTemp.name );

結果です。

map() やforEachで連想配列の値を取得する

map() やforEachで連想配列の値を取得する方法については以下の記事をご参照ください。

JavaScript map() の使い方！連想配列で説明！

連想配列の要素を追加する

連想配列を追加してみましょう。

インデックス値を指定し連想配列を追加する

インデックス値を指定し連想配列を追加していきます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
//配列の３番目に連想配列を追加します。
arrTemp[2] = { name:'jiro', age:32 };
console.log( arrTemp );

結果です。

Pushメソッドで連想配列を追加する

push()メソッドで配列を追加していきます。

配列の末尾に 1 つ以上の要素を追加することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
//配列の末尾に連想配列を追加します。
arrTemp.push({ name:'jiro', age:32 });
console.log( arrTemp );

結果です。

Unshiftメソッドで連想配列を追加する

Unshiftメソッドで連想配列を追加していきます。

配列の先頭に 1 つ以上の要素を追加することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
//配列の先頭に連想配列を追加します。
arrTemp.unshift({ name:'jiro', age:32 });
console.log( arrTemp );

結果です。

連想配列の要素を削除する

連想配列を削除してみましょう。

インデックス値を指定し連想配列を削除する

インデックス値を指定し、deleteメソッドにて連想配列を削除していきます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
//配列の2番目を削除します。
delete　arrTemp[1];
console.log( arrTemp );

結果です。

popメソッドで連想配列を削除する

popメソッドで連想配列を削除していきます。

配列の末尾に 1 つ以上の要素を削除することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
//配列の末尾を削除します。
arrTemp.pop();
console.log( arrTemp );

結果です。

Shiftメソッドで連想配列を削除する

push()メソッドで連想配列を削除していきます。

配列の先頭に 1 つ以上の要素を削除することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp =  [
{ name:'taro', age:40 },
{ name:'hanako', age:24 }
];
//配列の先頭を削除します。
arrTemp.shift();
console.log( arrTemp );

結果です。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。