JavaScript 的 for 與 for-in 迴圈

巡覽陣列內容元素時,通常會透過 for 迴圈進行操作,例如以下的程式碼:

var values = ['HTML', 'JavaScript', 'CSS', 'jQuery', 'Bootstrap'];

for ( i = 0; i < values.length; i++) {
     console.log(values[i]);
}

其中透過索引值 i 列舉陣列 values 的所有元素內容,並將其逐一輸出。你也可以選擇利用 for-in 進行相同的運算:

for (key in values) {
     console.log(values[key]);
}

這兩段的結果完全相同,其中要注意的是, for-in 取出的 key 是索引鍵,而非值,因此必須將其傳入[] 以取出對應的陣列元素,這個特性可以進一步延伸至物件 key 的讀取,例如以下的程式碼:

var tobject = {
"ta" : 'HTML',
"tb" : 'JavaScript',
"tc" : 'CSS',
"td" : 'jQuery',
"te" : 'Bootstrap'
}; 
for (key in tobject) {
console.log(key)
} ;
for (key in tobject) {
console.log(tobject[key])
} ;

其中的 tobject 是一個資料物件,包含了 5 組 key/value ,第一個 for 迴圈逐一取出其中的 key 並且輸出於畫面上,第二個 for 迴圈則透過 key 取出對應的 value ,因此輸出結果如下:

ta
tb
tc
td
te
HTML
JavaScript
CSS
jQuery
Bootstrap





沒有留言: