JavaScript（1）高階函式filter、map、reduce

Silent丿丶黑羽發表於2021-06-30
JavaScript函式Filter

前言

需求：有這樣一個陣列[10, 20, 110, 200, 60, 30, 40]
1.篩選出陣列中小於100的元素
2.將篩選出的每個元素的值x2
3.完成第2步之後，將陣列中的所有元素加起來
 

普通方法

如果我們還沒接觸過filter、map、reduce，那麼就是用for迴圈

<script>
  list = [10, 20, 30, 40, 60, 110, 200]
  newList = []
  newList2 = []
  total = 0
  // 第1次for迴圈把小於100的數加入新的陣列newList
  for (item of list){
    if (item<100){
      newList.push(item)
    }
  }
  // 第2次for迴圈把所有的元素值乘以2
  for (item of newList){
    newValue = item * 2
    newList2.push(newValue)
  }
  // 第3次for迴圈把陣列中的全部元素加起來
  for (item of newList2){
    total += item
  }
  console.log(total)
</script>

以上寫起來非常繁瑣，還要定義很多變數，程式碼閱讀起來也不是很好，其實我們有更好的方式，下面介紹
 

filter

檢測數值元素，並返回符合條件所有元素的陣列。
 

定義和用法

filter() 方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素
 
注意
filter() 不會對空陣列進行檢測。
filter() 不會改變原始陣列。
 

語法

array.filter(function(currentValue,index,arr), thisValue)

引數說明如下：

  • function(currentValue, index, arr)：必填函式，陣列中的每個元素都會執行這個函式
    • currentValue：必填，當前元素的值
    • index：可選。當前元素的索引值
    • arr：可選。當前元素屬於的陣列物件
  • thisValue：可選。物件作為該執行回撥時使用，傳遞給函式，用作 this 的值。如果省略了 thisValue ，this 的值為 undefined
     

小練習

使用filter函式篩選出[10, 20, 110, 200, 60, 30, 40]小於100的

list = [10, 20, 30, 40, 60, 110, 200]
newList = list.filter(function (n) {
  return n < 100
})
console.log(newList)

列印結果

[10, 20, 30, 40, 60]

 

map

通過指定函式處理陣列的每個元素，並返回處理後的陣列。
 

定義和用法

map() 方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。
map() 方法按照原始陣列元素順序依次處理元素。
 
注意
注意： map() 不會對空陣列進行檢測。
注意： map() 不會改變原始陣列。
 

語法

array.map(function(currentValue,index,arr), thisValue)

引數說明如下：

  • function(currentValue, index, arr)：必填函式，陣列中的每個元素都會執行這個函式
    • currentValue：必填，當前元素的值
    • index：可選。當前元素的索引值
    • arr：可選。當前元素屬於的陣列物件
  • thisValue：可選。物件作為該執行回撥時使用，傳遞給函式，用作 this 的值。如果省略了 thisValue，或者傳入 null、undefined，那麼回撥函式的 this 為全域性物件。
     

小練習

將陣列[10, 20, 30, 40, 60]中的每個元素值乘以2

<script>
  list = [10, 20, 30, 40, 60]
  newList = list.map(function (n) {
    return n * 2
  })
  console.log(newList)
</script>

列印結果

[20, 40, 60, 80, 120]

 

reduce

將陣列元素計算為一個值（從左到右）
 

定義和用法

reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce() 可以作為一個高階函式，用於函式的 compose。
注意:reduce() 對於空陣列是不會執行回撥函式的。
 

語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

引數說明如下：

  • function(total,currentValue, index,arr)：必填函式，陣列中的每個元素都會執行這個函式
    • total：必填。初始值, 或者計算結束後的返回值。
    • currentValue：必填，當前元素的值
    • index：可選。當前元素的索引值
    • arr：可選。當前元素屬於的陣列物件
  • initialValue：可選。傳遞給函式的初始值
     
     

小練習

計算陣列之和[20, 40, 60, 80, 120]

<script>
  list = [20, 40, 60, 80, 120]
  newList = list.reduce(function (total, n) {
    return total + n
  }, 0)
  console.log(newList)
</script>

列印結果

320

 

使用filter和map和reduce完成案例

上面我們分別介紹了3個高階函式，接下來結合起來使用
 

方式1

<script>
  list = [10, 20, 110, 200, 60, 30, 40]
  newList = list.filter(function (n) {
    return n < 100
  }).map(function (n) {
    return n * 2
  }).reduce(function (total, n) {
    return total + n
  })
  console.log(newList)
</script>

 

方式2

<script>
  list = [10, 20, 110, 200, 60, 30, 40]
  newList = list.filter(n => n < 100).map(n => n * 2).reduce((total, n) => total+n);
  console.log(newList)
</script>

以後我們就可以一行程式碼完成上面的需求，而不需要使用for迴圈了

相關文章