【jQuery】配列操作アレコレ

ほぼ、via jQueryクックブック。
配列操作は行う事が多いので、よく使うやつを抜き出してメモ。

配列（連想配列）とオブジェクトをループにかける

まずは基本形から。

javascript

$(function(){
    //月
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jan','Aug','Sep','Oct','Nov','Dec'];
     
    $.each(months,function(index,value){
        $('#months').append('<li>'+ value + '</li>');
    });
 
    //日 ※連想配列の場合の取り方
    var days = {Sun :0,Mon :1,Tue :2,Wed :3,Thu :4,Fri :5,Sat :6};
 
    $.each(days,function(key,value){
        $('#days').append('<li>' + key + '(' + value + ')</li>');
    });
 });

結果こうなる。

html

<ul id="months">
<li>Jan</li>
<li>Feb</li
><li>Mar</li>
<li>Apr</li>
<li>May</li>
<li>Jun</li>
<li>Jan</li>
<li>Aug</li>
<li>Sep</li>
<li>Oct</li>
<li>Nov</li>
<li>Dec</li>
</ul>

<ul id="days">
<li>Sun(0)</li>
<li>Mon(1)</li>
<li>Tue(2)</li>
<li>Wed(3)</li>
<li>Thu(4)</li>
<li>Fri(5)</li>
<li>Sat(6)</li>
</ul>

配列の重複値を削除して戻す

これも結構使う。

javascript

$(function(){
    //重複する配列を削除する
    var lis = ['りんご','ぶどう','メロン','みかん','オレンジ','ぶどう','りんご'];
    lis = $.unique(lis);
    console.log(lis);
});

結果。

["オレンジ", "みかん", "メロン", "ぶどう", "りんご"]

配列を抜き出して新しい配列をつくる

これ使って、リストの中から検索させるとかもできそうね。

javascript

$(function(){
    //月
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jan','Aug','Sep','Oct','Nov','Dec'];
 
    //頭が「J」の配列を抜き出して新しい配列を作る   
    months = $.grep(months,function(value,i){
        return ( value.indexOf('J') == 0);
    });
 
    //配列から1個ずつ取り出してリスト化
    $.each(months,function(index, value){
        $('#months').append('<li>' + months[index] + '</li>');
    });
});

結果。

html

<ul id="months">
<li>Jan</li>
<li>Jun</li>
<li>Jan</li>
</ul>