arr.filter的多方位探索

一、從arr.filter過濾數組

arr.filter是JavaScript中用於過濾數組的方法，它接受一個回調函數，該函數需要返回一個布爾值。當為true時，過濾後的結果集中就會包含該元素。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

上面的代碼中，我們定義了一個數字數組，然後使用arr.filter方法過濾出了其中的偶數。當回調函數返回true時，數字就被保留在結果集中，否則就會被刪除。

此外，回調函數的第二個參數可以傳入元素的索引值，而第三個參數則是原數組。這使得我們能夠更靈活地根據索引或原數組的某些特性來過濾。

const fruits = ['apple', 'banana', 'cherry', 'orange', 'kiwi'];

const filteredFruits = fruits.filter((fruit, index) => index > 2);

console.log(filteredFruits); // ['orange', 'kiwi']

上面的代碼中，我們使用arr.filter方法根據元素的索引進行過濾，只保留了索引大於2的元素。

二、arr.filter輸出結果轉一個數組

arr.filter的返回結果是一個數組，因此我們可以將返回值賦給一個變數並以常規數組的方式使用。

const fruits = ['apple', 'banana', 'cherry', 'orange', 'kiwi'];

const filteredFruits = fruits.filter(fruit => fruit.length > 5);

const sortedFruits = filteredFruits.sort();

console.log(sortedFruits); // ['banana', 'orange']

上面的代碼中，我們使用arr.filter方法過濾了長度大於5的水果，並將結果賦給了變數filteredFruits。隨後我們又用常規的數組排序方法將這些水果按字母順序排列了。

三、arr.filter與arr.map的區別

arr.filter和arr.map都是數組方法，但它們的用途不同。arr.filter過濾數組而arr.map則可以轉換數組。arr.filter返回的是包含過濾出的元素的數組，而arr.map返回的則是對每個元素進行轉換的結果數組。

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

上面的代碼中，我們使用arr.map方法將numbers數組中的元素乘以2。由於numbers數組中只有數字，我們的回調函數只需要一個參數，即第一個元素本身。

與arr.filter方法類似，arr.map方法也可以傳入索引和原數組作為回調函數的參數之一。

const fruits = ['apple', 'banana', 'cherry'];

const capitalizedFruits = fruits.map((fruit, index, array) => {
  return fruit.toUpperCase();
});

console.log(capitalizedFruits); // ['APPLE', 'BANANA', 'CHERRY']

上面的代碼中，我們使用arr.map方法將所有水果轉換成大寫字母，並將結果數組賦給capitalizedFruits變數。

四、arr.filter與函數式編程

arr.filter常常被用於函數式編程中，其中更準確的術語是高階函數。函數式編程的核心思想是將函數作為一等公民。

const getEvenNumbers = numbers => numbers.filter(num => num % 2 === 0);

上面的代碼中，我們定義了一個函數getEvenNumbers，它接受一個數字數組。在函數內部，我們使用arr.filter過濾出其中的偶數，並返回結果數組。

這種把方法當做函數參數傳入的技術，被稱為高階函數。在這種方式下，我們可以輕鬆地把arr.filter和其他類似方法集成到我們的自定義函數中。

五、arr.filter性能優化

arr.filter方法在過濾大型數組時，可能會變得相當慢。為了提高性能，我們應該儘可能縮小回調函數的作用域。

const isEven = num => num % 2 === 0;

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(isEven);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

上面的代碼中，我們將回調函數存儲在一個獨立的變數isEven中，而不是每次使用時都重新定義。這樣做可以消除函數創建的開銷，並顯著提高性能。

結語

arr.filter是JavaScript中一個非常有用的方法，它可以幫助我們過濾數組，同時也可以與其他函數式編程技術集成。通過仔細考慮回調函數的作用域，我們可以最大限度地提高arr.filter方法的性能。