例1)配列のデータ表示配列オブジェクトの forEach メソッドを使うと配列に含まれる要素を順に取り出し、
javaScriptのソースコード
<div id="out1"></div>
<script>
// 例1)
iro1 = [ "赤", "黄", "青"];
edt = "" ;
iro1.forEach(function(emt){ edt += emt ; } ) ;
n = iro1.length ;
out1.innerHTML = "値は(" + edt + ")、項目数は" + n ;
</script>
例2)連想配列のデータ表示オブジェクトキーの名前を反復処理で取得します。
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)配列内の連想配列のデータ表示
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>
|