前端循环遍历的方法

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

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值