前端循环遍历的方法

前端中常会遇见数组、集合数据的遍历处理。简要介绍几种循环遍历的方法
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实现或者其他的工具类实现，就不做跟详细的介绍了