摘要：迭代方法是指接受針對(duì)數(shù)組的每個(gè)項(xiàng)運(yùn)行的函數(shù)。值是強(qiáng)制轉(zhuǎn)換為布爾值時(shí)計(jì)算為的任何值。值得注意的是，這個(gè)數(shù)組是不變。由于布爾值只有和，這意味著很容易翻轉(zhuǎn)謂詞的值。檢查數(shù)組的每個(gè)成員是否傳遞謂詞，而檢查數(shù)組的成員是否通過(guò)謂詞。

.filter是一個(gè)內(nèi)置的數(shù)組迭代方法，它接受一個(gè)“謂詞（譯者注: 指代一個(gè)過(guò)濾條件的函數(shù)）”，該“謂詞”針對(duì)每個(gè)值進(jìn)行調(diào)用，并返回一個(gè)符合該條件(“truthy值”)的數(shù)組。

上面那句話包含了很多信息，讓我們來(lái)逐一解答一下。

“內(nèi)置”只是意味著它是語(yǔ)言的一部分 - 您不需要添加任何庫(kù)來(lái)訪問(wèn)此功能。

“迭代方法”是指接受針對(duì)數(shù)組的每個(gè)項(xiàng)運(yùn)行的函數(shù)。.map和.reduce都是迭代方法的示例。

“謂詞”是指.fiflter中接受的的函數(shù)。

“truthy值”是強(qiáng)制轉(zhuǎn)換為布爾值時(shí)計(jì)算為true的任何值。幾乎所有值都是真實(shí)的，除了：undefined，null，false，0，NaN或“”（空字符串）。

讓我們來(lái)看看下面這個(gè)例子，看一下.filter是怎么運(yùn)行的。

const restaurants = [
    {
        name: "Dan"s Hamburgers",
        price: "Cheap",
        cuisine: "Burger",
    },
    {
        name: "Austin"s Pizza",
        price: "Cheap",
        cuisine: "Pizza",
    },
    {
        name: "Via 313",
        price: "Moderate",
        cuisine: "Pizza",
    },
    {
        name: "Bufalina",
        price: "Expensive",
        cuisine: "Pizza",
    },
    {
        name: "P. Terry"s",
        price: "Cheap",
        cuisine: "Burger",
    },
    {
        name: "Hopdoddy",
        price: "Expensive",
        cuisine: "Burger",
    },
    {
        name: "Whataburger",
        price: "Moderate",
        cuisine: "Burger",
    },
    {
        name: "Chuy"s",
        cuisine: "Tex-Mex",
        price: "Moderate",
    },
    {
        name: "Taquerias Arandina",
        cuisine: "Tex-Mex",
        price: "Cheap",
    },
    {
        name: "El Alma",
        cuisine: "Tex-Mex",
        price: "Expensive",
    },
    {
        name: "Maudie"s",
        cuisine: "Tex-Mex",
        price: "Moderate",
    },
];

這是很多信息。我現(xiàn)在想要一個(gè)漢堡，所以讓我們過(guò)濾掉一下這個(gè)數(shù)組。

const isBurger = ({cuisine}) => cuisine === "Burger";
const burgerJoints = restaurants.filter(isBurger);

isBurger是謂詞，而burgerJoints是new數(shù)組，它是餐館的子集。值得注意的是，restaurants 這個(gè)數(shù)組是不變。

下面是兩個(gè)正在呈現(xiàn)的列表的簡(jiǎn)單示例 - 一個(gè)原始的餐館數(shù)組，以及一個(gè)過(guò)濾的burgerJoints數(shù)組。

See the Pen .filter - isBurger by Adam Giese (@AdamGiese) on CodePen.

對(duì)于每個(gè)謂詞，都有一個(gè)相反的否定謂詞。

謂詞是一個(gè)返回布爾值的函數(shù)。由于布爾值只有true 和 false，這意味著很容易“翻轉(zhuǎn)”謂詞的值。

我吃了漢堡已經(jīng)過(guò)了幾個(gè)小時(shí)，現(xiàn)在又餓了。這一次，我想過(guò)濾out漢堡嘗試新的東西。一種選擇是從頭開(kāi)始編寫(xiě)新的isNotBurger謂詞。

const isBurger = ({cuisine}) => cuisine === "Burger";
const isNotBurger = ({cuisine}) => cuisine !== "Burger";

但是，請(qǐng)查看兩個(gè)謂詞之間的相似程度。這不是 DRY code。另一種選擇是調(diào)用isBurger謂詞并翻轉(zhuǎn)結(jié)果。

const isBurger = ({cuisine}) => cuisine === "Burger";
const isNotBurger = restaurant => !isBurger(restaurant);

這個(gè)更好！如果漢堡的定義發(fā)生變化，您只需要在一個(gè)地方更改邏輯。但是，如果我們想要一些否定的謂詞呢？由于這是我們可能經(jīng)常想要做的事情，因此編寫(xiě)否定函數(shù)可能是個(gè)好主意。

const negate = predicate => function() {
  return !predicate.apply(null, arguments);
}

const isBurger = ({cuisine}) => cuisine === "Burger";
const isNotBurger = negate(isBurger);

const isPizza = ({cuisine}) => cuisine === "Pizza";
const isNotPizza = negate(isPizza);

你可能有一些問(wèn)題。

MDN:

apply（）方法調(diào)用具有給定this的函數(shù)，并將參數(shù)作為數(shù)組（或類數(shù)組對(duì)象）提供。

MDN:

arguments對(duì)象是所有（非箭頭）函數(shù)中可用的局部變量。您可以使用參數(shù)在函數(shù)內(nèi)引用函數(shù)的參數(shù)object.

在這種情況下，使用傳統(tǒng)函數(shù)是必要的，因?yàn)閍rguments對(duì)象在傳統(tǒng)函數(shù)上是_唯一_可用的。

到2018年8月20日。正如一些評(píng)論家所正確指出的那樣, 你可以使用rest參數(shù)用[箭頭函數(shù)寫(xiě) negate ](https://css-tricks.com/level-...。

正如我們?cè)谑褂胣egate函數(shù)看到的那樣，函數(shù)很容易在JavaScript中返回一個(gè)新函數(shù)。這對(duì)于編寫(xiě)“謂詞”非常有用。例如，讓我們回顧一下我們的isBurger和isPizza謂詞。

const isBurger = ({cuisine}) => cuisine === "Burger";
const isPizza  = ({cuisine}) => cuisine === "Pizza";

這兩個(gè)謂詞具有相同的邏輯;他們只是在比較上有所不同。因此，我們可以將共享邏輯包裝在isCuisine函數(shù)中。

const isCuisine = comparison => ({cuisine}) => cuisine === comparison;
const isBurger  = isCuisine("Burger");
const isPizza   = isCuisine("Pizza");

現(xiàn)在，如果我們想開(kāi)始檢查價(jià)格怎么辦？

const isPrice = comparison => ({price}) => price === comparison;
const isCheap = isPrice("Cheap");
const isExpensive = isPrice("Expensive");

現(xiàn)在isCheap和isExpensive 都是DRY（譯者注：Don"t repeat yourself ，一種編程原則，不也要寫(xiě)重復(fù)的代碼），isPizza和isBurger都是DRY，但isPrice和isCuisine可以公用他們的邏輯！

const isKeyEqualToValue = key => value => object => object[key] === value;

// these can be rewritten
const isCuisine = isKeyEqualToValue("cuisine");
const isPrice = isKeyEqualToValue("price");

// these don"t need to change
const isBurger = isCuisine("Burger");
const isPizza = isCuisine("Pizza");
const isCheap = isPrice("Cheap");
const isExpensive = isPrice("Expensive");

對(duì)我來(lái)說(shuō)，這就是箭頭功能之美。在一行中，您可以優(yōu)雅地創(chuàng)建三階函數(shù)。

看看從原始餐館陣列創(chuàng)建多個(gè)篩選列表是多么容易？

See the Pen .filter - returning predicates by Adam Giese (@AdamGiese) on CodePen.

我們現(xiàn)在可以通過(guò)漢堡或廉價(jià)的價(jià)格過(guò)濾我們的陣列......但是如果你想要cheap burgers怎么辦？一種選擇是將兩個(gè)過(guò)濾器鏈接在一起。

const cheapBurgers = restaurants.filter(isCheap).filter(isBurger);

另一個(gè)選擇是將兩個(gè)謂詞“組合”成一個(gè)謂詞。

const isCheapBurger = restaurant => isCheap(restaurant) && isBurger(restaurant);
const isCheapPizza = restaurant => isCheap(restaurant) && isPizza(restaurant);

看看所有重復(fù)的代碼。我們絕對(duì)可以將它包裝成一個(gè)新功能！

const both = (predicate1, predicate2) => value =>
  predicate1(value) && predicate2(value);

const isCheapBurger = both(isCheap, isBurger);
const isCheapPizza = both(isCheap, isPizza);

const cheapBurgers = restaurants.filter(isCheapBurger);
const cheapPizza = restaurants.filter(isCheapPizza);

如果你沒(méi)有披薩或漢堡包怎么辦？

const either = (predicate1, predicate2) => value =>
  predicate1(value) || predicate2(value);

const isDelicious = either(isBurger, isPizza);
const deliciousFood = restaurants.filter(isDelicious);

這是朝著正確方向邁出的一步，但是如果您想要包含兩種以上的食物呢？這不是一種可擴(kuò)展的方法。有兩種內(nèi)置的數(shù)組方法在這里派上用場(chǎng)。.every和.some都是謂詞方法，也接受謂詞。.every檢查數(shù)組的每個(gè)成員是否傳遞謂詞，而.some檢查數(shù)組的any成員是否通過(guò)謂詞。

const isDelicious = restaurant =>
  [isPizza, isBurger, isBbq].some(predicate => predicate(restaurant));

const isCheapAndDelicious = restaurant =>
  [isDelicious, isCheap].every(predicate => predicate(restaurant));

并且，像往常一樣，讓我們??將它們包裝成一些有用的抽象。

const isEvery = predicates => value =>
  predicates.every(predicate => predicate(value));

const isAny = predicates => value =>
  predicates.some(predicate => predicate(value));

const isDelicious = isAny([isBurger, isPizza, isBbq]);
const isCheapAndDelicious = isEvery([isCheap, isDelicious]);

isEvery和isAny都接受一個(gè)謂詞數(shù)組并返回一個(gè)謂詞。

由于所有這些謂詞都可以通過(guò)高階函數(shù)輕松創(chuàng)建，因此根據(jù)用戶的交互創(chuàng)建和應(yīng)用這些謂詞并不困難。綜合我們學(xué)到的所有課程，這里是一個(gè)應(yīng)用程序示例，通過(guò)應(yīng)用基于按鈕點(diǎn)擊的過(guò)濾器來(lái)搜索餐館。

See the Pen .filter - dynamic filters by Adam Giese (@AdamGiese) on CodePen.

總結(jié)
過(guò)濾器是JavaScript開(kāi)發(fā)的重要組成部分。無(wú)論您是從API響應(yīng)中挑選出錯(cuò)誤數(shù)據(jù)還是響應(yīng)用戶交互，您都會(huì)無(wú)數(shù)次想要數(shù)組值的子集。我希望這個(gè)概述有助于您可以操作謂詞來(lái)編寫(xiě)更易讀和可維護(hù)的代碼。