1. 程式人生 > >js中遍歷陣列的幾種方法彙總

js中遍歷陣列的幾種方法彙總

1、forEach 

var arr= ['張三', '李四', '王五'];
arr.forEach(function(v,k) { 
    console.log(v); //這樣就會分別將name遍歷出來
});

//注意:jquery中each方法是反的,比如:
$(arr).each(function(k,v){
      console.log(v);   
});

2、map

map和forEach 幾乎很像,但是也有它的不同之處,比如:
注意:map 是表示對映的,也就是一一對應,遍歷完成之後會返回一個新的陣列,但是不會修改原來的陣列

    var a1 = ['a', 'b', 'c'];
    var a2 = a1.map(function(item,key,arr) {
        return item.toUpperCase();
    });
    console.log(a1);// ['a','b','c'];
    console.log(a2); //['A','B','C'];

注意:map 是表示對映的,也就是一一對應,遍歷完成之後會返回一個新的陣列,但是不會修改原來的陣列

3、filter

filter 有過濾的意思,也就說它就是一個過濾器 。
注意:filter 它將是遍歷每一個元素,用每一個元素去匹配,如果返回true,就會返回一個次數,最後將所有符合新增的全部選出

var a1 = [1,2,3,4,5,6];
var a2 = a1.filter(function(item) { 
     return item <= 3; 
});
 console.log(a2); // [1,2,3];

//filter 它將是遍歷每一個元素,用每一個元素去匹配,如果返回true,就會返回一個次數,最後將所有符合新增的全部選出

4、reduce

reduce從左到右依此遍歷,一般用來做加減乘除用算用的。reduce() 方法接收一個函式作為累加器,陣列中的每個值(從左到右)開始縮減,最終計算為一個值。
注意:

  • 就是 return first+second 其實相當於 return first+=second; 也就是說每次的first 是上一次的和
  • 就是function{}後面的引數,如果 有值 那麼第一次載入的時候 first = 0; second = 1;如果沒有值 , first = 1 , second = 2;如果後面的引數是個字串,那麼就是會是字串拼接、
var a1 = [1, 2, 3];
var total = a1.reduce(function(first, second) { 
     return first + second; 
},0);
console.log(total) // Prints 6

5、every(且)
注意:陣列中每一個元素在callback上都被返回true時就返回true,否則為false

function isNumber(value){ 
    return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // logs false

6、some (或)
注意:只要陣列中有一項在callback上被返回true,就返回true

function isNumber(value){ 
   return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // logs true
var a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // logs false