javascript浅谈循环

javascript浅谈循环

对于javascript中，有很多写循环的方法，每个方法是什么样的呢，突发奇想，搞一下全部的循环方法：

for循环
for循环应该是咱们写代码最开始的时候，最熟悉的方法了，简单罗下代码：

var arr = ['tom', 'jack', 'lily', 'marry'];
for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
}

ok ,毫无疑问，输出的就是：

tom
jack
lily
marry

---

forEach循环
forEach循环，应该来说是数组特有的方法,调用方式也很简单，数组直接调用forEach方法，里面传递一个函数，该函数有三个参数：第一个参数是当前遍历到的对象，即上面for循环当中的arr[i]；第二个参数是当前遍历到了第几个，即上面for循环当中的i；第三个参数就是当前调用forEach方法的数组，即上面的arr。好的，下面罗代码：

var arr = ['tom', 'jack', 'lily', 'marry'];
arr.forEach(function(item, index, array){
   console.log(item + '的索引是' + index + '在数组[' + array + ']中');
})

ok ,这个也没有问题，输出的是：

tom的索引是0在数组[tom,jack,lily,marry]中
jack的索引是1在数组[tom,jack,lily,marry]中
lily的索引是2在数组[tom,jack,lily,marry]中
marry的索引是3在数组[tom,jack,lily,marry]中

---

for in循环
for-in 循环，这个事就有点大了，这个玩意，数组可以用，对象也可以用；综合来说，可以这么理解，按照使用方法:

for(var index in obj){
//do something
}

首先，index可以理解为索引，obj[index]理解为值，就是所谓的key-value对，在数组中，也可以理解为是一个对象，数组中的key为0,1,2,3….，值为数组中真实对应的值。

var arr = ['tom', 'jack', 'lily', 'marry'];
for(var index in arr){
    console.log('数组arr中索引为'+index+'的值为'+arr[index]);
}

ok ,输出如下：

数组arr中索引为0的值为tom
数组arr中索引为1的值为jack
数组arr中索引为2的值为lily
数组arr中索引为3的值为marry

接下来看对象的输出：

var obj = {name: 'tom',age: 12};
for(var index in obj){
    console.log('在对象obj中'+index+'的值为：'+obj[index]);
}

ok,输出大家应该都知道，如下：

在对象obj中name的值为：tom
在对象obj中age的值为：12

---

map循环

map循环，应该来说是数组特有的方法,调用方式也很简单，数组直接调用map方法，里面传递一个函数，该函数有三个参数：第一个参数是当前遍历到的对象，即上面for循环当中的arr[i]；第二个参数是当前遍历到了第几个，即上面for循环当中的i；第三个参数就是当前调用forEach方法的数组，即上面的arr。好的，下面罗代码：

var arr = ['tom', 'jack', 'lily', 'marry'];
arr.map(function(item, index, array){
   console.log(item + '的索引是' + index + '在数组[' + array + ']中');
})

ok ,这个也没有问题，输出的是：
tom的索引是0在数组[tom,jack,lily,marry]中
jack的索引是1在数组[tom,jack,lily,marry]中
lily的索引是2在数组[tom,jack,lily,marry]中
marry的索引是3在数组[tom,jack,lily,marry]中

到这个地方，大家可能有一个疑问，那么forEach和map方法这不是一样吗，为什么会有两个一样的方法存在呢，ok，讲一下，这两个方法不一样，在forEach运行结束后，不会返回任何东西，像他的名字一样简单，就只是循环；但是map方法会返回一个新的数组，如果不返回是与forEach方法一样的，如果返回就返回一个新的数组：

var arr2 = [1,2,3,4];
var result = arr2.map(function(item, index, array){
    return item * 2;
});
console.log(result);

输出一下；
[2, 4, 6, 8]

好的，大家看到它与forEach的不同了吧，如有疑问，可以运行一下forEach方法return后的结果是什么。

filter

顾名思义，filter函数就是一个过滤器的作用，遍历取出所有符合条件的元素组成一个新的数组,此方法为数组专用。
filter方法里面接收一个函数作为参数，该函数的参数与上面讲到的forEach相同，不做多说，罗代码：

var arr = [1,2,3,4];
var result = arr.filter(function(item,index,array){
    return item % 2 == 0;
});
console.log(result);

上面的函数的作用就是取出数组中所有的偶数集合放到result中。运行结果如下：

[2, 4]

some与every

其实这两个函数，我是不想写的，因为这个函数的名字就表达了它的作用。
some、every的参数与filter函数的参数一样，返回结果就是获取当前数组的元素是否有一个、全部满足条件。废话不多说，直接罗代码：

var arr = [1,2,3,4];
var some = arr.some(function(item,index,array){
    return item >=4;
});
console.log(some);
var every = arr.every(function(item,index,array){
    return item >=4;
});
console.log(every);

运行结果如下：
true
false

可以看出some和every函数传进去的函数是一样的，就是判断数组离得元素是否大于等于4；some判断的结果就是true，说明存在元素满足大于或等于4的条件；every判断的结果是false，说明不是所有的元素都满足大于或等于4的条件。

reduce

这是一个大家不是特别常用的方法，这个方法的参数是一个函数和一个初始值，这个函数可以接收4个参数，这四个参数的意思是：
第一个参数：前面运行得到的结果，初始值是数组中第一个元素的值；
第二个参数：抛弃第一个元素后的数组的索引值；
第三个元素：当前正在操作的第二个参数在数组中的索引，从1开始；
第四个元素：当前的数组。
对于reduce函数的第二个参数，就是初始值，如果不传就是数组中第一个元素的值，咱们来看下不传的情况是什么样的。
好，到了罗代码的时间：

var arr = ['we','are','good','friends'];
var sum = arr.reduce(function(result,item,index,array){
    console.log(result,item,index,array);
    return result + ' ' + item;
});
console.log('sum:'+sum);

ok ,接下来看运行结果：

we are 1 ["we", "are", "good", "friends"]
we are good 2 ["we", "are", "good", "friends"]
we are good friends 3 ["we", "are", "good", "friends"]
sum:we are good friends

接下来，看下传那个初始值的情况，这种情况下，reduce方法中传递的函数的参数就有点区别了：
第一个参数：前面运行得到的结果，初始值是传递进来的初始值；
第二个参数：当前遍历的数组的索引值；
第三个元素：当前正在操作的第二个参数在数组中的索引，从0开始；
第四个元素：当前的数组。
ok，你猜对了，又到了罗代码的时间：

var arr = ['we','are','good','friends'];
var sum = arr.reduce(function(result,item,index,array){
    console.log(result,item,index,array);
    return result + ' ' + item;
},'hello!');
console.log('sum:'+sum);

你没看错，传递了一个初始值为’hello!’的字符串进去。接下来，咱们看运行结果：

hello! we 0 ["we", "are", "good", "friends"]
hello! we are 1 ["we", "are", "good", "friends"]
hello! we are good 2 ["we", "are", "good", "friends"]
hello! we are good friends 3 ["we", "are", "good", "friends"]
sum:hello! we are good friends

还好，没有说错，哈哈，我也是个菜鸟。。。

reduceRight
reduceRight这个函数是与reduce相对的函数，它与reduce的不同之处就是倒着遍历这个数组的元素，其他的基本相同，想试的可以试下，不多说咯。。。