2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

〔JavaScript〕連想配列の使い方

Last updated at Posted at 2020-07-10

#連想配列とは
JavaSciptには連想配列というものがあります。

  • 連想配列では、1つの変数で複数の「キー」と「を保持できます。
  • キーは任意の文字列を使うことができます。
  • 各項目をプロパティと呼びます。(キーのことをプロパティとも呼びます)
  • 構文は、キーと値を波括弧{}でくくります。(項目が複数の場合はカンマで区切ります。)
  • 連想配列はオブジェクトリテラルまたはハッシュとも呼ばれます。
  • 配列のarrayオブジェクトを継承していません。(arrayオブジェクトのメソッドやプロパティは使えません)

#宣言の仕方

const a = {};
// または
const a = new Object();
// で連想配列を宣言する

とすることで宣言することができます。
サンプルを作ってみます。

const animals = {a1:"",a2:"",a3:""};

console.log(animals["a1"]); // 犬
console.log(animals["a2"]); // 猫
console.log(animals["a3"]); // 鳥

####その他の使い方を例で説明していきます。

#項目を追加する方法

const animals = {a1:"",a2:"",a3:""};
animals["a4"] = "";

console.log(animals);//{a1:"犬",a2:"猫",a3:"鳥",a4 :"熊"};

4つ目に追加することができました。
#項目を更新する

const animals = {a1:"",a2:"",a3:""};
animals["a2"] = "";

console.log(animals);//{a1:"犬",a2:"猿",a3:"鳥"};

既にあるキーの値を更新することができました。

#項目を削除する

const animals = {a1:"",a2:"",a3:""};
delete animals["a2"];

console.log(animals);//{a1:"犬",a3:"鳥"};

配列と同様deleteを使って削除できます。

#変更を禁止する
Object.freezeを使用すると連想配列の変更を禁止にできます。

const animals = Object.freeze({a1:"",a2:"",a3:""});

console.log(animals["a1"]); // 犬
console.log(animals["a2"]); // 猫
console.log(animals["a3"]); // 鳥

animals["a4"] = "";
console.log(animals["a4"]);// undefined
console.log(animals);//{a1:"犬",a2:"猫",a3:"鳥"}

Object.freezeを使用すると配列に追加させようとしてもできていないことがわかります。

#数を取得する
Object.keys(obj)を使うことでできます。


const animals = {a1:"",a2:"",a3:""};
console.log(Object.keys(animals).length); // 3

Object.keysメソッドとlengthプロパティを使用して連想配列の数を取得しています。(キーと値あわせて1つと数えます。)

#まとめ
少し難しいですがうまく使えると便利だと思うので少しでも役立ったら嬉しいです。

#参考リンク
[JavaScript 連想配列の仕組みと使い方のサンプル](https://itsakura.com/js-object-literal'JavaScript 連想配列の仕組みと使い方のサンプル')

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?