前端循環遍歷的方法

原創

2020-02-21 11:06

前端中常會遇見數組、集合數據的遍歷處理。簡要介紹幾種循環遍歷的方法
1、js的循環遍歷方法

1.1、普通for循環遍歷
var arr = ['Tom', 'Jerry', 'Lily', 'Xiao Ming'];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

1.2、for循環優化
var arr = ['Tom', 'Jerry', 'Lily', 'Xiao Ming'];
for (var i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

1.3、forEach,ES5推出
array.forEach(function(currentValue, index, arr), thisValue);
// index,arr可省略，thisValue可省略
arr.forEach(function(value, i){
　　console.log('forEach遍歷: 第【' + i + '】項的值爲：' + value);
})
arr.forEach((value, i) => console.log('forEach遍歷: 第【' + i + '】項的值爲：' + value));
forEach有一個問題就是既不能使用break語句中斷循環，也不能使用return語句返回到外層函數
可以通過try...catch結束
try {
    // 執行到第3次，結束循環
    arr.forEach(function(item,index){
        if (item == 'Lily') {
            throw new Error("End");
        }
        console.log(item); // Tom,Jerry
    });
} catch(e) {
    if(e.message!="End") throw e;
}

1.4、ES5推出的map這個高階函數也可以實現，他本身是傳一個函數，就不詳細敘述用法
1.5、for-of遍歷,或for-in遍歷，ES6新增功能
for (let i of arr) {
    console.log(i);
}
for (let i in arr) {
    console.log(i);
}
for...in和for...of的區別
for ... in循環將把屬性也包括在內，但Array的length屬性卻不包括在內。
for ... of修復了這些問題，它只循環集合本身的元素
比如可以加上 arr.name='xiao ming'，然後使用兩者循環輸出看看結果

2、jquery的循環遍歷方法

var arr = ['Tom', 'Jerry', 'Lily', 'Xiao Ming'];
$.each([arr, function(index, element) {
    alert('$.each()遍歷: 第【' + index + '】項的值爲：' + element);
});

參數i爲遍歷索引值，n爲當前的遍歷對象.

3、knockout的循環遍歷方法

// 對於knockout來說，很多人會不瞭解，項目上有用到，本來不打算加上，想了想還是加上了
ko.utils.arrayForEach(arr, function(element, index) {
    console.log(element)
});

ko.utils.arrayForEach源碼：
ko.utils.arrayForEach = function (array, action) {
    for (var i = 0, j = array.length; i < j; i++)
        action(array[i], i);
}
所以其實knockout可以做的可以直接使用js實現或者其他的工具類實現，就不做跟詳細的介紹了