JavaScript 之迭代方法

七七呢發表於2019-07-14
JavaScript

前言：關於 JS 中為陣列定義的迭代方法，我最開始是在《JavaScript高階程式設計》中學習的，然後。。。我並沒有看懂，後來翻閱各個大佬的部落格，稍微理解了那麼一丟丟。以下就是我的一點見解。

 

首先，我們需要知道陣列中的迭代方法都有哪些，列舉出來分別是：every、some、filter、map、forEach、reduce。

其中 every、some、filter、map、forEach 五種方法在傳入時函式會接受三種引數，分別是 item（陣列中項的值）、index（項的索引）、array（陣列自身）。我在下面的案例中都只傳入了兩個值，原因是。。。用不到（其實是懶得寫） 

而 reduce 方法則會接受四個引數，分別是 prev（前一個項）、cur（當前項）、index（項的索引）、array（陣列物件），函式中返回的任何值都會作為第一個引數傳給下一項，函式的迭代是在陣列的第二項開始的。

 

1.every ------- 查詢陣列中的每一項是否都滿足條件

var num = [1,2,3,4,5];
var number = num.every(function(item,index){
      return (item > 3);   //判斷傳入的值是否全部都大於3
})
console.log(number);   //false  有一個不滿足即為false

2.some ------- 查詢陣列中的每一項哪些滿足條件

var num = [1,2,3,4,5];
var number = num.some(function(item,index){
      return (item > 3);   //判斷傳入的值哪些項大於3
})
console.log(number);   //true  滿足一個即可為true

3.filter ------ 篩選符合條件的項，組成新陣列

var num = [1,2,3,4,5];
var number = num.filter(function(item,index){
      return (item > 3);   //判斷傳入的值哪些項大於3
})
console.log(number);   //[4,5]

 4.map ------ 陣列中的項通過計算，組成新陣列

var num = [1,2,3,4,5];
var number = num.map(function(item,index){
      return item * 3;   //傳入的數值都乘以3
})
console.log(number);   //[3,6,9,12,15]

5.forEach ------ 傳入陣列中的每一項

var num = [1,2,3,4,5];
var number = num.forEach(function(item,index){
      console.log(item);   // 1 2 3 4 5
})

    關於 forEach 我再多叨叨幾句，這個方法在本質上與 for 迴圈沒有什麼區別。上面提到過，每個方法都會傳入三個引數，那麼我在輸出時傳入第一項，也就是輸出陣列中的每一項。如果傳入第二項，則是迴圈迭代陣列的 index 下標值，如果傳入第三項，則是迴圈迭代整個 num 陣列。

6.reduce ------ 陣列的前項和後項進行累計值計算

var num = [1,2,3,4,5];
var number = num.reduce(function(prev,cur,index){
      return prev + cur;
})
console.log(number);   // 1+2+3+4+5 = 15 本質上就是陣列中的項 累計運算的過程

 

相關文章