【JavaScript】配列情報

2020年7月15日 09:18

配列オブジェクト

Array     配列オブジェクト

配列を扱うオブジェクトです。配列数を指定しなくても自動的にサイズ調整される。

例

ary = new Array()
配列オブジェクトaryを生成する。

ary = new Array(19)
配列オブジェクトaryの要素を20個を生成する。

ary = new Array( 2 , 3 , 5 , 7 , 11 )
配列オブジェクトaryの各要素を2,3,5,7,11にする

ary = new Array("orange", "apple")
配列オブジェクトaryの各要素"orange"と"apple"にする

サンプル

<html>
<head>
<title>さんぷる</title>
<script language="JavaScript">
<!--
  function pDate()
  {
      d = new Array();
      d[0]= "日";
      d[1]= "月";
      d[2]= "火";
      d[3]= "水";
      d[4]= "木";
      d[5]= "金";
      d[6]= "土";
      
      alert("今日は"+d[(new Date()).getDay()] + "曜日です");
  }
//-->
</script>
</head>
<body onload="pDate()">
</body>
</html>

配列要素の結合/分割

concat      配列の結合
join        配列要素の結合
slice       配列要素を抜き出す
splice      配列要素の置き換え

配列要素を操作します。配列要素は[0]から始まります。

例

ary = myArray1.concat(myArray2)
配列myArray1とmyArray2を連結した内容を配列aryに格納する。

ary = myArray.join("/")
配列myArrayの要素を「/」で連結して文字列にしてaryに格納する。

ary = myArray1.slice(0,2)
配列myArray1の先頭2つの要素を取り出しaryに格納する。

myArray1.slice(0,"one")
配列myArray1の先頭要素の内容を「one」にする

サンプル

<html>
<head>
<title>サンプル</title>
</head>
<body>
<p>
連結/取り出し/置き換え
</p>
<script language="JavaScript">
<!--
   f = new Array("1998","Presented","By");
   k = new Array("Yasuhiro","Sekino","Michael","Jackson");
   tConcat = new Array();
   tConcat = f.concat(k);
   tJoin = k.join("/");
   tslice = k.slice(1,3);
   f.splice(0,1,"2020");
   
   document.write("配列連結:" + tConcat + "<br />");
   document.write("配列連結:" + tConcat + "<br />");
   document.write("要素取出:" + tslice  + "<br />");
   document.write("要素置換:" + f[0]);
// -->
</script>
</body>
</html>

配列要素の参照/設定

length      要素数の参照/設定

配列要素の数を求めるときに使用します。要素数の設定もできますが、要素数は使用状況に合わせて自動的に設定されますのでほとんど設定することはないです。

例

alert(arr.length)
配列要素をアラートダイアログに表示する。

ary.length = 99
配列aryの要素数を100にする。

サンプル

<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--
  function pLength()
  {
      d = new Array();
      d[0]= "日";
      d[1]= "月";
      d[2]= "火";
      d[3]= "水";
      d[4]= "木";
      d[5]= "金";
      d[6]= "土";
      
      alert("配列のサイズは" + d.length + "です");
  }
//-->
</script>
</head>
<body onload="pLength()">
</body>
</html>

配列要素の追加/削除

pop    末尾要素の取得
push   末尾に要素を追加する

popは配列の末尾データを取り出します。
取り出したデータは配列から削除されます。pushは配列の末尾に新規に内容を追加します。

例

myArray.pop()
配列myArrayの末尾のデータを取り出す

myArray.push("abc123");
配列myArrayの末尾に"abc123"という内容の配列要素を1つ追加する。

配列データを順次取り出す場合に使用します。
スタック式計算機などに使用する事もできます。

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

myArray = new Array("Windows","Linux","mac");

function tPush(data) {
   myArray.push(data);
   check();
}

function tPop() {
  myArray.pop();
  check();
}

function check() {
  str = "配列内容:\n";
  for( i = 0 ; i < myArray.length; i++ ) {
      str += myArray[i]+"\n";
      alert(str);
  }

}

//-->
</script>
</head>
<body>
<div align="center">
   <input type="button" value="追加" onclick="tPush('700')">
   <br />
   <input type="button" value="削除" onclick="tPop()">
</div>
</body>
</html>

配列要素の並び替え

reverse     要素順序を反転
sort        配列内容を並び替え

配列要素を並び替えます。reverseは要素を逆順にしsortは指定された順序で並び替えを行います。

例

myArray.reverse()
配列myArrayの要素の順番を反転させる。

myArray.sort()
配列myArrayの内容を文字コード順で並び替える

名前の並び替えや数値の並び替え時に使用します

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<p>並べ替え</p>
<script language="JavaScript">
<!--
   tData = new Array( "2020" , "Presented" , "By" , "Yasuhiro" , "Sekino" , "Michael" , "Jackson" );
   
   document.write("要素順序逆転 : " + tData.reverse() + "<br />");
   document.write("要素並べ替え : " + tData.sort());
   
//-->
</script>

</body>
</html>

配列要素の移動

shift          先頭要素を削除
unshift        先頭に要素を追加

配列要素を前方または後方に移動させます。unshiftの場合は指定された要素数を先頭に追加し、追加された数だけ要素全体を後方に移動させます。

例

myArray.shift()
配列myArrayの要素の先頭を削除し残り要素を前方に移動させる。

x1.unshft("abc123");
配列x1の内容を1つ後方にずらし先頭に要素(abc123)を追加する。

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<p>要素移動</p>
<script language="JavaScript">
<!--
   tData = new Array("2020" ,"Presented" , "By" , "Yasuhiro" , "Sekino" , "Michael" , "Jackson" );
   
   var mdata = tData;
   tData.shift();
   document.write("前方移動 :" + tData + "<br />");

   mdata.unshift("2020");
   document.write("後方移動 :" + mdata);
//-->
</script>

</body>
</html>

配列要素を文字列に変換

toString    文字列に変換

配列要素を文字列に変換します。
各要素はカンマで区切られて文字列として連結されます。

例

str = myArray.toString()
配列myArrayのすべての要素を連結して変数strに代入する。

配列を連結して文字列として処理したい場合に使います。逆の処理はStringオブジェクトのsplit()です。

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<p>文字列に変換</p>
<script language="JavaScript">
<!--
   tData = new Array( 123 , 456 , 789 );
   document.write("変換前 : ", tData[0]+"<br />");
   
   str = tData.toString();
   document.write("変換後 : " , str[0], str[1] , str[2] , str[3]);
//-->
</script>

</body>
</html>

この記事が気に入ったらサポートをしてみませんか？