各种For循环方法

小白时期搞什么都是For循环，敲的不亦乐乎。
然而数组Array遍历的方法有九种，面试时也多有被问到，所以分享给大家

  // W3School : http://www.w3school.com.cn/jsref/jsref_obj_array.asp

  Array.indexOf();
  Array.lastIndexOf();
  Array.every();
  Array.some();
  Array.forEach();
  Array.map();
  Array.filter();
  Array.reduce();
  Array.reduceRight();
  for-of(ES6);

在开发中也非常实用，更高效的操作数组，本文适合新手在撸一遍，请大神轻拍。

---

1. Array.indexOf();

indexOf()方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。

使用for：

var arr = [ 'apple' , 'orange' , 'pear' ];
var flag = false;

for(var i = 0,l = arr.length; i

使用Array.indexOf():

var arr = [ 'apple' , 'orange' , 'pear' ];

var flag=arr.indexOf('orange');

console.log(flag != -1);
//true

2. Array.lastIndexOf();

和indexOf一样,从后向前查询,indexOf是从前向后查询;

3. Array.every();

检查数组中的每一项是否符合条件

使用for:

var arr=[1,2,3,4,-1,2];

function every(arr){
  for(var i = 0,l = arr.length; i

使用Array.every():

var arr=[1,2,3,4,-1,2];

var flag = arr.every(function(item, index){
  return item > 0
})
console.log(flag)
//false

4. Array.some();

检查数组中的某一项是否符合条件

使用for:

var arr=[1,2,3,4,-1,2];

function every(arr){
  for(var i = 0,l = arr.length; i

使用Array.some():

var arr=[1,2,3,4,-1,2];

var flag = arr.some(function(item, index){
  return item < 0
})
console.log(flag)
//true

5. Array.forEach();

遍历数组,代替for

使用for:

var arr = [1,2,3,4,5,6];

for(var i = 0,l = arr.length; i < l; i++){
  console.log(arr[i]);
  //1
  //2
  //3
  //.....
}

使用Array.forEach():

var arr = [1,2,3,4,5,6];

arr.forEach(function(val,index,arr){
    console.log(val);//1,2,3....
    console.log(index);//下标
    console.log(arr);//原数组
})

6. Array.map();

对数组进行操作,返回一个新数组,在处理服务器数据时经常使用

使用for:

var arr = [1,2,3,4,5,6];

function map(arr){
    var arr2=[];
    for(var i = 0,l = arr.length; i < l; i++){
        arr2[i] = arr[i] + 1;
    }
    return arr2;
}
console.log(map(arr));
//2,3,4,5,6,7

使用Array.map():

var arr = [1,2,3,4,5,6];
var arr2=arr.map(function(val,index){
    return val + 1
})
console.log(arr2)
//2,3,4,5,6,7

map()和forEach()的区别:
map()可以使用return返回一个新的数组,而forEach不可以使用return;
return是返回一个修改的数组的副本,对原数组没有影响;
两个都可以对第三个参数原数组进行修改,可以对原数组修改;

var arr = [1,2,3,4];

arr.forEach(function(val,index,arr){
    arr[index] = "123"
})

console.log(arr);

// "123", "123", "123", "123", "123", "123"

7. Array.filter();

返回一个新的匹配条件的数组

使用for:

var arr = [1,2,3,4,5,-1];

function filter(arr){
    var arr2 = [];
    for(var i = 0,j = arr.length; i++){
        if(arr[i] < 0){
            arr2.push(arr[i])
        }
    }
}

console.log(filter(arr));
//-1

使用Array.filter():

var arr = [1,2,3,4,5,-1];

var arr2=arr.filter(function(val,index,arr){
    return val < 0;
})

console.log(arr2);
//-1

8. Array.reduce();

接受一个回调函数作为累加器,最终返回一个值.
arr.reduce(callback[, initialValue])

• callback(回调函数,接收四个参数)
  • previousValue(上次调用的回调函数的返回值,或初始值)
  • currentValue(目前正在处理的函数元素)
  • index(正在处理的元素下标)
  • array(调用reduce方法的数组)
• initialValue(可选的初始值,作为第一次使用传给previousValue)

有点晦涩难懂,看案例吧

a). 求最大数:

var arr = [1,2,3,4];
var flag=arr.reduce(function(pre,cur,index,arr){
    return pre>cur?pre:cur;
})
console.log(flag)
//4

b). 求和:

var arr = [1,2,3,4];
var flag=arr.reduce(function(pre,cur,index,arr){
    return pre+cur
})
console.log(flag)
//10

c). 乘积

var arr = [1,2,3,4];
var flag=arr.reduce(function(pre,cur,index,arr){
    return pre*cur
})
console.log(flag)
//24

reduce就是为这种累加操作设计的,那么initialValue参数有什么用呢?
我理解的是用来代替previousValue成为第一个参数

var arr = [1,2,3,4];

var flag=arr.reduce(function(pre,cur,index,arr){
    return pre+cur
},100)

console.log(flag)
//110

9. Array.reduceRight():

用法和参数和reduce一样,不同的是reduce是升序,而reduceRight是降序

10. for-of循环(ES6):

forEach好用但是不可以中断循环
for-in可以遍历'enumerable'对象,不推荐用来遍历数组,数组的 index 跟普通的对象属性不一样，是重要的数值序列指标。

for-of是ES6引入的一种新方法,比普通for循环简单,也弥补了forEach和for-in的缺点

for (var value of myArray) {
    console.log(value);
}

for-of可以循环很多种数据类型(数组,对象,字符串等)

---