遍历

最新更新: 2020-01-02 19:29:23 阅读: 37次

以下es5遍历

1、for循环


var arr=[1,3,5,65,45,7];
for (var i=0,len=arr.length;i<len;i++){
    console.log(arr[i])
}
支持break(跳出循环),continue(跳过当前)



2、forEach 遍历


arr.forEach(function (val,i) {
    console.log(i,val);
})
不支持break(跳出循环),continue(跳过当前),值为空时,跳过该项


如下:


arr.forEach(function (val,i) {
    console.log(i,val);
    if(i===2){
        break;
    }
})

 Uncaught SyntaxError: Illegal break statement
    at Array.forEach (<anonymous>)
    at ergodic.js:6

3、every



arr.every(function (val,i) {
    console.log(val,i)
})
结果:1 0


只执行第一个,需返回ture,才往下执行,可以用every实现跳过和退出效果(弥补forEach不能跳过和退出)

通过return false 实现退出效果,不做处理实现跳过处理

1)退出


arr.every(function (val,i) {
    if(i===3) return false;
    console.log(val,i)
    return true;
})
结果:


1 0
 3 1
 5 2
2)跳过


arr.every(function (val,i) {
    if(i!==3) {
        console.log(val,i)
    }
    return true;
})
结果:


1 0
 3 1
 5 2
 45 4
  7 5

4、for in (为object做遍历其属性也会被遍历)


for (var i in arr){
    console.log(i,arr[i]);
}
结果:
 0 1
 1 3
 2 5
 3 65
 4 45
 5 7
如果为数组arr添加其他属性(不是数字),属性名和值也能遍历出来
5、reduce 



arr.reduce(callback,[initialValue])
callback (执行数组中每个值的函数,包含四个参数)

    1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
    2、currentValue (数组中当前被处理的元素)
    3、index (当前元素在数组中的索引)
    4、array (调用 reduce 的数组)

initialValue (作为第一次调用 callback 的第一个参数。)



var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
结果:


1 3 1
 4 5 2
 9 65 3
 74 45 4
 119 7 5
 (6) [1, 3, 5, 65, 45, 7] 126

这里可以看出,上面的例子index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是6,但是reduce函数循环5次。

再看下一个例子:


var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0) //注意这里设置了初始值
console.log(arr, sum);


结果:

0 1 0
1 3 1
 4 5 2
 9 65 3
 74 45 4
119 7 5
 (6) [1, 3, 5, 65, 45, 7] 126




这个例子index是从0开始的,第一次的prev的值是我们设置的初始值0,数组长度是6,reduce函数循环6次。

结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

注意:如果这个数组为空,运用reduce是什么情况?


var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
//报错,"TypeError: Reduce of empty array with no initial value"
但是要是我们设置了初始值就不会报错,如下:



var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60



更多详情,参考:https://www.jianshu.com/p/e375ba1cfc47