山本ワールド
配列
2024年01月16日(火) 09時36分更新
項目のみ表示/展開表示の切り替え

配列の作成1(初期値有)
var 配列名=[ 初期値1,初期値2, ...];
表示ボタンをクリックすると配列の各要素を表示します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id1"></span>
<script type="text/javascript">
function test1(){
var a=[ "green","yelloe","red" ];
var o=document.getElementById('id1');
var t="";
for(var n=0;n<a.length;n++)
t=t+a[n]+" ";
o.innerText=t;
}
</script>
<form name="test1Form">
<input type="button" value="表示" onclick="test1()" />
</form>
</body>
</html>
配列の作成2(初期値無し)
var 配列名=new Arrray(要素数);
表示ボタンをクリックすると配列の各要素を表示します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id2"></span>
<script type="text/javascript">
function test2(){
var a=new Array(5);
var o=document.getElementById('id2');
var t="";
var n;
for(n=0;n<a.length;n++)
a[n]=n;
for(n=0;n<a.length;n++)
t=t+a[n]+" ";
o.innerText=t;
}
</script>
<form name="test2Form">
<input type="button" value="表示" onclick="test2()" />
</form>
</body>
</html>
多次元配列の作成1(初期値有)
多次元配列を作成するには配列の要素に配列を代入します。
表示ボタンをクリックすると2次元配列の要素を表示します。
表示ボタンをクリックすると2次元配列の要素を表示します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id3"></span>
<script type="text/javascript">
function test3(){
var a=[ [ 7,8,9 ],
[ 4,5,6 ],
[ 1,2,3 ]];
var o=document.getElementById('id3');
var t="";
var n,i;
for(n=0;n<a[0].length;n++){
for(i=0;i<a[n].length;i++)
t=t+a[n][i]+" ";
t=t+"<br />";
}
o.innerHTML=t;
}
</script>
<form name="test3Form">
<input type="button" value="表示" onclick="test3()" />
</form>
</body>
</html>
配列の操作(push,unshift,splice,shift,pop,slice)
xstring.push(値); // 末尾に追加
string.unshift(値); // 先頭に追加
string.splice(位置,削除する要素数,追加する値, ...); // 削除して追加
string.shift(); // 先頭を削除
string.pop(); // 末尾を削除して値を返す
string.slice(始点); // 始点からの配列を返す(対象配列は変化しない。)
string.slice(始点,終点); // 始点から終点までの配列を返す。(対象配列は変化しない。)
string.reverse(); // 配列を逆向きにする。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function test4(){
var a=[ 1,2,3,4,5 ];
a.push(6); // 1,2,3,4,5→1,2,3,4,5,6 末尾6を追加
a.unshift(0); // 1,2,3,4,5,6→0,1,2,3,4,5,6 先頭に0を追加
a.splice(2,1,6,7); // 0,1,2,3,4,5,6→0,1,6,7,3,4,5,6 2文字目から1文字削除して2文字目の位置に6,7を追加
a.shift(); // 0,1,6,7,3,4,5,6→1,6,7,3,4,5,6 先頭を削除
a.pop(); // 1,6,7,3,4,5,6→1,6,7,3,4,5 末尾を削除して削除した値を返す
a.splice(1,2); // 1,6,7,3,4,5→1,3,4,5 1文字目から2文字削除
var b=a.slice(1); // 1,3,4,5→3,4,5 1文字目以降を返す
var c=a.slice(2,4); // 1,3,4,5→4,5 2文字目から4文字目を返す
a.reverse(); // 1,3,4,5→5,4,3,1
}
</script>
</body>
</html>
配列の操作(forEach)
配列の処理をforEachを使うとすっきり記述できます。
取得ボタンをクリックすると配列の値を表示します。
array.forEach( value,index,array){
処理内容
});
array:配列
index:現在のインデックス
value:現在の配列の値取得ボタンをクリックすると配列の値を表示します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id5"></span>
<script type="text/javascript">
function test5(){
var a=[ 1,2,3,4,5 ];
var t="";
a.forEach(function(value){
t=t+value+" ";
});
var o=document.getElementById('id5');
o.innerText=t;
}
</script>
<form name="test5Form">
<input type="button" value="表示" onclick="test5()" />
</form>
</body>
</html>
Copyright (C) 2012 山本ワールド All Rights Reserved.