小白時(shí)期搞什么都是For循環(huán)，敲的不亦樂(lè)乎。
然而數(shù)組Array遍歷的方法有九種，面試時(shí)也多有被問(wèn)到，所以分享給大家

  // 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);

在開(kāi)發(fā)中也非常實(shí)用，更高效的操作數(shù)組，本文適合新手在擼一遍，請(qǐng)大神輕拍。

1. Array.indexOf();

indexOf()方法返回在該數(shù)組中第一個(gè)找到的元素位置，如果它不存在則返回-1。

使用for：

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

for(var i = 0,l = arr.length; i<l; i++){
     if(arr[i] === 'orange'){
          flag = true;
     }
}
console.log(flag);
//true

使用Array.indexOf():

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

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

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

2. Array.lastIndexOf();

和indexOf一樣,從后向前查詢(xún),indexOf是從前向后查詢(xún);

3. Array.every();

檢查數(shù)組中的每一項(xiàng)是否符合條件

使用for:

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

function every(arr){
  for(var i = 0,l = arr.length; i<l; i++){
    if(arr[i] < 0){
        return false
    }
    return true
  }
}
console.log(every(arr))
//false

使用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();

檢查數(shù)組中的某一項(xiàng)是否符合條件

使用for:

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

function every(arr){
  for(var i = 0,l = arr.length; i<l; i++){
    if(arr[i] < 0){
        return true
    }
    return false
  }
}
console.log(every(arr))
//true

使用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();

遍歷數(shù)組,代替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);//下標(biāo)
    console.log(arr);//原數(shù)組
})

6. Array.map();

對(duì)數(shù)組進(jìn)行操作,返回一個(gè)新數(shù)組,在處理服務(wù)器數(shù)據(jù)時(shí)經(jīng)常使用

使用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()的區(qū)別:
map()可以使用return返回一個(gè)新的數(shù)組,而forEach不可以使用return;
return是返回一個(gè)修改的數(shù)組的副本,對(duì)原數(shù)組沒(méi)有影響;
兩個(gè)都可以對(duì)第三個(gè)參數(shù)原數(shù)組進(jìn)行修改,可以對(duì)原數(shù)組修改;

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();

返回一個(gè)新的匹配條件的數(shù)組

使用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();

接受一個(gè)回調(diào)函數(shù)作為累加器,最終返回一個(gè)值.
arr.reduce(callback[, initialValue])

• callback(回調(diào)函數(shù),接收四個(gè)參數(shù))
  • previousValue(上次調(diào)用的回調(diào)函數(shù)的返回值,或初始值)
  • currentValue(目前正在處理的函數(shù)元素)
  • index(正在處理的元素下標(biāo))
  • array(調(diào)用reduce方法的數(shù)組)
• initialValue(可選的初始值,作為第一次使用傳給previousValue)

有點(diǎn)晦澀難懂,看案例吧

a). 求最大數(shù):

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就是為這種累加操作設(shè)計(jì)的,那么initialValue參數(shù)有什么用呢?
我理解的是用來(lái)代替previousValue成為第一個(gè)參數(shù)

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():

用法和參數(shù)和reduce一樣,不同的是reduce是升序,而reduceRight是降序

10. for-of循環(huán)(ES6):

forEach好用但是不可以中斷循環(huán)
for-in可以遍歷'enumerable'對(duì)象,不推薦用來(lái)遍歷數(shù)組,數(shù)組的 index 跟普通的對(duì)象屬性不一樣，是重要的數(shù)值序列指標(biāo)。

for-of是ES6引入的一種新方法,比普通for循環(huán)簡(jiǎn)單,也彌補(bǔ)了forEach和for-in的缺點(diǎn)

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

for-of可以循環(huán)很多種數(shù)據(jù)類(lèi)型(數(shù)組,對(duì)象,字符串等)