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

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

マイペースでのんびりと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入門」にまとめてあります。よろしければご覧ください。

A8 JavaScript

おまけ

JavaScriptを一人で勉強していてわからないことがあれば、teratailで質問することをおすすめします。

プログラミングに特化したYahoo!知恵袋のようなサイトです。

超・初心者のぼくにも優しく教えてくれました。

とても感謝しています。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ

グロースファクター 毛髪再生