Yahoo! UI Library3（YUI3）の標準オブジェクト

Yahoo! UI Library Ver.3 を使ってみよう（3）

配列の操作

　配列に関する処理はモジュールyuiのクラスArrayにまとめられています。まず、配列処理の例題を見てみましょう。

クラスArrayの使い方

　配列を作成し、Arrayメソッドを使って指定要素番号以降を取り出します。リスト3を見てください。

［リスト3］クラスArrayのArrayメソッド（array0.html）

YUI().use('node', function(Y) {
    var list = new Array("日","月","火","水","木","金","土");
    var p = Y.Array(list,3);    （1）
    alert(p);
});

　（1）でlistのデータの3番目以降（水から）を取得します。以下の図1が実行結果です（要素番号は0から始まります）。

図1：array0.htmlの実行結果

　構文を示します。

［構文］クラスArrayのArrayメソッド

Y.Array（a,i）
  a:配列オブジェクト
  i:取り出す開始要素番号

　クラスArrayには他にどんなメソッドがあるのでしょうか。

Arrayメソッドの一覧表

　Arrayメソッド以外のメソッドの一覧表を示します。

Arrayのメソッド

メソッド	引数	概要
each(a,f)	a:配列,f:処理関数	配列内のデータを順番に取り出す
indexOf(a,val)	a:配列,val:値	配列のなかの文字列を検索して見つかった要素番号を返す
test()	なし	配列か、リストかをチェック

　表に挙げたメソッドの使い方を紹介したいと思います。

［リスト4］表のメソッドの使い方（array1.html）

    YUI().use('node', function(Y) {
        var a =10;
        var b = new Array("月","火","水","木","金","土","日");
        var c = new Array(3,5,1,8,2);

        Y.Array.each(b, function(v, k) {    //（1）ループ毎に月から火、水と表示
            alert(v);
        });
        
        var n = Y.Array.indexOf(b,'水');    //（2）2
        alert(n);

           var n0 = Y.Array.test(a);        //（3）0（配列ではない）
        alert(n0);

        var n1 = Y.Array.test(b);        //（4）1（配列）
        alert(n1);

        var n2 = Y.Array.test(c);        //（5）1（配列）
        alert(n2);

        var n3 = Y.Array.test(list);    //（6）0： リスト（ Y.on  Y.allで取得したリスト）
        alert(n3);
    });
}

　（1）のeachは配列の値を最初から順番に取り出します。処理関数の引数vは配列データの内容を、引数kは配列の要素番号になります。

　（2）はindexOfで、指定した値が入っている要素番号を返します。

　（3）以降はtestメソッドの例題です。配列ではないか、Y.on、Y.allで取得したリストの時は0を返し、Arrayで取得した配列は1を返します。

　リストと配列は、ほとんど同じ使い方ができます。たとえば、「他の人が開発したプログラムに処理を追加しなくてはいけなくなったとき、リストと配列ではプログラムの書き方が違うので、確認のためY.Array.test()を使ってみると、追加するための処理メソッドが見えてくる」という使い方もできると思います。