iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

6
自我挑戰組

JavaScript之一定要了解的 Array 與方法系列 第 33

把要的元素留下來的 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 的寫法了。

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


上一篇
# 非常彈性好用的陣列 Array 方法 map()
下一篇
JS_測試陣列是否有符合條件的元素好用方法 every() & some()
系列文
JavaScript之一定要了解的 Array 與方法34

尚未有邦友留言

立即登入留言