配列

2024年01月16日(火) 09時36分更新 icon 項目のみ表示/展開表示の切り替え

配列の作成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次元配列の要素を表示します。 
<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>