連想配列のデータ表示

JavaScript連想配列のデータ表示サイトマップホーム



例1)配列のデータ表示

配列オブジェクトの forEach メソッドを使うと配列に含まれる要素を順に取り出し、
記述したコールバック関数を渡して処理することができます。

  • 配列名.forEach( コールバック関数(要素の値) ) { 処理 } で、
    配列の要素を取り出します。
  • 配列名.length で、配列の長さを求めます。
javaScriptのソースコード
<div id="out1"></div>
<script>
// 例1)
  iro1 = [ "赤", "黄",  "青"];
  edt = "" ;
  iro1.forEach(function(emt){ edt += emt ; } ) ;
  n = iro1.length ;
  out1.innerHTML = "値は(" + edt + ")、項目数は" + n ;
</script>

  • 実行結果

例2)連想配列のデータ表示

オブジェクトキーの名前を反復処理で取得します。

  • for (変数 in 連想配列) { 処理 }で、連想配列のキーを取得します。
  • Object.keys( 連想配列 ).forEach(function( 要素の値 ) { 処理 }でも可能です。
  • Object.keys( 連想配列 ).length で、キーの数を求めます。
javaScriptのソースコード
<div id="out2"></div>
<script>
// 例2)
  iro2 = { c1: "赤", c2: "黄", c3: "青" };
  iro2["c4"] = "白"; // 書き方1(同じ意味です)
  iro2.c5 = "黒";    // 書き方2(同じ意味です)
  edt = "キー:値<br>" ;
  for ( key in iro2) {
                      // この書き方も出来ます。
//Object.keys(iro2).forEach(function(key) {
    edt +=  key + ":" + iro2[key] + "<br>" ; 
  } ;
  n = Object.keys(iro2).length ;
  out2.innerHTML = edt +"キー数は"+ n ;
</script>

  • 実行結果

例3)配列内の連想配列のデータ表示

  • 配列名.forEach( コールバック関数( 要素の値, 要素のインデックス ) ) { 処理 } で、
    配列の要素を求めます。
  • Object.keys( 要素の値 ).forEach(function( 要素の値, 要素のインデックス ) { 処理 } で、
    連想配列の要素を求めます。
  • 必要に応じて、要素のインデックス値が取得出来ますので、行数、列数などの値に使えます。
javaScriptのソースコード
<div id="out3"></div>
<script>
// 例3)
  iro3 = [
    { c1: "赤", c2: "青" },
    { c1: "赤", c2: "青" },
    { c3: "白", c4: "黒" }
  ] ;
  edt = "(行数,列数)キー:値<br>" ;
  iro3.forEach(function(emt,i) { // コールバック変数i は、省略可能です。
                                 // コールバック変数 j は、省略可能です。
    Object.keys(emt).forEach(function(key,j) { 
      edt += "(" + i + "," + j + ")" + key + ":" + emt[key] + "<br>" ;
    });
  });
  out3.innerHTML = edt ;
</script>

  • 実行結果

JavaScript連想配列のデータ表示サイトマップホーム