以for遍歷json的超基礎練習

最近重拾coding的起步，是從以往想得不是很清楚的基礎開始砍掉重練。考慮到未來會需要學習NoSQL資料庫，JSON的熟悉度勢必要提升；以往JSON都是使用在.ajax資料互丟，結構相對簡單、也沒有太多需要處理的地方，因此練習的第一課，就先從以for把所有JSON的資料掃出來開始。

基本語法

for的語法先複習一下：

for (var i = 0; i < 5; i++) { 
    console.log(i)
}
//第一個參數為遍歷起點；第二個參數為終點；第三個參數為每次遍歷的間隔
//i = i+1 a.k.a. i++表示遍歷每一個內容；i = i+2則會遍歷偶數個內容

console印出來為01234，若i = i+2則印出來為024。

陣列

接著複習for一個陣列：

var arrayString = ''
var array = []
array = ['apple', 'banana', 'citrus', 'dog', 'elephant']
for (i = 0; i < array.length; i++) { //.length取得array的數量
    console.log(array[i]) //單獨印出陣列的每一項內容
    arrayString += array[i] + ' / ' 
    //+=為重複為該變數加入內容
}
console.log(arrayString) //把內容整理成比較容易閱讀的字串

執行結果會是：
apple
banana
citrus
dog
elephant
apple / banana / citrus / dog / elephant /

JSON

最後來練習for一個JSON，首先準備一個JSON物件：

var superHeroes = new Object()
superHeroes = {
    team: 'Avengers',
    members: [{
        name: 'Ironman',
        age: 45,
        skill: ['fly', 'gun', 'genius brain', 'shield']
    }, {
        name: 'Spiderman',
        age: 17,
        skill: ['wallwalk', 'web', 'flexibility']
    }, {
        name: 'Hulk',
        age: 'unknown',
        skill: ['power', 'jump']
    }],
    location: 'Earth'
}

members裡面放了三個超級英雄，各自對應有不同的name、age、skill，其中skill因是複數所以存成array。練習的目的是除了把英雄的資本資料都列出來，還需要再把各自的skill列在該英雄的基本資料裡；如此一來就可以練習兩層的for：第一層把所有的英雄列出來、第二層再於該英雄下把skill印出來：

function printHeroes(jsonObj){ //建立printHeroes的函式
    console.log('We are ' + jsonObj['team']) //先印出團隊名字
    var user = jsonObj['members']  
    //取出JSON裡面的members存到變數user
    //此時user是一個array，裡面有三組值
    
    for (i = 0; i < user.length; i++) {  //把user的三組值遍歷出來
        console.log('--We have ' + user[i]['name'] + ', age: ' + user[i]['age'] + ', and with skills like: ')
        //先印出每一個英雄的name、age

        var userSkill = user[i]['skill']
        //再把每個英雄的skill存到變數userSkill
        //此時userSkill是一個array，裡面有2~4個值不等

        //下層for變數不能再重複使用i
        for (j = 0; j < userSkill.length; j++) {  //把userSkill的幾組值遍歷出來
            console.log(userSkill[j])  //印出這些skill內容
        }
    }
    console.log('We protect ' + jsonObj['location'])  //沒有意義只是好玩
}
printHeroes(superHeroes) //呼叫函式

印出來的結果是：

We are Avengers
–We have Ironman, age: 45, and with skills like:
fly
gun
genius brain
shield
–We have Spiderman, age: 17, and with skills like:
wallwalk
web
flexibility
–We have Hulk, age: unknown, and with skills like:
power
jump
We protect Earth

如此一來就完成JSON所有資料的遍歷了。超基礎，但還是紀錄一下自己的理解過程。