把要的元素留下來的陣列 Array 方法 filter()

Array 33

媽媽說，蘋果要挑大顆又漂亮來拜，神明才會保佑我們。

map()和filter()常常被稱為最好用的兩個陣列方法，之所以好用，有一個原因是我們可以任意要求對每個元素所做的事，無論是運算或是篩選，不只這樣，這兩個陣列都是會回傳回來一個新的陣列，且不會更動到原來的陣列，處理陣列時，可以拿這兩位兄弟做很多事情哩！

我們先來看看 filter()的基本資訊：
原型： Array.prototype.filter()
功能： 將經指定的函式運算後，由原陣列中通過該函式檢驗的元素回傳一個新陣列。
改變： 不會改變元陣列。
語法： var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
回傳值： 回傳新陣列，原陣列不改變
參數： callback 函式、thisArg，第二參數可忽略。

透過filter()函式的第一參數：callback 函式所指定的過濾條件，返回一個新陣列 (非常好用)。例如我們只想保留陣列裡，字串長度大於三的字串元素，可以輕易地取得。

let arr = ['Jack', 'John', 'May', 'Su', 'Ada'];
let arr2 = arr.filter(function(value) {
  return value.length > 3;
});
arr2.join('、'); //  Jack、John

我們也可以用它搭配可去掉空字串的字串方法trim()，再將陣列沒用或空的元素刪除，就可得到一個新的、乾淨的陣列。

let arr = ['Hello', '', 'Hi', null, undefined, 'Ciao', ' '];

let newArr = arr.filter(function(inutile) {
  return inutile && inutile.trim();
});

newArr; // ['Hello', 'Hi', 'Ciao']

需注意的是，在 IE9(不包含 IE9)以下的版本並不支援 trim()方法。
String.prototype.trim() - JavaScript | MDN

filter()好用的原因，除了可以產生一個新陣列，且不會更動到原本的陣列，對於沒有值的元素也不會起作用。而filter()和splice()的不同點，正是filter()不會更動到原陣列。

在filter()的第一個參數所帶入的 callback 函式，可以帶入多個參數，如果我們只帶入一個參數，這個參數即表示是使用filter()此陣列的元素，而第二與第三個參數則代表元素的索引位置和陣列本身。例如下面這個例子，我們想要過濾出來，大於 5 的元素：

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let filtered = array.filter(function(value, index, arr) {
  return value > 5;
});

filtered; // [6, 7, 8, 9]
array; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

利用filter()，我們也可以輕鬆地去除陣列裡重複的元素，可以達到這樣的效果是因為使用indexOf()會回傳第一個元素位置的（index），如果之後有重複元素的位置與indexOf()回傳的位置不相等，就會被filter()過濾掉。而這時的過濾結果，只會先保留第一個找到的元素，第二個重複的元素就不會被放進回傳的陣列裡了。

let arr = ['B', 'A', 'E', 'C', 'A', 'F', 'G', 'E'];

let newArr = arr.filter(function(element, index, self) {
  return self.indexOf(element) === index;
});

newArr; // ["B", "A", "E", "C", "F", "G"]

我們更可以把這些去掉重複的元素，且讓陣列的排序整齊一點的功能，包成一個函式，使用起來就方便多了。

let array = [1, 2, 3, 0, 4, 5, 6, 7, 4, 8, 9, 3, 0];

function removeDuplicates(originArray) {
  let result = originArray.filter(function(value, index, arrSelf) {
    return arrSelf.indexOf(value) === index;
  });
  return result.sort();
}

removeDuplicates(array); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

今天的filter()就先介紹到這裡，因為自己也是初級生，想把舊語法先練熟，所以還未使用到箭頭函式，將來應該就會慢慢朝向 ES6 的寫法了。

如有需要改進的地方，拜託懇請告知，我會盡快修改，感謝您～