ES5的filter方法，你真的會用嗎？

付出發表於2018-01-18
Filter

前言：2018/1/18 12:24 第一次在掘金髮表文章，收穫這麼多贊挺意外的，感謝大家賞臉[拜謝]。因工作繁忙，本週有空會繼續補充更新該文章的，喜歡的可以通過點贊或收藏跟進動態啦。再次感謝[鞠躬]~!

1/19 18:35 更新：

  • 1.評論區老鐵們說的陣列去重的set的實現模式，字串去重；
  • 2.增加filter + map搭配使用的場景引入(其實我想說的重點是這個[捂臉])；
  • 3.滋潤下文字表達，增加一些必要的註釋說明；
  • 4.排版重構

filter

1.定義

filter 為陣列中的每個元素呼叫一次 callback 函式，並利用所有使得" callback 返回 true 或 等價於 true 的值 的元素"建立一個新陣列。

var new_array = arr.filter(callback[, thisArg])
複製程式碼

2.基礎用法

var spread = [12, 5, 8, 130, 44]
// 篩選條件符合大於10的新陣列
var filtered = spread.filter(n => n >= 10)
console.log('filtered', filtered) // => [12, 130, 44]
複製程式碼

3.進階用法

陣列物件的鍵名/鍵值的搜尋

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'ared',   'age': 24, 'active': false },
  { 'user': 'ered',   'age': 80, 'active': false },
  { 'abc': 'ered',   'age': 80, 'active': false }
]
// 篩選 age等於40或者age等於24的 陣列物件
var filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter後的鍵名', filtered)   // => [{user: "fred", age: 40, active: false}，{user: "ared", age: 24, active: false}]
複製程式碼

4.高階用法

4.1 陣列去重

var spread = [12, 5, 8, 8, 130, 44,130]
var filtered = spread.filter((item, idx, arr) => {
  return arr.indexOf(item) === idx;
})
// 篩選符合條件找到的第一個索引值等於當前索引值的陣列
console.log('陣列去重結果', filtered)
複製程式碼

感謝評論區@緣童鞋等老鐵分享想法，陣列去重用ES6的set方法的實現模式

var spread = [12, 5, 8, 8, 130, 44,130]
var setFun = [...new Set(spread)]
console.log('陣列去重結果', setFun)
複製程式碼

感謝評論區@菜鳥_it_老鐵分享的字串去重，大家可以參考一下

var arr=[12, 5, 8, 8, 130, 44,130,'a','b','a']
var obj={};
arr.forEach(function(item){
obj[item]=item;
})
Object.keys(obj)
console.log(Object.keys(obj))
複製程式碼

大家討論對於陣列去重討論還是蠻激烈的。因此，18歲的我，建了一個供大家交流的群，對於程式碼的實現邏輯的優化，大家可以加文章底部下面的微信群，以後可能會組織線下活動以及程式設計師的單身趴吧，哈哈~~程式碼的世界很精彩，一起成長.

4.2 陣列中的空字串刪掉

var spread = ['A', '', 'B', null, undefined, 'C', '  ']
var filtered = spread.filter((item, idx, arr) => {
  return item && item.trim()
})
console.log('陣列中的空字串刪掉', filtered) // => ["A", "B", "C"]
複製程式碼

5.一句話總結

充分利用callback返回true的特點當作"過濾條件"函式，生產新的陣列

6.專案實踐

filter的常用搭配

filter與map配合：用filter符合一定條件過濾後再進行map生成新的陣列

在專案中，有時候我們需要在將原陣列根據一定條件過濾後再進行map生成新的資料

for + continue 寫法

var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
var forArr = []
for (var i = 0; i < arr.length; i++) {
    // 遇到性別為女的陣列物件， 跳出本次迴圈
    if (arr[i].gender === 'woman') continue
    var temp = {
      name: arr[i].name
    }
    forArr.push(temp)
}
// 過濾掉性別為女的陣列物件
console.log('男性名字集合', forArr) // => [{name: 'john'}, {name: 'jerry'}]
複製程式碼

用for + continue方法後，我們成功將遇到性別為女的陣列物件剔除掉了，最終篩選出男性名字的陣列集合。for迴圈如果遇到多層巢狀是比較冗雜且不易維護的。我們能不能用map代替呢？但是map不支援continue跳出迴圈。

問題： 那又想用map減少程式碼量，又想用continue跳出迴圈，怎麼辦?

解決：或許用filter與map的搭配使用可以解決我們遇到的問題(可代替for + continue 的使用)

程式碼演示： filter +map 寫法

var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
// filter : 有條件的篩選，返回條件為true的陣列
// 篩選出性別為男性的名字集合
var newArr = arr.filter(n => n.gender === 'man').map(item => {
  return {
    name: item.name
  }
})
console.log('男性名字集合', newArr)   // => [{name: 'john'}, {name: 'jerry'}]
複製程式碼

用filter +map 寫法方法後，我們簡簡單單用兩三行程式碼就實現出了用for + continue寫法的功能。既優雅又易讀易維護，何樂而不為呢？

that's all, 以上就是我的個人的經驗總結，如果對你的開發有幫助，歡迎點贊，如果覺得哪裡出錯了，歡迎指出，大家一起進步，共同成長~。~

一起交流?

你有好的想法可以一起交流，訂閱微信公眾號yhzg_gz(點選複製，在微信中新增公眾號貼上即可)，追求程式碼質量，高效率程式設計是我們共同的目標。

付出的前端路

寫文章可以得非同步社群的書！愛讀書的技術人都在非同步社群。我想要讀編寫可維護的JavaScript，希望你也能夠喜歡。

相關文章