Webページ関連ライブラリ utility.js:使用説明書

対象分野
1 自ファイル・他のファイルの指定領域を取り出して表示する。
2 画像ファイルをトリミングして <img> や <canvas> に表示する。
3 配列、ポインタ、連想配列(Obj配列)、Map配列、JSONデータ、CSVファイルの操作。

他のライブラリ
  library.js     数値解析・統計・経営数学関連
  canvasxy.js   CANVASをXY座標軸で記述する分野
  library.js     その他未分類
ご利用にあたって

目次

自HTMLからの読込・表示
  showInnerHTML 自HTML(innerHTML) の表示
  swichDisplay 表示・非表示の反転
外部ファイルの取出し
  getFileWhole ファイル全体
  getFileByLiteral 指定した最初と最後の文字列の範囲
  getFileByFunction 指定した function ~ ] の範囲
画像読込
  getImageAdjust 画像の縦横幅の調整
  getImageCanvas CANVASでの画像の縦横幅の調整
ローカルファイル
  getLocalFileDB 指定フォルダ内のファイル特性を取得(ダイアログボックス)
  getLocalFileDD 指定フォルダ内のファイル特性を取得(ドラッグ&ドロッ
別ウインドウへの表示
  writeWindow 文字列変数内容の別ウインドwへの表示
  writeWindowById HTML中ID指定範囲の別ウインドwへの表示
配列の加工
  sortMatrix 配列の行・列方向のソート
  orderMatrix 順位づけ。連想配列も適用。compareType は適用しない
  searchMatrix 検索 順次検索/二分検索
  mergeMatrix ソートされた二つの表をマージする
  projectMatrix 列を指定して射影した表を作成
  joinMatrix ジョイン 2つの表を結合して新表を作成
  joinMatrixHush 同上 結合表が連想配列
  aggregateMatrix 集計表の作成
  updateMatrix ソートされた元表を更新表で更新する
  changeMatrixNullBlank 特殊タイプ文字をすべて "" にする
  sortMatrixEx compareType での大小関係を含めたSORT
ポインタ
  createPointer 双方向ポインタの生成
  updatePointer 双方向ポインタの追加・削除・変更
  cleanPointer  双方向ポインタの"削除"行の削除
配列形式の変換
  連想配列(Obj配列)⇔通常配列
  MtxToObj 通常配列→Obj配列
  ObjToMtx Obj配列→通常配列
  getKeyObj Obj配列の行名と列名の取得
  連想配列(Map配列)⇔通常配列
  MtxToMap 通常配列→Map配列
  MapToMtx Map配列→通常配列
  JSONデータ⇔Obj配列
  JSON.stringify Obj配列→JSONデータ ⇔ 
  JSON.parse JSONデータ→Obj配列
 CSVファイル→2次元配列
  CsvToMtx 外部CSVファイル→2次元配列
未分類
  functionLiteral 関数名をリテラルで与える

自HTML(innerHTML) の表示

showInnerHTML(選択場所, 表示場所, 改行有無)

document.getElementById(選択場所).innerHTML で選択した場所を、document.getElementById(表示場所).innerHTML に表示します。
このとき、タグ < ~ >: などのタグを、単なる文字列として無効化します。
表示場所を省略あるいは "window" を指定すると、別ウインドウに表示されます。
選択場所が、script や pre のように br がない場合は、選択場所全体を pre~/pre で囲む必要がありますが、その場合は改行有無を省略あるいは false とします。選択場所が、p など br を含む場合は、その必要がないので true を指定します。

HTMLの例

この下に次の文があります。
<script id="SCRIPT">
function abc(a,b) {
    if (a < b) c = a;
    if (a > b) c = b;
    return c;
}
</script>
この下の文は <pre id="PRE"> ~ </pre> で囲まれています。
この部分は pre です。
さしすせそ
たちつてと
この下の文は <p id="P"> ~ </p> で囲まれています。

この部分は br で改行しています。
あいうえお
かきくけこ




swichDisplay(対象ID[, 表示場所] ): 表示・非表示の反転

対象ID:表示反転の対象になる個所
  <div id="対象ID" style="display:none"> ~表示内容~ </div> 初期状態は非表示にしておく
表示場所:表示非表示をする場所(対象IDと異なる場所で反転するときに指定)
  省略した場合:対象IDの場所が表示反転する
  指定した場合:対象IDに内容がこの場所に表示される/""になる
         対象IDは非表示のまま
  <div id="表示場所">:</div>  <div>:</div>の間には何も記述しない

表示場所がない場合:対象IDが表示反転する

<button onClick="swichDisplay('表示反転対象ID1');">swichDisplay('表示反転対象ID1');</button>

<div id="表示反転対象ID1" style="display:none">
<p>「表示反転対象ID1」の内容です。</p>
</div>

この下に<div id="表示反転対象ID1" style="display:none">があります。


外部ファイルの取出し

外部プレーンファイルを読込み、その全体あるいは指定部分を。指定した表示場所あるいは新ウインドウに表示します。また、対象となる部分の各行を行の配列として取り出すことができます。

対象ファイルから取り出す部分を、id, class, tag で指定し、指定した表示場所に表示する機能は、JQueryを用いて簡単に記述できるので、ここでは、JQuery で扱っていない機能だけに限定しています。

ここでのテストデータは、text/test.txtを用います。


読込行 = getFileWhole(ファイル名, タグ無効);
getFileWhole(ファイル名, タグ無効, 表示場所|'window")

外部ファイルを読み、その全体を,
 ・表示場所を指定しない:行の配列にして戻す
 ・表示場所を指定(<div id="~"></div>):表示場所に表示。戻り値なし
 ・表示場所を 'window' と指定:新ウインドウにポップアップ表示。戻り値なし
の処理をします。

タグ無効

文中にHTMLのタグがある場合、それをタグとして認識し、表示時に改行などを行うか、< や > を特殊文字(実体参照)に置換して、タグ機能を無効にしするかの指定です。
表示をするときは、HTMLのルールに従いますので、タグ無効をしないと、タグは表示されず、行連続した半角スペースは詰められます。それで、ソースコードを表示する場合は無効指定をするのが適切です。逆に、対象関数の機能を用いるために表示場所に埋め込むには、無効にしてはいけません。

無効にするときは "yes" 、しないときは "no" と指定します。省略はできません。

表示場所を与えたときは、行末に改行コード"<br>"を付け加えてあります。

タグ変換なし(タグはそのまま:改行などが行われる)
表示場所なし var 読込行 = getFileWhole('text/test.txt', 'no');
表示場所指定 getFileWhole('text/test.txt', 'no', 'getFileWhole表示場所');
'window' getFileWhole('text/test.txt', 'no', 'window');
タグ変換あり(タグ機能を無効にする)
表示場所なし var 読込行 = getFileWhole('text/test.txt', 'yes');
表示場所指定 getFileWhole('text/test.txt', 'yes', 'getFileWhole表示場所');
'window' getFileWhole('text/test.txt', 'yes', 'window');
getFileWhole表示場所

読込行 = getFileByLiteral(ファイル名, 最初文字列, 最後文字列, タグ無効);
getFileByLiteral(ファイル名, 最初文字列, 最後文字列, タグ無効, 表示場所|'window")

getFileWholeが指定したファイル全体を対象にしていたのに対して、上から探索して指定した最初文字列を持つ最初の行から, 最後文字列を持つ最初の行までの範囲を対象にします。

ワイルド文字

最初文字列, 最後文字列

getFileByLiteral('text/test.txt', 'abc', 'xyz', 'yes', 'getFileByLiteral表示場所');
getFileByLiteral('text/test.txt', '_abc', '%xyz', 'yes', 'window');
 
getFileByLiteral表示場所

読込行 = getFileByFunction(ファイル名、 関数名, タグ無効);
getFileByFunction(ファイル名, 関数名, タグ無効, 表示場所|'window2);

getFileWholeが指定したファイル全体を対象にしていたのに対して、行の先頭が "function 関数名" である行から、"}" である行までを選択します。

本ページで随所に[ソースコード表示]とありますが、この関数を特定目的に簡素化したものを利用しています。

タグ無効なし(タグはそのまま:改行などが行われる)
表示場所なし var 読込行 = getFileByFunction('text/test.txt', 'aaa', 'no');
表示場所指定 getFileByFunction('text/test.txt', 'aaa', 'no', 'getFileByFunction表示場所');
'window' getFileByFunction('text/test.txt', 'aaa', 'no', 'window');
タグ変換あり(タグ機能を無効にする)
表示場所なし var 読込行 = getFileByFunction('text/test.txt', 'aaa', 'yes');
表示場所指定 getFileByFunction('text/test.txt', 'aaa', 'yes', 'getFileByFunction表示場所');
'window' getFileByFunction('text/test.txt', 'aaa', 'yes', 'window');
getFileByFunction表示場所


画像読込

getImageAdjust(ファイル名, 表示場所[, 横幅, 縦幅, 水平位置, 垂直位置]);

機能

  • [ ] 内を省略した場合は、<img id="表示場所" src="ファイル名"> としたのと同じです。
  • 横幅, 縦幅を指定すると、表示場所に 横幅×縦幅[px]の仮想的な枠が作られます。
  • その枠内に指定した画像を、縦横比を保ちつつ、表示します。
  • 枠が画像の縦横比に比べて横長ならば、水平に空白ができます。水平位置で left|center|right を指定することにより、左詰め、中央、右詰めの位置に表示されます。
    枠が画像の縦横比に比べて縦長ならば、垂直に空白ができます。水平位置で top|center|bottom を指定することにより、上詰め、中央、下詰めの位置に表示されます。

すなわち、縦横比は不明な画像を一定の枠内に表示することがでkるので、異なる縦横比のいくつかの画像を、並べて表示するときに利用できます。

省略時解釈

  • 横幅、縦幅は、表示場所で記述していても、関数で指定したほうが優先されます。
  • 横幅、縦幅の両方を省略する(0を与える)と、画像の横幅、縦幅がとられます。
    一方だけを与えると、他方は画像の縦横比から計算されます。
  • 水平位置、垂直位置は、省略時には center (中央配置)になります。

実現方法

  • <img id="表示場所" ~ > で指定した内部のパラメタをJavascriptで操作することになります。wigth と height は変更できますが、マージン(margin)はパラメタにないので、CSS(style)での指定を変更することになります。
  • すなわち、この関数を用いるには、呼び出すHTML側で
      <style>
        #表示場所 { }
      <style>
    を記述しておくことが必須です。複数の表示場所があるときは、それぞれに名称を変えて記述しておく必要があります。
  • この関数では、
      表示場所.style.margin = 上下左右マージン;
    として表示位置を実現しています。

実例

この下に
  <style>
    #getImageAdjust表示場所 { }
  <style>
があります。

↓ <img id="getImageAdjust表示場所">: があります。
←図境界
↑図境界

ファイル名を変えるときは、再読込みをしてください。

ファイル名横幅縦幅水平位置垂直位置備考
picture/400x300.jpg <img src="picture/400x300.jpg">と同じ
picture/400x300.jpg200300top 縦幅を大、top指定→下にマージン
picture/400x300.jpg200300center 縦幅を大、center指定→上下にマージン
picture/480x640.jpg <img src="picture/480x640.jpg">と同じ
picture/480x640.jpg400300right 横幅を大、right指定→左にマージン

getImageCanvas(画像URL, 表示場所[, 横位置, 縦位置, 背景色]);

画像ファイルを縦横比を保ちつつcanvasいっぱいに表示する。<canvas>にwidth, heightは必須

getImageCanvas(画像URL, CANVAS名);

canvasのサイズを変える(余白部を削除する)

ケース1

<canvas id="GIcanvas11" width="300" height="300"></canvas>

canvasのwidth=300がネックになりheight=300x300/400=225になります。

ケース2

<canvas id="GIcanvas12" width="300" height="300"></canvas>

canvasのheight=300がネックになりwidth=480x300/640=225になります。

getImageCanvas(画像URL, CANVAS名, 横位置, 縦位置, 背景色);

canvasのサイズは変えず、画像を縦位置:上・中・下、横位置:左・中・右に表示。余白部を残す。

ケース1
横長画像:圧縮された全体が下に表示され、上に空白ができる('右'は無視される)。背景色はgray
ケース2
縦長画像:圧縮された全体が中央に表示され、左右に空白ができる('上'は無視される)。背景色はyellow

この下に<canvas id="GIcanvas2" width="300" height="300"></canvas>があります。

参照URL

「画像ファイルのCANVAS表示」

ローカルファイル

getLocalFileDB(入力場所, 関数名); ローカルファイル名取得(ダイアログボックス)

呼出側のHTMLで指定した入力場所に[ファイル選択]のボタンを生成します。
ファイルを指定すると、呼出側で記述した「function 関数名(files)」にfilesオブジェクトを戻します。
  files[i].name i番目のファイルの名称
  files[i].urn
  files[i].type
  files[i].lastModifiedDate

<script>
function glfdb取込後処理(files) { // getLocalFileDBから呼び出された関数です。
    var 内容 = "";                //   ここではfilesオブジェクトの内容を表示します。 
    for (var i=0; i<files.length; i++) {
        内容 += "files[" + i + "].name=" + files[i].name + ",  "
              + "files[" + i + "].type=" + files[i].type + ",  "
              + "files[" + i + "].size=" + files[i].size + ",  "
              + "files[" + i + "].lastModifiedDate="  + files[i].lastModifiedDate
              + "<br>";
    }
    document.getElementById("glfdb結果表示場所").innerHTML = 内容;
}
</script>

<button onClick="getLocalFileDB('glfdd入力場所', 'glfdb取込後処理')">実行</button><br>
<div id="glfdb入力場所"></div>
<div id="glfdb結果表示場所"></div>

↓ <div id="glfdb入力場所"></div>

↓ <div id="glfdb結果表示場所"></div>


getLocalFileDD(入力場所, 関数名);  ローカルファイル名取得(ドラッグ&ドロップ)

getLocalFileDB()が先に実行したとき、このgetLocalFileDD()の実行が行われません(原因未詳)。

呼出側のHTMLで指定した入力場所に[ドラッグ&ドロップ]の枠を生成します。200x100に固定しています。
ファイルを指定すると、呼出側で記述した「function 関数名(files)」にfilesオブジェクトを戻します。
  files[i].name i番目のファイルの名称
  files[i].urn
  files[i].type
  files[i].lastModifiedDate

<script>
function glfdd取込後処理(files) { // getLocalFileDDから呼び出された関数です。
    var 内容 = "";                //   ここではfilesオブジェクトの内容を表示します。 
    for (var i=0; i<files.length; i++) {
        内容 += "files[" + i + "].name=" + files[i].name + ",  "
              + "files[" + i + "].type=" + files[i].type + ",  "
              + "files[" + i + "].size=" + files[i].size + ",  "
              + "files[" + i + "].lastModifiedDate="  + files[i].lastModifiedDate
              + "<br>";
    }
    document.getElementById("glfdd結果表示場所").innerHTML = 内容;
}
</script>

<button onClick="getLocalFileDD('glfdd入力場所', 'glfdd取込後処理')">実行</button><br>
<div id="glfdd入力場所"></div>
<div id="glfdd結果表示場所"></div>

↓ <div id="glfdd入力場所"></div>

↓ <div id="glfdd結果表示場所"></div>


別ウインドウへの表示


writeWindow(文字列変数, 置換)  

このHTML中の、&li;div id="対象ID"> ~ </div> で囲んだ範囲を別ウインドウに表示します。
置換:<. > を特殊文字に置換して本来の機能をなくすこと。
 省略時:置換する
 "noreplace" あるいは何らかの値:置換しない。

この下に次の文があります。

var 文字列変数 = "<p>あいうえお<br>かきくけこ</p>";
文字列変数 += "function func(x) {";
文字列変数 += "    return x * x;";
文字列変数 += "}";
writeWindow(文字列変数)
writeWindow(文字列変数, 'no')

writeWindowId(対象ID, 置換)  

このHTML中の、&li;div id="対象ID"> ~ </div> で囲んだ範囲を別ウインドウに表示します。
置換:<. > を特殊文字に置換して本来の機能をなくすこと。
 省略時:置換する
 "noreplace" あるいは何らかの値:置換しない。

この下に次の文があります。

<script id='writeWindowByIdTest'>
<p>あいうえお<br>かきくけこ</p>
function func(x) {
    return x * x;
}
</script>
writeWindowById('writeWindowByIdTest')
writeWindowById('writeWindowByIdTest', 'no')

配列操作


二次元配列のソート 
  新配列 = sortMatrix(配列, {パラメタ} )

パラメタ
  sort:"row"/"col" 必須 row 行のSORT、行が変化する
  key1:第1キーの列(行)番号 必須
  order1:"ascend"/"descend" 第1キーの昇順/降順 省略="ascend"
  key2:第2キーの列(行)番号 省略="" (第2キーを指定しない)
  order2:"ascend"/"descend" 第1キーの昇順/降順 省略="ascend"
  title:true/false 省略=false
    sort:"row"/"col" のとき先頭行/列をタイトルとしてソートの対象にしない
例題の配列
    var 配列0 = [ [ 0, 1, 2, 3],            var 配列R = [ ["r0", 0, 1, 2, 3],   
                   [ 1, 2, 3, 1],                            ["r1", 1, 2, 3, 1],
                   [ 2, 3, 1, 3],                            ["r2", 2, 3, 1, 3],
                   [ 3, 1, 3, 1],                            ["r3", 3, 1, 3, 1],
                   [ 4, 3, 1, 2] ];                          ["r4", 4, 3, 1, 2] ];

    var 配列C = [ ["c0","c1","c2","c3"],    var 配列B = [ ["rc","c0","c1","c2","c3"],
                   [ 1,   2,   3,   1],                     ["r0", 0,   1,   2,   3],
                   [ 2,   3,   1,   3],                     ["r1", 1,   2,   3,   1],
                   [ 3,   1,   3,   1],                     ["r3", 3,   1,   3,   1],
                   [ 4,   3,   1,   2] ];                   ["r4", 4,   3,   1,   2] ];
(配列0, { sort:"row", key1:2, order1:"ascend"})
(配列0, { sort:"row", key1:2, order1:"ascend", key2:3, order2:"ascend"})
(配列0, { sort:"col", key1:2, order1:"descend"})
(配列C, { sort:"row", key1:2, order1:"ascend", title:true})
(配列R, { sort:"col", key1:2, order1:"ascend", title:true})
(配列B, { sort:"row", key1:2, order1:"ascend", title:true})
(配列B, { sort:"col", key1:2, order1:"ascend", title:true})

順位 = orderMatrix(行列, 先頭行, ソート項目);

行列の指定した列(ソート項目)の値により昇順にソートしたときの各行の順位を戻します。
ソート項目が複数のときは、[キー1, キー2] のように与えます。
先頭行=1:先頭行が列名のとき。ソート項目は列名で与えます。
先頭行=0:先頭行に列名がないとき。ソート項目は列番号で与えます。
行列そのものはソートされません。各行のソート後の順位が戻されるだけです。
順位[k] = i とは、昇順ソートしたとき、k番目になる行が i であることを示します。
すなわち、行列[[順位[k]] がk番目の行になります。
ソート項目の同じの場合、発生順の順序になります。
ケース1               ケース2
    var 行列 = [               var 行列 = [
        ["列A", "列B", "列C"],
        [  3,     10,      2],               [  3,     10,      2],
        [  1,     10,      1],               [  1,     10,      1],
        [  5,     20,      3],               [  5,     20,      3],
        [  4,     10,      2],               [  4,     10,      2],
        [  2,     20,      1] ];             [  2,     20,      1] ];


    var 順位 = orderMatrix                 var 順位 = orderMatrix(行列, 0, 1);
           (行列, 1, ["列C", "列B"]);

一致位置 = searchMatrix(元表, 先頭行、タイプ、検索キー, 検索値);  

元表は検索キーを主キーとしています。その主キーが検索値と一致する行を検索して一致位置として戻します。一致する行がなければ一致位置=-1 になります。
元表の先頭行が列名のときは先頭行=1とし、検索キーは列名で指定します。列名行がなときは、先頭行=0とし、検索キーは行番号で指定します。
タイプは検索の方法です。
 0:元表はソートされていない。順次探索法
 1:昇順にソートされている。順次探索法
 2:昇順にソートされている。二分探索法
検索キー, 検索値は複数していが必要です。[キー1, キー2] の形式で与えます。

    var 元表A = [             var 元表B = [             var 元表C = [
                                                                ["列A","列B","列C" ],
          [ 0,  10,  100 ],          [ 0,  10,  100 ],          [  1,    10,    100 ],
          [ 1,  30,  300 ],          [ 1,  10,  200 ],          [  2,    15,    200 ],
          [ 2,  20,  300 ],          [ 2,  20,  100 ],          [  3,    20,    100 ],
          [ 3,  15,  200 ],          [ 3,  20,  300 ],          [  4,    25,    300 ],
          [ 4,  35,  100 ] ];        [ 4,  30,  100 ] ];        [  5,    30,    100 ] ];

    var 一致位置 = [];
                               元表, 先頭行、タイプ、検索キー, 検索値  一致位置
    一致位置[0] = searchMatrix(元表A,  0,      0,      1,       20);        2
    一致位置[1] = searchMatrix(元表A,  0,      0,      1,       25);       -1
    一致位置[2] = searchMatrix(元表B,  0,      1,    [1,2],  [20,100]);     2
    一致位置[3] = searchMatrix(元表B,  0,      1,    [1,2],  [20,200]);    -1
    一致位置[4] = searchMatrix(元表B,  0,      2,    [1,2],  [20,100]);     2
    一致位置[5] = searchMatrix(元表B,  0,      2,    [1,2],  [20,200]);    -1
    一致位置[6] = searchMatrix(元表C,  1,      1,   "列B",     20);        3
    一致位置[7] = searchMatrix(元表C,  1,      1,   "列B",     13);       -1
    一致位置[8] = searchMatrix(元表C,  1,      2,   "列B",     20);        3
    一致位置[9] = searchMatrix(元表C,  1,      2,   "列B",     40);       -1

mergeMatrixTrace(元表, 更新表, 先頭行, キー);; 
新表 = mergeMatrix(元表, 更新表, 先頭行, キー); 

元表と更新表をマージして新表を作成します。元表と更新表はキーの昇順にソートされており、同一キーをもつ複数のデータがあります。

表の構成は、次の2つがあり、元表と更新表は同一の構成でなければなりません。
 先頭行=1:先頭行が列名になっている
 先頭行=0:列名行がなく、先頭行もデータである。
この違いは、キーを列名で与えるか、列番号で与えるかにより判別されます。
キーは、単一項目でもよいし、複数項目を結合したものも扱えます。
複数項目を指定するには、[項目1, 項目2] のように表記します。

ケース1
    var 元表   = [
                  ["得意先番号", "商品番号",  "数量",  "金額"],
                  [    10,         100,        10,      200 ],
                  [    10,         200,        10,      200 ],
                  [    10,         200,        20,      400 ],
                  [    20,         100,        20,      400 ],
                  [    20,         200,        10,      200 ],
                  [    20,         200,        20,      400 ],
                  [    30,         100,        20,      200 ] ];

    var 更新表 = [
                  ["得意先番号", "商品番号",  "数量",  "金額"],
                  [    10,         100,        15,      300 ],
                  [    15,         200,        15,      300 ],
                  [    20,         150,        15,      500 ],
                  [    35,         150,        25,      500 ] ];

    var 新表 = mergeMatrix(元表, 更新表, 1, [ "得意先番号", "商品番号"]);

ケース2
    //            -------- キー --------
    //           "得意先番号", "商品番号",  "数量",  "金額"
    //       列番号    0           1           2        3        
    var 元表   = [
                  [    10,         100,        10,      200 ],
                  [    10,         200,        10,      200 ],
                  [    10,         200,        20,      400 ],
                  [    20,         100,        20,      400 ],
                  [    20,         200,        10,      200 ],
                  [    20,         200,        20,      400 ],
                  [    30,         100,        20,      200 ] ];

    var 更新表 = [
                  [    10,         100,        15,      300 ],
                  [    15,         200,        15,      300 ],
                  [    20,         150,        15,      500 ],
                  [    35,         150,        25,      500 ] ];

    var 新表 = mergeMatrix(元表, 更新表, 0, [0, 1]);

新表 = projectMatrix(元表, 先頭行, 指定項目 [, "削除"]); 

先頭行=1:先頭行が列名になっている
先頭行=0:列名行がなく、先頭行もデータである。
"削除" がないとき、元表から指定した項目(列)を、指定した順序に並べ替えます。 "削除" があるとき、元表から指定した項目(列)を削除します。
ケース1
    var 元表 = [
          ["列A", "列B", "列C", "列D", "列E"],
          [  10,     11,     12,     13,     14 ],
          [  20,     21,     22,     23,     24 ],
          [  30,     31,     31,     33,     34 ] ];

    var 新表 = projectMatrix(元表, 1, ["列A", "列D", "列B"]);

ケース2
    var 元表 = [
          [  10,     11,     12,     13,     14 ],
          [  20,     21,     22,     23,     24 ],
          [  30,     31,     31,     33,     34 ] ];

    var 新表 = projectMatrix(元表, 0, [1, 3], "削除");

新表 = joinMatrix(元表, 照合表、先頭行, 結合キー [, 不一致処理]); 

元表と照合表を結合キーで結合して新表を作成します。例えば売上表(元表)の得意先番号(結合キー)と、得意先番号を主キーとする得意先表(照合表)を結合して、得意先表がもつ得意先名や住所の属性を元表に付け加えて新表を作成します。
先頭行=1:先頭行が列名になっている
先頭行=0:列名行がなく、先頭行もデータである。
元表の得意先番号が得意先表にない場合(不一致)のとき
・不一致処理を指定しないとき:元表からそのレコードを削除されます。
・"保存" を指定した場合、削除せず、追加属性が undefined になります。

注意
照合表の結合キーは先頭列におく必要があります。

ケース1
    var 元表 = [
          ["年月日", "事業所", "得意先番号", "商品番号", "数量"],
          [ 220401,     1,         10,           100,       10 ],
          [ 220402,     3,         15,           200,       10 ],
          [ 220403,     2,         30,           300,       20 ],
          [ 220404,     1,         30,           300,       20 ],
          [ 220405,     3,         35,           100,       10 ] ];

    var 照合表 = [
          ["得意先番号", "得意先名", "得意先住所"],
          [     10,       "得意A",        "東京"],
          [     20,       "得意B",        "大阪"],
          [     30,       "得意C",        "東京"],
          [     40,       "得意D",        "大阪"] ];

    var 新表 = joinMatrix(元表, 照合表, 1, "得意先番号");

ケース2
    var 元表 = [
          [ 220401,  1,  10,  100,  10 ],
          [ 220402,  3,  15,  200,  10 ],
          [ 220403,  2,  30,  300,  20 ],
          [ 220404,  1,  30,  300,  20 ],
          [ 220405,  3,  35,  100,  10 ] ];

    var 照合表 = [
          [ 10, "得意A",  "東京"],
          [ 20, "得意B",  "大阪"],
          [ 30, "得意C",  "東京"],
          [ 40, "得意D",  "大阪"] ];

    var 新表 = joinMatrix(元表, 照合表, 0, 2, "保存");

新表 = joinMatrixHush(元表, 照合表、結合キー [, 不一致処理]);  
新表 = joinMatrixHushColname(元表, 照合表, 照合表列名, 結合キー [, 不一致処理]);  

joinMatrix と同じ機能ですが、照合表が下記のような構造の連想配列になっています。
これにより、照合表の検索がダイレクトアクセスになるので、照合表が大量のとき、処理効率が高くなります。
joinMatrixHush:元表の先頭行に列名がなく、結合キーは列番号で指定
joinMatrixHushColname:元表の先頭行が列名で、結合キーは列名で指定

ケース1 joinMatrixHush
    var 元表 = [
          [ 220401,  1,  10,  100,  10 ],
          [ 220402,  3,  15,  200,  10 ],
          [ 220403,  2,  30,  300,  20 ],
          [ 220404,  1,  30,  300,  20 ],
          [ 220405,  3,  35,  100,  10 ] ];

    var 照合表 = {};
        照合表["10"] = ["得意A",  "東京"];
        照合表["20"] = ["得意B",  "大阪"];
        照合表["30"] = ["得意C",  "東京"];
        照合表["40"] = ["得意D",  "大阪"];

    var 新表 = joinMatrixHush(元表, 照合表, 2, "保存");

ケース2 joinMatrixHushColname
    var 元表 = [
          ["年月日", "事業所", "得意先番号", "商品番号", "数量"],
          [ 220401,     1,         10,           100,       10 ],
          [ 220402,     3,         15,           200,       10 ],
          [ 220403,     2,         30,           300,       20 ],
          [ 220404,     1,         30,           300,       20 ],
          [ 220405,     3,         35,           100,       10 ] ];

    var 照合表列名 = ["得意先名", "得意先住所"];
    var 照合表 = {};
        照合表["10"] = ["得意A",  "東京"];
        照合表["20"] = ["得意B",  "大阪"];
        照合表["30"] = ["得意C",  "東京"];
        照合表["40"] = ["得意D",  "大阪"];

    var 新表 = joinMatrixHushColname(元表, 照合表, 照合表列名, "得意先番号");

集計表 = aggregateMatrix(明細表, 先頭行, キー項目, 集計項目[, 保存]); 

明細表はキー項目の昇順にソートしています。それをキー項目により、集計項目を集計した集計表を作ります。
「保存」を省略すると、集計表の項目はキー項目と集計項目で指定したものだけになります。
"保存" と指定すると、それ以外の項目が最後にマッチした値が入れられます。

ケース1
    var 明細表   = [      //  ------ キー項目 -----      -- 集計項目 --
                  ["行番号", "得意先番号", "商品番号",  "数量",  "金額"],
                  [   0,          10,         100,        11,      2000 ],   // ─
                  [   1,          10,         200,        11,      2000 ],   // ┐
                  [   2,          10,         200,        21,      4000 ],   // │
                  [   3,          10,         200,        31,      6000 ],   // ┴
                  [   4,          20,         100,        31,      4000 ],   // ─
                  [   5,          20,         200,        11,      2000 ],   // ┐
                  [   6,          20,         200,        21,      4000 ],   // ┴
                  [   7,          30,         100,        11,      2000 ],   // ┐
                  [   8,          30,         100,        21,      4000 ] ]; // ┴ 
    var 集計表 = aggregateMatrix(明細表, 1,  [ "得意先番号", "商品番号"], [ "数量", "金額"]);

ケース2
    var 明細表   = [ // ┌キー項目
                  [ 0, 10, 100, 11, 2000 ],   // ┐
                  [ 1, 10, 200, 11, 2000 ],   // │
                  [ 2, 10, 200, 21, 4000 ],   // │
                  [ 3, 10, 200, 31, 6000 ],   // ┴
                  [ 4, 20, 100, 31, 4000 ],   // ┐
                  [ 5, 20, 200, 11, 2000 ],   // │
                  [ 6, 20, 200, 21, 4000 ],   // ┴
                  [ 7, 30, 100, 11, 2000 ],   // ┐
                  [ 8, 30, 100, 21, 4000 ] ]; // ┴

    var 集計表 = aggregateMatrix(明細表, 0, 1, [2, 3], "保存");

[新表, 警告表] = updateMatrix(元表, 更新表, 先頭行, 主キー); 

元表を更新表により更新して新表を作成します。データを一意に示す主キーの昇順でソートされています(同じ主キーをもつ複数のデータは存在しない)。
両表は同一の構成であり、更新表では、先頭列に更新区分が付けらています。更新区分は次の3つがあります。  追加:元表の主キーがない更新表のデータを追加
    元表にその主キーをもつデータがあれば、重複エラーなので警告表に出力
 変更:その主キーをもつ元表のデータを更新表のデータに置換
    元表にその主キーをもつデータがないときは、アンマッチなので警告表に出力
 削除:その主キーをもつ元表のデータを削除
    元表にその主キーをもつデータがないときは、アンマッチなので警告表に出力
    (更新表データは、主キーの項目だけがあればよい。

表の構成は、次の2つがあり、元表と更新表は同一の構成でなければなりません。
先頭行=1 先頭行が列名になっている
先頭行=0 列名行がなく、先頭行もデータである。
この違いは。主キーを列名で与えるか、列番号で与えるかにより判別されます。
主キーは、単一項目でもよいし、複数項目を結合したものも扱えます。
複数項目を指定するには、[項目1, 項目2] のように表記します。
エラーが発生しなかっらときは、警告表 = "" になります。

ケース1
    var 元表   = [
                  ["得意先番号", "商品番号",  "数量",  "金額"],
                  [    10,         100,        10,      200 ],      // このまま
                  [    10,         200,        10,      200 ],      // このまま
                  [    20,         100,        20,      400 ],      // このまま
                  [    20,         200,        10,      200 ],      // このまま(追加エラー)
                  [    20,         300,        10,      300 ],      // 変更される
                  [    30,         100,        20,      200 ] ];    // 削除される

    var 更新表 = [
                  ["更新区分", "得意先番号", "商品番号",  "数量",  "金額"],
                  [   "変更",       15,         250,        15,      500 ],   // アンマッチ
                  [   "追加",       20,         200,        15,      300 ],   // 重複エラー
                  [   "変更",       20,         300,        15,      500 ],   // 変更成功
                  [   "削除",       30,         100                     ],   // 削除成功
                  [   "追加",       35,         150,        25,      500 ] ]; // 追加成功

    var [新表, 警告表] = updateMatrix(元表, 更新表, 1, [ "得意先番号", "商品番号"]);

ケース2
    //            ------- 主キー -------
    //           "得意先番号", "商品番号",  "数量",  "金額"
    //       列番号    0           1           2        3        
    var 元表   = [
                  [   10,         100,        10,      200 ],
                  [   10,         200,        10,      200 ],
                  [   20,         100,        20,      400 ],
                  [   20,         200,        10,      200 ],
                  [   20,         300,        10,      300 ],
                  [   30,         100,        20,      200 ] ];

    var 更新表 = [
                  ["追加",   15,         150,        25,      500 ],    // 追加成功
                  ["変更",   20,         100,        25,      500 ],    // 変更成功
                  ["追加",   20,         200,        15,      300 ],    // 追加失敗
                  ["削除",   20,         300                      ],    // 削除成功
                  ["追加",   35,         150,        15,      300 ],    // 追加成功
                  ["変更",   45,         250,        45,      500 ] ];  // 変更失敗

    var [新表, 警告表] = updateMatrix(元表, 更新表, 0, [0, 1]);

新配列 = changeMatrixNullBlank(元配列, 変更後, 軸, 対象軸 [, 配列名称]);

機能

二次元の元配列の指定行(列)の要素について、undefind || null → ''(変更後='')、undefind || ''l → null(変更後=null)の変換をした新配列を戻します。配列名称を与えると、別ウインドウにJS 配列名称[][] を表示します。

サンプルデータ

     var 元配列 = [
          [ "aaa",  null,   '',  "" ],
          [  null,    '',   "",  14 ],
          [    '', 'ccc',   23      ], // [2][3] は undefined になります。
          [    "",    32,     , null]  // [3][2] は undefined になります。
    ];

実験

 

新配列 = sortMatrixEx(元配列, {key1: 1, title: true, … });

注意:この関数の中で compareType() を呼び出しています。両者を同じフォルダに置くか、 compareType()をjs指定してください。

機能説明

二次元配列の元配列をソートして新配列を作ります。パラメタにより多様な処理ができます。主な特徴を掲げます。

  • 行方向・列方向の昇順・降順のソートができます。
  • ソートキー(列や行)は2つまで指定できます。そのキーは列番号(行番号)だけでなく、列名(行名)でも指定できます。
  • 先頭行(先頭列)をタイトルとして取り扱えます。ソートする範囲をしていできます。
  • 配列要素には、特殊タイプ("", null, undefined)があってもかまいません。
  • 通常タイプの数値と文字列は、数値<文字列とします。"20" のような要素は、文字列と認識されるので、30 ≦ "20" になります。
  • 特殊タイプは、通常タイプ<""<null<udefined、あるいは、この逆になります。
  • 特殊タイプ要素がキーになるとき、昇順・降順によらず、行の上部・下部(列の左側・右側)にまとめます。
  • 新配列を 配列[][] 形式のjsファイルを作成することができます。

パラメタで指定できる項目を示します。ここでは sort に"row" を指定したときの説明で、( )内は"col" を指定したときです。

パラメタ指定値簡略省略値説明
sort"row"|"col""r"|"c""row" ソートして順序が変わるのが行(列)。
titletrue|falsefalse true とすると先頭行(列)をタイトルとしてソートの対象にしない。
first行(列)番号0|1 ソート対象最初行(列)、titleがtrueなら省略値は1
last行(列)番号配列サイズ ソート対象最後行(列)
key1列(行)番号なし(必須) ソートキー第1順位の列(行)、titleがtrueなら列名(行名)でもよい
order1"ascend"|"descend""a"|"d""a" key1での昇順(ascend)、降順(descend)
key2列(行)番号なし 省略時はソートキーが一つになる、
order2"ascend"|"descend""a"|"d""a" key2での昇順(ascend)、降順(descend)。key2指定がないときは無視
bnu"top"|"bottom""t"|"b""b" "", null, undefined の項を上にする(top)か下にするか
window配列名称なし 指定するとソート後配列を別ウインドウに 配列名称[i][j] = xxx; の形式で表示

実行例


新配列 = sortMatrixEx(元配列, {
 key1: 1,   // 列1の昇順
 window: "表" // JSリストあり
});

新配列 = sortMatrixEx(元配列, {
 title: true, // タイトル行あり
 key1: "列1", // 列名で指定
 order1: "d" // 降順ソート
});

新配列 = sortMatrixEx(元配列, {
 title: true,
 key1: 1,
 bnu: "top" // 特殊タイプを上へ
});

新配列 = sortMatrixEx(元配列, {
 title: true,
 key1: 1,
 first: 2, // 2~5行をソート対象に
 last: 5
});

新配列 = sortMatrixEx(元配列, {
 title: true,
 key1: 1, // キー個数=2
 key2: 2
});

新配列 = sortMatrixEx(元配列, {
 sort: "col", // 列をを動かす
 key1: 1, // 行1の昇順
 title: true
});



双方向ポインタ

ここでの双方向ポインタについて全般的な説明をします。

    var 配列 = [            ポインタ = [
         //     主キー        //  降順 昇順
          [ 0,  "DDD" ],       0  [ 4.  2],
          [ 1,  "FFF" ],       1  [ 2. 最大],
          [ 2,  "EEE" ],       2  [ 0.  1],
          [ 3,  "BBB" ],       3  [最小.  4],
          [ 4,  "CCC" ] ];     4  [ 3.  0] ],

配列は単一項目の主キーを持っています。
そのポインタは配列行に対応して、昇順・降順での次の行を示しています。

ポインタ0 は、配列0 に対応し、その主キーは DDD です。
ポインタ[0,1] = 2 は、DDD の次に大きいのが 2, すなわち EEE を指しています。
ポインタ[2,1] = 1 により 次に大きいのは FFF になります。
ポインタ[1,1] = "最大" は、 FFF が最大で、これより大きい列は存在しないことを示します。
以上から (0) DDD < (2) EEE < (1) FFF が得られます。
同様に降順では、
ポインタ[0,0] = 4 CCC
ポインタ[4,0] = 3 BBB
ポインタ[3,0] = "最小"
となり、(0) DDD > (4) CCC > (3) BBB が得られます。

双方向ポインタの創成
ポインタ = createPointer(配列, 主キー);  

配列の双方向ポインタを作成します。
主キーは単一の列項目とします。(複合単一キーは使えません)

    var 配列A = [          var 配列B = [            ポインタ = [
                                 ["列A","列B"],        //  降順 昇順
          [ 0,  "DDD" ],          [ 1,  "DDD" ],          0  [ 4.  2],
          [ 1,  "FFF" ],          [ 2,  "FFF" ],          1  [ 2. 最大],
          [ 2,  "EEE" ],          [ 3,  "EEE" ],          2  [ 0.  1],
          [ 3,  "BBB" ],          [ 4,  "BBB" ],          3  [最小.  4],
          [ 4,  "CCC" ] ];        [ 5,  "CCC" ] ];        4  [ 3.  0] ],

    (配列BTrace)  ポインタ = createPointerTrace(配列B, 1, "列B");
    (配列ARetur)  ポインタ = createPointer(配列, 0, 1);

双方向ポインタの検索値の検索結果
updatePointer(操作, 配列, 先頭行, 主キー, 検索要素, ポインタ); 
updatePointerTrace(操作, 配列, 先頭行, 主キー, 検索要素, ポインタ); 

操作
 "追加" 元配列の末尾に検索要素を追加。検索要素は元配列と同じ構成のベクトル(項目名の先頭行は存在しない)
 "削除" 元配列の一致行はそのままにしてポインタの値を "削除" とする。検索要素はスカラーの検索値
  "変更" 元配列の末尾に検索要素を追加し、元配列の一致行のポインタを "削除" とする。
先頭行
 配列の先頭行が列名であれば1。なければ0。検索要素には列名行はない。
主キー
 配列での主キー。これが検索キーになる。先頭行があるときは列名、ないときは列番号でA与える。
検索要素
 追加・変更では配列と同形式のベクトル(配列の1行)。元配列の末尾に追加される。
 削除では、検索値だけを与える。

    var 配列 = [             var ポインタ = [
         ["列A","列B"],     //   降順 昇順      ポインタ行
          [ 0,  "CCC" ],         [  3,    5  ],    // 0
          [ 1,  "FFF" ],         [  2,    4  ],    // 1
          [ 2,  "EEE" ],         [  5,    1  ],    // 2
          [ 3,  "BBB" ],         ["最小", 0  ],    // 3
          [ 4,  "GGG" ],         [  1, "最大"],    // 4
          [ 5,  "DDD" ] ];       [  0,    2  ] ];  // 5
updatePointer("追加", 配列, 1, "列B", [6,"AAA"], ポインタ); // 追加 元最小値より小
updatePointer("削除", 配列, 1, "列B", "BBB", ポインタ); // 削除 元最小値と一致
updatePointer("変更", 配列, 1, "列B", [6,"BBB"], ポインタ); // 変更 元最小値と一致
updatePointer("削除", 配列, 1, "列B", "CCC", ポインタ); // 削除 降順検索一致
updatePointer("変更", 配列, 1, "列B", [6,"CCC"], ポインタ); // 変更 降順検索一致
updatePointer("追加", 配列, 1, "列B", "CDE", ポインタ); // 追加 降順検索不一致
updatePointerTrace("追加", 配列, 1, "列B", [6,"HHH"], ポインタ); // 追加 元最大値より大
updatePointer("削除", 配列, 1, "列B", "GGG", ポインタ); // 削除 元最大値と一致
updatePointerTrace("変更", 配列, 1, "列B", [6,"GGG"], ポインタ); // 変更 元最大値と一致
updatePointer("削除", 配列, 1, "列B", "EEE", ポインタ); // 削除 昇順検索一致
updatePointer("変更", 配列, 1, "列B", [6,"EEE"], ポインタ); // 変更 昇順検索一致
updatePointer("追加", 配列, 1, "列B", [6,"FGH"], ポインタ); // 追加 昇順検索不一致
updatePointer("削除", 配列, 1, "列B"," FGH", ポインタ); // 削除エラー 不一致
updatePointer("追加", 配列, 1, "列B", [6,"GGG"], ポインタ); // 追加エラー 重複

双方向ポインタで,配列およびポインタの"削除"の行を削除
cleanPointer(配列, 先頭行, ポインタ); 

    var 配列 = [                  var ポインタ = [
         ["列A","列B"],
          [ 0,  "DDD" ],              [   3,     1 ],
          [ 1,  "FFF" ],              [   0,     4 ],
          [ 2,  "EEE" ], // 削除      [ "削除","削除"],
          [ 3,  "BBB" ],              [ "最小",  3 ],
          [ 4,  "CCC" ],              [   2,     0 ],
          [ 5,  "AAA" ], // 削除      [ "削除","削除"],
          [ 6,  "GGG" ] ];            [   1,   "最大"] ];
    var 先頭行 = 1;

    cleanPointer(配列, 先頭行, ポインタ);

Obj配列(Objectクラス2次元データ)

形式1(列名行なし)形式2(列名行あり)
通常の配列
Mtx1 = [
      // 先頭の列名行なし
      ["阿部", "工学部", 3, 4],
      ["井上", "文学部", 2, 3],
      ["宇田", "文学部", 4, 4]
     ];
Mtx2 = [
      ["氏名", "学部", "学年", "成績"],  // ←列名行
      ["阿部", "工学部",   3,      4],
      ["井上", "文学部",   2,      3],
      ["宇田", "文学部",   4,      4]
    ];
Obj配列
Obj1 = {};
    Obj1["阿部"] = ["工学部", 3, 4];
    Obj1["井上"] = ["文学部", 2, 3];
    Obj1["宇田"] = ["文学部", 4, 4];
Obj2 = {}; 
    Obj2.阿部 = { 学部:"工学部", 学年:3, 成績:4};
    Obj2.井上 = { 学部:"文学部", 学年:2, 成績:3};
    Obj2.宇田 = { 学部:"文学部", 学年:4, 成績:4};
要素記述(1)
変数なし
Obj1=[object Object]
Obj1['阿部']=工学部,3,4
Obj1.阿部=工学部,3,4
Obj1['阿部'][0]=工学部
Obj1.阿部[0]=工学部
Obj2=[object Object]
Obj2['阿部']=[object Object]
Obj2.阿部=[object Object]
Obj2['阿部']['学部']=工学部
Obj2['阿部'].学部=工学部
Obj2.阿部.学部=工学部
Obj2.阿部['学部']=工学部
要素記述(2)
変数あり
氏名="阿部"
属性名="学部"
Obj1[氏名]=工学部,3,4
Obj1.氏名=undefined
Obj1[氏名][0]=工学部
Obj1.氏名[0]=記法エラー
Obj2[氏名][属性名]=工学部
Obj2[氏名].学部=工学部
Obj2[氏名].属性名=undefined
Obj2.氏名.学部=記法エラー
Obj2['阿部'].属性名=undefined
Obj2.氏名.属性名=記法エラー

MtxToObj 通常配列→Obj配列 変換
  列名行なし: Obj配列 = MtxToObj1(通常配列); 
  列名行あり: Obj配列 = MtxToObj2(通常配列); 

形式1(列名行なし)
   var 通常配列 = [
      // 列名行なし
      ["阿部", "工学部",   3,      4],
      ["井上", "文学部",   2,      3],
      ["宇田", "文学部",   4,      4]
    ];
    var Obj配列 = MtxToObj1(通常配列);
形式2(列名行あり)
   var 通常配列 = [
      ["氏名", "学部", "学年", "成績"],  // ←列名行
      ["阿部", "工学部",   3,      4],
      ["井上", "文学部",   2,      3],
      ["宇田", "文学部",   4,      4]
    ];
    var Obj配列 = MtxToObj2(通常配列);
ここに Obj配列 が表示されます。確認のためであり、上表の要素記述のいくつかを表示します。
その構造は console.log(Obj配列) で出力しているので、コンソールで確認してください。

Obj配列を通常配列に変換
  通常配列 = ObjToMtx(Obj配列, 連想形式, 追加, 配列名);

次の形式のObj配列を通常の配列に変換します。
連想形式 = 1                      連想形式 = 2
  Obj1 = {}:              Obj2 = {}; 
    Obj1.阿部 = ["工学部", 3, 4];       Obj2.阿部 = { 学部:"工学部", 学年:3, 成績:4};
    Obj1.井上 = ["文学部", 2, 3];       Obj2.井上 = { 学部:"文学部", 学年:2, 成績:3};
    Obj1.宇田 = ["文学部", 4, 4];       Obj2.宇田 = { 学部:"文学部", 学年:4, 成績:4};

パラメタ
  Obj配列 必須 変換するObj配列変数
  連想形式 必須 1/2 上表参照
  追加   任意 省略時 = "none"
           "none" 単に 通常配列 m を戻すだけ
           "js"   別ウインドウに m を js形式で表示
           "csv"  別ウインドウに m を csv形式で表示
  配列名  任意 省略時 = "mtx"
           別ウインドウに表示するときの配列名

制約
  すべての行が同じ個数の列を持つこと
連想形式=1
 通常配列 = ObjToMtx(Obj配列, 1);
 通常配列 = ObjToMtx(Obj配列, 1, "js",  "abc");
 通常配列 = ObjToMtx(Obj配列, 1, "csv", "abc");
連想形式=2
 通常配列 = ObjToMtx(Obj配列, 2);
 通常配列 = ObjToMtx(Obj配列, 2, "js",  "abc");
 通常配列 = ObjToMtx(Obj配列, 2, "csv", "abc");
ここに 通常配列 が表示されます。確認のためであり、ObjToMtx での出力ではありません。

二次元Obj配列から行名・列名を得る
  [行名, 列名] = getKeyObj(Obj配列, 連想形式);

連想形式=1
    var Obj1 = {};
      Obj1.阿部 = ["工学部", 3, 4];
      Obj1.井上 = ["文学部", 2, 3];
      Obj1.宇田 = ["文学部", 4, 4];

    var 行名 = getKeyObj(Obj1, 1);

    // 行名 = ["阿部", "井上", "宇田"]

連想形式=2
    var Obj2 = {};
      Obj2.阿部 = { 学部:"工学部", 学年:3, 成績:4};
      Obj2.井上 = { 学部:"文学部", 学年:2, 成績:3};
      Obj2.宇田 = { 学部:"文学部", 学年:4, 成績:4};

    var [行名, 列名] = getKeyObj(Obj2, 2);

    // 行名 = ["阿部", "井上", "宇田"]
    // 列名 = ["学部", "学年", "成績"]


Map配列(Mapクラスの二次元連想配列)

通常配列
 行名
  ↓   '学部' '年齢' ←列名
 '阿部' '文学部' 20  ┐ 
 '井上' '工学部' 20  ┴要素
→
 MtxToMap
←
 MapToMtx
Map配列
  Map配列 = new Map( [
    ['阿部', new Map([ ['学部','文学部'], ['年齢',20] ])],
    ['井上', new Map([ ['学部','工学部'], ['年齢',20] ])]
  ]);

通常配列→Map配列
  Map配列 = MtxToMap(行名,列名,要素)


変換の概要が表示されます。
Map配列の構造は console.log(Map配列) を与えているので、コンソールで確認してください。

Map配列→通常配列
  [行名,列名,要素] = MapToMtx(Map配列)


変換の概要が表示されます。

JSONデータ ⇔ Obj配列
  JSONデータ = JSON.stringify(Obj配列);
  Obj配列 = JSON.parse(JSONデータ);

JSON.stringify / JSON.parse はブラウザに標準搭載されているので、自作する必要はありません(utility.js にはありません)。

ケース1(単純stringify)

    var Obj配列 = {}; 
        Obj配列.阿部 = { 学部:"文学部", 年齢:20};
        Obj配列.井上 = { 学部:"工学部", 年齢:21};
    var JSONデータ = JSON.stringify(Obj配列);
  // JSONデータ = '{"阿部":{"学部":"文学部","年齢":20},"井上":{"学部":"工学部","年齢":21}}'
    // (JSONデータは1行の文字列です。

ケース2(整形stringify)

    // ケース1では見にくいので次のように見やすく整形して表示します。  
    var JSON整形データ = JSON.stringify(Obj配列,undefined,4);  // 半角空白4個のインデント
    // 出力
    //  {
    //      "阿部" : {
    //          "学部" : "文学部",
    //          "年齢" : 20
    //      },
    //      "井上" : {
    //           "学部" : "工学部",
    //           "年齢" : 21
    //      }
    //  }

ケース3(単純parse)

    var JSONデータ = '{"阿部":{"学部":"文学部","年齢":20},"井上":{"学部":"工学部","年齢":21}}';
             // 1行の文字列なので、全体を ' ' で囲む
    var Obj配列 = JSON.parse(JSONデータ);
    // Obj配列 ができた確認  Obj配列.阿部.学部 = "文学部"

ケース4(整形parse)

    // ケース2でのJSON整形データを入力とする
    var JSON整形データ = `{    // 複数行を一つの文字列をするために ` ` で囲む 
             "阿部" : {
                  "学部" : "文学部",
              :
        }`;
    var JSONデータ = JSON整形データ.replace(/[\u0000-\u0019]+/g, ""); // 制御文字を除外して1行文字列にする
    var Obj配列 = JSON.parse(JSONデータ);  // ケース3と同じ
    // Obj配列 ができた確認  Obj配列.阿部.学部 = "文学部"

CsvToMtx 外部csvファイルを2次元配列にする

var 配列 = CsvToMtx(csxURL [, opt])
  opt に "yes" や 1 を与えると、配列を戻すだけでなく、入力ファイルの内容と配列を別ウインドウに表示する。

CSVファイルの条件

  • 文字コードは UTF-8 である。
  • 要素の中には「,」がない。
  • 数値要素は引用符で囲んでいない。文字列要素は囲まなくても囲んでもよい。
  • 入力データをそのまま配列にする、先頭行が列名行であってもそのまま配列にし、欠損値の対処もしていない。
  • 「,」を持たない行は空白行として読み飛ばす。

実行

  • ケース1 window出力なし
      var csvURL = "csv/test0.csv":
      var 配列 = CsvToMtx(csvURL);
  •   (ここでは確認のため、一部を赤字で出力している)
  • ケース2 window出力あり
      var csvURL = "csv/test0.csv":
      var 配列 = CsvToMtx(csvURL, "yes");
  • ケース3 外部ファイル指定
    csvURL


ローカルcsvファイルを2次元配列にする

csvArrayLocal()   csv→二次元配列
csvArrayLocalHush() csv→連想配列(Obj配列)

これらはは関数ではありません。自己完結のプログラムです。そのプログラムに移動します。