為了方便例子講解，現有陣列和json物件如下
|
1 2 3 4 5 6 7 8 9 |
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular' }; |
for
可以直接看示例，用得太多了，很簡單
|
1 2 3 4 5 6 7 8 9 10 |
(function() { for(var i=0, len=demoArr.length; i<len; i++) { if (i == 2) { // return; // 函式執行被終止 // break; // 迴圈被終止 continue; // 迴圈被跳過 }; console.log('demo1Arr['+ i +']:' + demo1Arr[i]); } })(); |
關於for迴圈，有一下幾點需要注意
- for迴圈中的
i在迴圈結束之後任然存在與作用域中，為了避免影響作用域中的其他變數，使用函式自執行的方式將其隔離起來()(); - 避免使用
for(var i=0; i 的方式，這樣的陣列長度每次都被計算，效率低於上面的方式。也可以將變數宣告放在for的前面來執行，提高閱讀性
|
1 2 |
var i = 0, len = demo1Arr.length; for(; i<len; i++) {}; |
- 跳出迴圈的方式有如下幾種
- return 函式執行被終止
- break 迴圈被終止
- continue 迴圈被跳過
for in
for(var item in arr|obj){} 可以用於遍歷陣列和物件
- 遍歷陣列時，item表示索引值， arr表示當前索引值對應的元素 arr[item]
- 遍歷物件時，item表示key值，arr表示key值對應的value值 obj[item]
|
1 2 3 4 5 6 7 8 9 10 11 |
(function() { for(var i in demoArr) { if (i == 2) { return; // 函式執行被終止 // break; // 迴圈被終止 // continue; // 迴圈被跳過 }; console.log('demoArr['+ i +']:' + demoArr[i]); } console.log('-------------'); })(); |
關於for in，有以下幾點需要注意：
- 在for迴圈與for in迴圈中，
i值都會在迴圈結束之後保留下來。因此使用函式自執行的方式避免。 - 使用return，break，continue跳出迴圈都與for迴圈一致，不過關於return需要注意，在函式體中，return表示函式執行終止，就算是迴圈外面的程式碼，也不再繼續往下執行。而break僅僅只是終止迴圈，後面的程式碼會繼續執行。
|
1 2 3 4 5 6 7 8 9 10 11 |
function res() { var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; for(var item in demoArr) { if (item == 2) { return; }; console.log(item, demoArr[item]); } console.log('desc', 'function res'); //不會執行 } |
forEach
demoArr.forEach(function(arg) {})
引數arg表示陣列每一項的元素，例項如下
|
1 2 3 4 5 6 7 8 |
demoArr.forEach(function(val, index) { if (e == 'CSS3') { return; // 迴圈被跳過 // break; // 報錯 // continue;// 報錯 }; console.log(val, index); }) |
具體有以下需要注意的地方
- 回撥函式中有2個引數，分別表示值和索引，這一點與jQuery中的$.each相反
- forEach無法遍歷物件
- forEach無法在IE中使用，firefox和chrome實現了該方法
- forEach無法使用break，continue跳出迴圈，使用return時，效果和在for迴圈中使用continue一致
- 最重要的一點，可以新增第二引數，為一個陣列，而且回撥函式中的this會指向這個陣列。而如果沒有第二引數，則this會指向window。
|
1 2 3 4 |
var newArr = []; demoArr.forEach(function(val, index) { this.push(val); // 這裡的this指向newArr }, newArr) |
雖然在原生中forEach迴圈的侷限性很多，但是瞭解他的必要性在於，很多第三方庫會擴充套件他的方法，使其能夠應用在很多地方，比如angular的工具方法中，也有forEach方法，其使用與原生的基本沒有差別，只是沒有了侷限性，可以在IE下使用，也可以遍歷物件
|
1 2 3 4 |
var result = []; angular.forEach(demoArr, function(val, index) { this.push(val); }, result); |
do/while
函式具體的實現方式如下，不過有一點值得注意的是，當使用continue時，如果你將i++放在了後面，那麼i++的值將一直不會改變，最後陷入死迴圈。因此使用do/while一定要小心謹慎一點。
不建議使用do/while的方式來遍歷陣列
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 直接使用while (function() { var i = 0, len = demoArr.length; while(i < len) { if (i == 2) { // return; // 函式執行被終止 // break; // 迴圈被終止 // continue; // 迴圈將被跳過，因為後邊的程式碼無法執行，i的值沒有改變，因此迴圈會一直卡在這裡，慎用！！ }; console.log('demoArr['+ i +']:' + demoArr[i]); i ++; } console.log('------------------------'); })(); // do while (function() { var i = 0, len = demo3Arr.length; do { if (i == 2) { break; // 迴圈被終止 }; console.log('demo2Arr['+ i +']:' + demo3Arr[i]); i++; } while(i<len); })(); |
$.each
$.each(demoArr|demoObj, function(e, ele))
可以用來遍歷陣列和物件，其中e表示索引值或者key值，ele表示value值
|
1 2 3 |
$.each(demoArr, function(e, ele) { console.log(e, ele); }) |
輸出為
|
1 2 3 4 5 6 |
0 "Javascript" 1 "Gulp" 2 "CSS3" 3 "Grunt" 4 "jQuery" 5 "angular" |
這裡有很多需要注意的地方
- 使用
return或者return true為跳過一次迴圈，繼續執行後面的迴圈 - 使用
return false為終止迴圈的執行，但是並不終止函式執行 - 無法使用break與continue來跳過迴圈
- 迴圈中this值輸出類似如下
|
1 2 3 4 5 |
console.log(this); //String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"} console.log(this == ele); // true |
- 關於上面的this值，遍歷一下
|
1 2 3 4 5 6 7 8 |
$.each(this, function(e, ele) { console.log(e, ele); }) // 0 c // 1 s // 2 s // 4 3 |
為什麼length 和 [[PrimitiveValue]]沒有遍歷出來？突然靈光一動，在《javascript高階程式設計》中找到了答案，大概意思就是javascript的內部屬性中，將物件資料屬性中的
Enumerable設定為了false
|
1 2 3 |
// 檢視length的內部屬性 console.log(Object.getOwnPropertyDescriptor(this, 'length')); // Object {value: 4, writable: false, enumerable: false, configurable: false} |
$.each 中的
$(this)與this有所不同，不過遍歷結果卻是一樣，你可以在測試程式碼中列印出來看看
$(selecter).each
專門用來遍歷DOMList
|
1 2 3 4 5 6 7 8 |
$('.list li').each(function(i, ele) { console.log(i, ele); // console.log(this == ele); // true $(this).html(i); if ($(this).attr('data-item') == 'do') { $(this).html('data-item: do'); }; }) |
- i: 序列值 ele: 只當前被遍歷的DOM元素
- this 當前被遍歷的DOM元素，不能呼叫jQuery方法
- $(this) == $(ele) 當前被遍歷元素的jquery物件，可以呼叫jquery的方法進行dom操作
使用for in 遍歷DOMList
因為domList並非陣列，而是一個物件，只是因為其key值為0，1，2… 而感覺與陣列類似，但是直接遍歷的結果如下
|
1 2 3 4 5 6 7 8 9 10 |
var domList = document.getElementsByClassName('its'); for(var item in domList) { console.log(item, ':' + domList[item]); } // 0: // 1: // ... // length: 5 // item: function item() {} // namedItem: function namedItem() {} |
因此我們在使用for in 遍歷domList時，需要將domList轉換為陣列
|
1 2 |
var res = [].slice.call(domList); for(var item in res) {} |
類似這樣的物件還有函式的屬性arguments物件，當然字串也是可以遍歷的，但是因為字串其他屬性的
enumerable被設定成了false，因此遍歷出來的結果跟陣列是一樣的，也就不用擔心這個問題了.
小補充
如果你發現有些人寫函式這樣搞，不要驚慌，也不要覺得他高大上鳥不起
|
1 2 3 4 5 |
+function(ROOT, Struct, undefined) { ... }(window, function() { function Person() {} }) |
()(), !function() {}() +function() {}() 三種函式自執行的方式^_^
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
