JavaScript - 配列

□配列の宣言と生成 var 配列名 = new array(); var 配列名 = new array(要素数); var 配列名 = new array(値₀, 値₁, 値₂, ... 値_n-1); □配列要素の参照配列名[添字] □配列の要素数配列名.length

var a = new array(10); a[0] = 0; a[1] = 1; : a[9] = 45; a.length = 10　<--　配列 a の要素数

Top

■例題

プロンプトから入力した月の日数を出力するHTML "Days00.html"を、1次元配列を使用して作成してください。("Days10.html")


 <!-- Days10.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     //    月              1   2   3   4   5   6   7   8   9  10  11  12
     var days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
     //    添字            0   1   2   3   4   5   6   7   8   9  10  11
 
     var month = parseInt(prompt("月を指定してください。", 1));
     document.write(month + " 月は " + days[month - 1] + " 日です。");
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

10個の要素を持つ配列を宣言･作成し、その各要素に添え字と同じ値を設定し、表示するHTML"Array01.html"を作成・実行してください。


 <!-- Array01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var a = new Array(10);
     for (var i = 0; i < a.length; i++) {
         a[i] = i;
         document.write("a[" + i + "] = " + a[i]);
         document.write("<br/>");
     }
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

下記の実行結果を参考にして、配列を引数として、その配列を下記実行結果のように各要素の内容を文字列化する関数ファイル"ArrayUtil.js"を作成してください。関数名は、toString()とします。
このとき、配列を宣言するHTMLはHTML"Array02.html"とします。

□"ArrayUtil.js"


 /**
  * 配列要素を文字列化する。
  * @param a 配列。
  * @return カンマ区切りで要素をならべた文字列。
  */
 function toString(a) {
     var sb = "[";
     for (var i = 0; i < a.length; i++) {
         if (i != a.length -1) {
             sb += a[i] + ", ";
         } else {
             sb += a[i];
         }
     }
     sb += "]";
     return sb;
 }

□"Array02.html"


 <!-- Array02.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var a = new Array(10);
     for (var i = 0; i < a.length; i++) {
         a[i] = i;
     }
     document.write("a = " + toString(a));
     document.write("<br/>");
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■実習

Top

■配列のコピー

配列のコピーには､つぎの2つの意味があります。
- 浅いコピー ... 参照変数のコピー
- 深いコピー ... 配列オブジェクトそのもののコピー

Top

■浅いコピー

つぎのHTML "Array54.html"を作成して、実行結果を確認してください。


 <!-- Array54.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var a = new Array(2, 9, 6, 3);
     var b = a;                                         // コピー
     document.write("a = " + toString(a));
     document.write("<br/>");
     document.write("b = " + toString(b));
  
     a[0] = 10;
     b[0] = 20;
  
     document.write("<hr/>");
     document.write("a = " + toString(a));
     document.write("<br/>");
     document.write("b = " + toString(b));
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■深いコピー

つぎのHTML "Array55.html"を作成して、実行結果を確認してください。


 <!-- Array55.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var a = new Array(2, 9, 6, 3);
     var b = new Array(a.length);        
     for (var i = 0; i < a.length; i++) {    // コピー
         b[i] = a[i];
     }
 
     document.write("a = " + toString(a));
     document.write("<br/>");
     document.write("b = " + toString(b));
  
     a[0] = 10;
     b[0] = 20;
  
     document.write("<hr/>");
     document.write("a = " + toString(a));
     document.write("<br/>");
     document.write("b = " + toString(b));
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■実習

10 個の要素からなる配列 a に対し、つぎのことを行うHTML "Array31.html"を作成してください。

要素の正順に配列 b にコピーします。
要素の逆順に配列 c にコピーします。
要素をひとつずらして配列 d にコピーします。
a の要素を逆にします。このとき、作業用の変数をひとつ使用してもかまいません。
a の要素をひとつずらします。このとき、作業用の変数をひとつ使用してもかまいません。


 <!-- Array31.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var br = "<br/>";
     var hr = "<hr/>";
 
     var a = new Array(10);
     for (var i = 0; i < a.length; i++) {
         a[i] = i;
     }
 
     document.write("a[] = " + toString(a) + br);
     document.write(hr);
 
 // 要素の正順に配列bにコピーする。
     var b = new Array(a.length);        
     for (var i = 0; i < a.length; i++) {
 
         // コードを記述してください。
 
     }
 
 // 要素の逆順に配列cにコピーする。 
     var c = new Array(a.length);        
     for (var i = 0; i < a.length; i++) {
 
         // コードを記述してください。
 
     }
 
 // 要素をひとつずらして配列dにコピーする。 
     var d = new Array(a.length);        
     for (var i = 0; i < a.length; i++) {
 
         // コードを記述してください。
 
     }
 
 // 要素を逆にする。 
     var w;
     for (var i = 0; i < a.length / 2; i++) {
 
         // コードを記述してください。
 
     }
     document.write("要素を逆にする。 " + br);
     document.write("a[] = " + toString(a) + br);
 
 // 要素をひとつずらす。このとき、作業用の変数をひとつ使用してもよい。
     w = a[0];
     for (var i = 0; i < a.length - 1; i++) {
 
         // コードを記述してください。
 
     }
     a[a.length - 1] = w;
 
 // a, b, c, d のプリント
     document.write("要素をひとつずらす。 " + br);
     document.write("a[] = " + toString(a) + br);
     document.write("b[] = " + toString(b) + br);
     document.write("c[] = " + toString(c) + br);
     document.write("d[] = " + toString(d) + br);
     document.write(hr);
 
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■探索

Top

■線形探索

Top

■例題

プロンプトから入れた整数が、アプリケーション中の配列の要素(10，20，30，40，50の5つ)と一致しているか否かを検査し、一致する場合はそのときの添字をプリントするHTML "SequentialSearch.html"を作成してください。ただし、配列の要素は昇順に並んでいるとは限りません。


 <!-- SequentialSearch.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function search(a, n) {
     for (var i = 0; i < a.length; i++) {
         if (a[i] == n) {
             return i;
         }
     }
     return -1;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var n = parseInt(prompt("数値を指定してください。", 0));
     var a = Array(50, 30, 40, 10, 20);
 
     var i = search(a, n);
     if (i >= 0) {
         document.write(n + " was found.(index = " + i + ")");
     } else {
         document.write(n + " was not found.");
     }
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■2分探索

Top

■例題

プロンプトから入れた整数が、配列の要素(10，20，30，40，50の5つ)と一致しているか否かを検査し、一致する場合はそのときの添字をプリントするHTML "BinarySearch.html"を作成してください。ただし、配列の要素は昇順に並んでいます。


 <!-- BinarySearch.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function search(a, n) {
     var l = 0;
     var h = a.length - 1;
     var m;
     while (l <= h) {
         m = Math.floor((l + h) / 2);
         if (a[m] < n) {
             l = m + 1;
         } else if (a[m] > n) {
             h = m - 1;
         } else {
             return m;
         }
     }
     return -1;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var n = parseInt(prompt("数値を指定してください。", 0));
     var a = Array(10, 20, 30, 40, 50);
 
     var i = search(a, n);
     if (i >= 0) {
         document.write(n + " was found.(index = " + i + ")");
     } else {
         document.write(n + " was not found.");
     }
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■実習

Top

■コントロール・ブレーク

Top

■例題

昇順に並んでいる配列 a があります。配列 a の中の同じ要素の数をカウントするHTML "Count01.html"を作成してください。


 <!-- Count01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function count(a) {
     var countValue = new Array();
 
     var prevValue = a[0];
     var j = 0;
     var count = 0;
     for (var i = 0; i < a.length; i++) {
         if (prevValue == a[i]) {
             count++;
         } else {
             countValue[j] = prevValue;
             countValue[j + 1] = count;
             j = j + 2;
             count = 1;
             prevValue = a[i];
         }
     }
     countValue[j] = prevValue;
     countValue[j + 1] = count;
     return countValue;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var br = "<br/>";
     var a = new Array(2, 2, 3, 5, 5, 5, 7, 8, 8);
     var counter = count(a);
 
     for (var i = 0; i < counter.length; i = i + 2) {
         document.write(counter[i] + " : " + counter[i + 1] + br);
     }
 
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

配列の各要素の降順の順位をプリントするHTML"Rank01.html"を作成してください。


 <!-- Rank01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function rank(a) {
     var rank = new Array(a.length);
 
     for (var i = 0; i < a.length; i++) {
         rank[i] = 1;
         for (var j = 0; j < a.length; j++) {
             if (a[j] > a[i]) {
                 rank[i]++;
             }
         }
     }
     return rank;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var br = "<br/>";
 
     var a = new Array(5, 3, 6, 5, 8, 6, 9, 1, 3, 3);
     var ranking = rank(a);
     for (var i = 0; i < a.length; i++) {
         document.write(a[i] + " - " + ranking[i] + br);
     }
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

■実習

Top

■併合

Top

■例題

昇順に並んでいる2つの配列 a, b があります。配列 a と b をまとめて、新しい配列 c をつくるHTML "Marge01.html"を作成してください。このとき、つぎのような条件を前提とします。

配列 a に同じ数値になる要素はありません。
配列 b に同じ数値になる要素はありません。
配列 a と b で同じ要素があったときは、片方だけを配列 c に追加します。
配列 a, b, c の最後の要素は数値の最大値(Number.MAX_VALUE)です。


 <!-- Marge01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function marge(a, b) {
     var c = new Array();
     var i = 0, j = 0, k = 0;
     while (a[i] < Number.MAX_VALUE || b[j] < Number.MAX_VALUE) {
         if (a[i] < b[j]) {
             c[k++] = a[i++];
         } else if (a[i] == b[j]) {
             c[k++] = a[i++];
             j++;
         } else {
             c[k++] = b[j++];
         }
     }
     c[k] = Number.MAX_VALUE;
     return c;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var br = "<br/>";
 
     var a = new Array(10, 20, 30, 40, 50, Number.MAX_VALUE);
     var b = new Array(15, 20, 30, 35, 50, 60, Number.MAX_VALUE);
 
     document.write(toString(marge(a, b)));
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

■実習

Top

■整列(並べ替え)

Top

■例題

プロンプトから入れた整数を昇順に並べ替えるHTML "Sort01.html"を作成してください。(例題は挿入ソートです）


 <!-- Sort01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function sort(a) {
     var n = a.length;
 
     for (var i = 0; i < n - 1; i++) {
         for (var j = i + 1; j < n; j++) {
             if (a[i] > a[j]) {
                 var t = a[i];
                 a[i] = a[j];
                 a[j] = t;
             }
         }
     }
     return a;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var a = new Array(6, 3, 5, 1);
     document.write("a[] = " + toString(sort(a)));
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■実習

上記機能をsort(a)関数として、"ArrayUtil.js"に入れてください。これを確認するHTML"Sort02.html"を作成してください。

Top

■文字列検索

Top

■例題

プロンプトから入れた文字列の中の部分文字列のインデックスを戻すHTML "StringSearch01.html"を作成してください。

なお、"ArrayUtil.js"には、文字列を文字配列にして戻す関数 "toCharArray(文字列)" を入れておきます。

□ toCharArray(文字列)


 /**
  * 文字列を文字配列にする。
  * @param s 文字列。
  * @return 文字配列。
  */
 function toCharArray(s) {
     var ca = new Array();
     for (var i = 0; i < s.length; i++) {
         ca[i] = s.charAt(i);
     }
     return ca;
 }

□ "StringSearch01.html"


 <!-- StringSearch01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function search(a, b) {
     var i, j;
 
     for (i = 0; i < a.length - b.length + 1; i++) {
         for (j = 0; j < b.length; j++) {
             if (a[i + j] != b[j]) {
                 break;
             }
         }
         if (j >= b.length) {
             break;
         }
     }
 
     if (j < b.length) {
         i = -1;
     }
     return i;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var br = "<br/>";
 
     var a0 = prompt("文字列を入力してください。", "");
     var b0 = prompt("探す文字列を入力してください。", "");
     var a = toCharArray(a0);
     var b = toCharArray(b0);
 
     document.write("search(\"" + a0 + "\", \"" + b0 + "\") = " + search(a, b) + br);
     document.write("\"" + a0 + "\".indexOf(\"" + b0 + "\") = " + a0.indexOf(b0)); // 参考 indexOf() メソッド
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top


 <!-- Eratosthenes.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArrayUtil.js"></script>
 <script type="text/javascript">
 <!--
 function eratosthenes(n) {
     var prime = new Array(n);       // ふるい
     var primevalue = new Array();   // 素数配列(戻り値)
 
     for (var i = 0; i < n; i++) {
         prime[i] = true;
     }
 
     for (var i = 2; i < n; i++) {
         if (prime[i]) {
             for (var j = 2 * i ; j < n; j = j + i) {
                 prime[j] = false;
             }
         }
     }
 
     var j = 0;
     for (var i = 2; i < n; i++) {
         if (prime[i]) {
             primevalue[j] = i;
             j++;
         }
     }
 
     return primevalue;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var br = "<br/>";
 
     var n = parseInt(prompt("整数を指定してください。", 0));
 
     var primevalue = eratosthenes(n);
 
     for (var i = 0; i < primevalue.length; i++) {
         document.write(" " + primevalue[i]);
     }
     document.write(br);
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top