iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
1
Modern Web

被 React react 的後端工程師系列 第 13

[DAY13] Filter 標題的靈感之我真的一滴都不剩了之真想不出

  • 分享至 

  • xImage
  •  

我想說的是
filter 會建立一個經過指定運算判斷後回傳為真的新陣列,就是這麼簡單

關於 filter 在其他地方我好像已經遇到好幾遍,一直沒有有系統地把它記下來
就剛好在這篇文章做一個紀錄

其實之前就一直有個疑問,這個可以用 foreach 做掉,為什麼一定非要用 filter 不可?
一直到截止我還沒沒找到答案,如果有人剛好看到又剛好知道答案,麻煩請留言告訴我


跟著官方文件來看看 filter 的神奇之處

filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

翻成中文就是 filter() 方法會建立一個經過指定運算判斷後回傳為真的新陣列

語法是

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

來看範例

底下範例中,定義一個陣列 word 把內容拿去 filter,條件是長度大於 6
回傳值組成新的陣列 longWords,這就是基本的操作
和之前的 map 一樣,是不會改變原始陣列的內容
然後...沒錯又是之前講過的箭頭函數

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

let longWords = words.filter(word => word.length > 6);

// Filtered array longWords is ["exuberant", "destruction", "present"]

也可以把 callback 寫成獨立的 function
例如這個移除所有小於 10 的範例
這時候又可以比較一下箭頭函數和聲明函數的差別

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

如果不拆開,把 function 直接寫在 filter 裡面其實也是可以的
在範例中,每次的傳入值就叫做 el 然後用 el 做判斷,要注意的是這邊需要用 return
因為他其實就是在 filter 內做匿名函數

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

再來是一個比較實用的用法,畢竟你不會永遠都有這麼簡單的陣列
萬一今天傳進來的是一個 json 呢?
比如說去接了別人的 API 取資料,要把無效資料去除才能顯示在頁面上

那就是以下的範例了
拿到一堆數據資料,要刪除無效的非數值資料

建立一個把非零 numeric id 的元素都過濾掉的的 JSON

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id)) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('過濾好的陣列\n', arrByID); 
// 過濾好的陣列
// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]

console.log('無效的元素數量 = ', invalidEntries); 
// 無效的元素數量 = 4

原來就是三種 callback 的表現方法,也沒這麼難嘛
下次再遇到,我就會了!


上一篇
[DAY 12] 司機我要下車之刪除清單中的服務之按得太久腰受不了
下一篇
[DAY14] 一個蘿蔔一個坑之 JSX 幾個坑
系列文
被 React react 的後端工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言