ES5的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，但願你也可以喜歡。