JavaScript Day 11. 筛选条件 filter()

阵列中常用的方法还有 filter() 跟 map()，filter() 方法可以根据指定的筛选条件，从阵列里挑出符合的元素。此外，这两种方法筛选完结果以後，都会回传一个新的阵列。

filter 方法的语法

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

稍微来看一下在 filter 的括号里那些参数都是什麽意思：

callback / 为一个函数，用来测试所有的元素，回传值为 true 时将元素保留至新阵列中，回传为 false 则不保留，并且这个函数会接收到三个参数：

1. element / 原阵列目前反覆处理中的元素。
2. index / 代表目前处理到的元素的索引位置。
3. array / 代表阵列本身。

thisArg 代表 callback 里面的 this 是指向哪一个物件。

理解了 filter 的内部构造以後，开始来看看 filter 到底有什麽魔法吧。这边假设我们希望筛选出阵列里面大於并包含 5 的数字：

let arr = [1,2,3,4,5,10,15,20];
// 如果这边代入的参数也包括 arr(阵列本身) 那麽也会给予 arr 这个结果
let arr2 = arr.filter(function(value, arr){
	return value >= 5;
});
console.log(arr2); // **5, 10, 15, 20**
console.log(arr); // 1, 2, 3, 4, 5, 10, 15, 20

可以看到 filter 很轻易的就能把我们要筛选的数字抓出来。

那麽假如我们想做一点字串的处理呢？我们在筛选客户资料，需要抓取客户名字字数大於五个字的字串元素。这边我们也可以做一点不同的写法，当然可以看自己喜欢哪一种就怎麽去写没有关系。

function isBigLength(value) {
    return value.length >= 5;
}

let bigLengthNew = ['Aaliyah', 'Adela', 'Bertha', 'Eden', 'Eve', 'Fay'].filter(isBigLength);
console.log(bigLengthNew); // "Aaliyah", "Adela", "Bertha"

那麽 filter 有没有办法也很灵活的与其他方法并用呢？其实是可以的，假如我们发现这个阵列里面有很多不需要的资料，也可以加入 trim 方法，筛选掉一些不用的资料。

let arr = ['Faithe', '', 'Fay', null, undefined, 'Geraldine', ' '];

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

arr2; // "Faithe", "Fay", "Geraldine"

filter 很棒的地方在於，即使像这样筛选掉不要的资料，或是筛选条件中的资料都不会更动到原有的阵列，因为所有的变动都会出现在新的阵列。

我们还可以利用 filter 过滤掉重复的资料，只要使用 indexOf 方法即可；indexOf 的运作方式，可以看底下小介绍，因此我们可以得知 indexOf 会回传第一个元素位置，而之後重复的元素只要和第一次回传的不相等，就会被 filter 过滤掉，因此就不会再出现重复。

indexOf 会回传指定字串在字串中第一次出现的位置(由左至右)，位置是由 0 开始计算，除了可以从字串头开始寻找外，也可以指定搜索的起始位置，如果找不到字串则会回传 -1

indexOf 语法：
arr.indexOf(searchElement[, fromIndex])

searchElement / 准备在阵列中搜寻的元素。
fromIndex / 阵列中搜索的起始索引。

let arr = ["a", 1, 2, 4, 3, 4,5,5, "b", "a"]; 
let arr2 = arr.filter(function(element, index, arr){ 
  return arr.indexOf(element) === index; }); 

console.log(arr2); // "a", 1, 2, 4, 3, 5, "b"

更可以用函式把程序码整理起来，并且使用 sort 帮忙整理阵列的排序，如此看起来可以更整洁乾净。

let arr = [8, 5, 7, 2, 6, 3, 1, 4];

function arrDuplicates(arr2) {
  let result = arr2.filter(function(value, index, arrSelf){ 
    return arr.indexOf(value) === index
    });
  return result.sort();
};

arrDuplicates(arr); // 1, 2, 3, 4, 5, 6, 7, 8

其实在写这篇文章之前，我还不知道 filter 原来有这麽多的好处，资料到处东找找西找找才发现，这个方法真是越看越觉得好用，感谢强大的网路，提供这麽多资料让我能够越学越多。