Javascript TIPS No.16 配列の中身を全て取り出す

Javascript TIPS
  • 配列にした変数の中身を全部取り出す方法を探していたら、id:amachang さんの所で「正しい走査のしかた」を発見！

【JavaScript の配列と連想配列の違い - IT戦記】

  • ということで自分でも作ってみました

文法

for (var i = 0; i < 配列名.length; i ++) {
  配列名[i];
}

サンプルコード

<html lang="ja-JP">
<head><title>配列の中身をすべて取り出す</title>
<script type="text/javascript">

var myName = new Array(5);

myName[0] = "taro";
myName[1] = "ziro";
myName[2] = "saburo";
myName[3] = "hanako";
myName[4] = "yakkun";
myName[5] = "bobby";

function Output(){
for (var i = 0; i < myName.length; i ++) {
document.getElementById('outputarea').value = document.getElementById('outputarea').value + myName[i] + "\n";
}
}

</script>
</head> 
<body> 
<p><input type="button" value="配列の中身を全て出力" onclick="Output()"></p>
<p><textarea id="outputarea" style="width:300px; height:200px;"></textarea></p>
</body> 
</html>

解説

  • 配列の数をlengthで取得し、for分で繰り返すプログラムです
処理1
  • 配列を作り、それぞれにデータを格納する
var myName = new Array(5);

myName[0] = "taro";
myName[1] = "ziro";
myName[2] = "saburo";
myName[3] = "hanako";
myName[4] = "yakkun";
myName[5] = "bobby";
処理2
  • 変数名.lengthで配列数を取得し、for分で配列数だけループさせる
  • 取り出した配列をテキストエリアに改行付きで追加していく
for (var i = 0; i < myName.length; i ++) {
document.getElementById('outputarea').value = document.getElementById('outputarea').value + myName[i] + "\n";
}

Javascript TIPS 一覧へ戻る