JavaScript 連想配列の情報を呼び出す2つの方法

JavaScript

あーりーです。

マイペースでのんびりとJavaScriptの勉強をしています。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。

 

 

前回は「連想配列」について書きました。

今回も「連想配列」のはなしです。

 

 

そもそも「連想配列」って何?

という方は、前回の記事「よくわかる連想配列の基本」をご覧ください。

情報の呼び出し方

きょうのテーマは、「連想配列」の情報の呼び出し方です。

前回の呼び出し方とは別の、もう一つの呼び出し方があります。

 

 

と、その前に。

 

 

そもそも連想配列ってなに?

っていう話をサラッとおさらいしておきます。

連想配列とは

「連想配列」とは、変数の集まりです。

変数とは、情報を収納しておける箱のようなものです。

箱に収納した情報は、あとから自由に呼び出すことができます。

 

 

情報の呼び出し方は2つあります。

まず、前回の呼び出し方をおさらいしておきますね。

前回の呼び出し方

前回の記事「よくわかる連想配列の基本」では、情報を呼び出すときに、次のような形式で呼び出しました。

連想配列の名前.箱の名前

 

 

たとえば、こんな感じです。赤い部分をご覧ください。

<html>
<head>
</head>
<body>

<script>
var info={
  address:"ジャバ県スクリプト市",
  mail:"java@script",
  tel:"000-xxxx-0000",
  name:"ジャバ・スクリプト"
};
document.write(info.address);
</script>

</body>
</html>

 

ドットの左側は「連想配列の名前」です。

ここでは「info」という連想配列が指定されています。

 

 

ドットの右側は「箱の名前」です。

ひとつの「連想配列」の中には、たくさんの箱がありますから、どの箱なのかを指定しないといけません。

ここでは「address」という箱が指定されています。

 

 

つまり…

info」という連想配列の、「address」という箱に入っている情報が呼び出されることになります。

 

 

その情報とは「ジャバ県スクリプト市」です。

だからブラウザには「ジャバ県スクリプト市」と表示されます。

以上が、前回の呼び出し方です。

箱の名前=キー

ちなみに、「箱の名前」のことを、正式には「キー」といいます。

ぼくみは初心者なので「キー」といわれてもピンと来ません(汗)

とりあえずここでは、わかりやすいように「箱の名前」と呼ぶことにしますね。

 

 

では…

いよいよ今回の本題です。

今おさらいした呼び出し方とは別に、もう一つの呼び出し方(スクリプトの書き方)があります。

もう一つの呼び出し方

それはズバリ、この形式です。

連想配列の名前["箱の名前"]

 

 

これを実際のスクリプトに組み込むと、こんな感じになります。

赤い部分をご覧ください。

<html>
<head>
</head>
<body>

<script>
var info={
  address:"ジャバ県スクリプト市",
  mail:"java@script",
  tel:"000-xxxx-0000",
  name:"ジャバ・スクリプト"
};
document.write(info["name"]);
</script>

</body>
</html>

 

この例では、「info」という連想配列が指定されています。

そして、その連想配列の中の「name」という箱が指定されています。

 

 

こうして…

info」という連想配列の「name」という箱に収納された情報が呼び出されます。

その情報とは「ジャバ・スクリプト」という名前です。(架空の人名のつもりです…汗)

 

 

というわけで…

ブラウザには「ジャバ・スクリプト」と表示されます。

まとめ

前回の呼び出し方がこちら。

連想配列の名前.箱の名前

 

 

今回の呼び出し方がこちら。

連想配列の名前["箱の名前"]

 

 

形式に若干の違いはありますが、どちらも似たようなものです。

 

でも…

じつは一つ、大きな違いがあります。

大きな違い

今回の呼び出し方だからこそできる、あるワザ(?)があるんです。

 

 

それは…

「箱の名前」の部分を変数にできる

っていうワザです。

 

 

いきなりそう言われても、説明不足で意味がよくわかりませんよね。

それについては、次回の記事で詳しく見ていきたいと思います。

 

 

きょうはこれでおしまい~。

お付き合いありがとうございました。

 

 

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました