2009年12月11日 星期五

JavaScript 陣列 v.s 物件 v.s. JSON的使用

Jquery也用了好一陣子了,但對javascript的陣列和物件總是不清楚那裡不一樣,跟JSON又有什麼不同?看來想要搞懂JSON之前,要來把陣列和物件分清楚先…  

宣告陣列

var arr = [];    //空陣列
var arr = new Array();
var arr = Array();

宣告陣列的同時將資料放入
var arr = ["value1", "value2", "value3"];    //直接給定值
var arr = new Array("value1", "value2", "value3");    //使用new建構子來建立陣列變數
var arr = Array("value1", "value2", "value3");        //使用函數來建立
陣列的存取
arr[0] = "value1";
arr[1] = "value2";
arr.push("value3"); //附加元素至陣列的末端

陣列的取值方式
for (var i = 0; i < arr.length; i++) {
    $('body').append(i +" => "+ arr[i] + " " );
}
$.each(arr,function(index){
   $('body').append( index + " => " + this +" ");
});

發現和PHP不一樣的地方,Javascript的陣列無法在建立時給值時自定索引值,而是一律用預設的索引值0,1,2,如果想要自定索引值,而且是字串型態就得用另一外主角-物件(Object)啦…
不過抱持研究的精神還是自行來try try看到底自定字串的索引行不行…
無法初始化,那就先宣告完,再給值看看
var arr = [];
arr["key1"] = "value1";
arr["key2"] = "value2";
arr["key3"] = "value3";
for (var i = 0; i < arr.length; i++) { 

    $('body').append(i +" => "+ arr[i] +" " );
}

似乎是可以捉的到值,但是用length捉總共的筆數時卻得到0,
看來Array還是不承認用字串索引的元素啊,感覺像是私生子啊…^^||

 for (var i = 0; i < arr.length; i++) {
    $('body').append(i +" => "+ arr[i] +" " );
}

結論目前看來只要不用length來捉陣列的長度,用for in或是each的迴圈還是可以正常運作的樣子…
物件(objects):
宣告物件

var obj1 = { key1:'value1',key2:'value2',key3:'value3' }; //以大括弧包起來
var obj2 = { 1:'value1',2:'value2',3:'value3'};

取值的方法有兩種,obj.x或是obj[x],但是要注意如果索引值是數字的話,用obj.x是無法取值的喔…
取值 for in
$('body').append( obj2[1] );
用for in取值時一定要用obj[x]的方法,用.的方式取值都會是undefined
for (var x in obj1){
    $('body').append(x +" => "+ obj1.x +" " );
}
for (var x in obj2){
    $('body').append(x +" => "+ obj2.x +" " );
}

用Jquery的 $.each 似乎是最方便的方式

$.each(obj1,function(index){
    $('body').append( index + " => " + this +" ");                       
});
$.each(obj2,function(index){
    $('body').append( index + " => " + this +" ");                       
});

最後是JSON了…陣列中的元素可是字串,數字也可以是物件,將物件放入一個陣列中,其實就是JSON啦…
var obj2 = [{ one:1, two:2, three:3, four:4, five:5 },{ 'key1':'Red','key2':'Green','key3':'Blue' }];
取值一
for (var x in obj2){    
    for(var y in obj2[x] )
        $('body').append(x+" "+ y + " => "+ obj2[x][y] + " ");    
}
取值二
$.each(obj2,function(index){
    $.each(this,function(index){
        $('body').append( index + " => "+ this + " ");                     
    });
});

1 則留言:

  1. 給你一個讚, 讀起來舒適也易理解, 謝謝你的知識分享

    回覆刪除