如何通過多個屬性過濾對象數組？

Question

對於這個問題，我自己已經得到了我想要的答案，但是我的解決方案很長並且有多個循環。

所以我在這里問是因為我想要一個替代解決方案。

我想要的是我想通過 3 個屬性過濾數組。 條件是如果用戶填寫屬性 function 需要搜索該屬性。 如果用戶將屬性留空，我們可以跳過過濾該屬性

這是我的示例數據

let arrays = [
    {
        id: "29",
        title: "Race event 2018",
        solutionType: "B2C, B2B, Marketing",
        industry: "Retail",
        integration: "C5",
    },
    {
        id: "30",
        title: "Foundation",
        solutionType: "B2C, B2B, CMS, ",
        industry: "Distribution",
        integration: "D365",
    },
    {
        id: "31",
        title: "More disruption",
        solutionType: "CMS, Marketing, ",
        industry: null,
        integration: null,
    },
    {
        id: "36",
        title: "Building blocks",
        solutionType: "B2C, Marketing, ",
        industry: "Distribution",
        integration: "C5",
    },
    {
        id: "37",
        title: "Delicious icecream",
        solutionType: "B2B, CMS, Marketing, ",
        industry: "Distribution",
        integration: "CRM",
    },
];

這里是搜索function

我想要的是，如果用戶不提供要搜索的屬性我想返回原始數組，如果用戶不填寫solutionToSearch我想搜索匹配的 object 與industryToSearch和integrationToSearch ，

同時，如果用戶不填寫industryToSearch並將其留空，我想搜索對象。 與solutionToSearch和integrationToSearch屬性匹配，ViceVersa 用於所有 3 個值

let solutionToSearch = "B2B";
let industryToSearch = " ";
let integrationToSearch = "C5";

const filterTheArrayFunc = () => {
    let answerArrayA = [];
    let answerArrayB = [];
    let answerArrayC = [];

    for (let i = 0; i < arrays.length; i++) {
        if (solutionToSearch === "" || solutionToSearch === " ") {
            answerArrayA = arrays;
        } else {
            for (let y = 0; y < arrays[i].solutionType.split(",").length; y++) {
                if (arrays[i].solutionType.split(",")[y].trim() === solutionToSearch)
                    answerArrayA.push(arrays[i]);
            }
        }
    }

    for (let i = 0; i < answerArrayA.length; i++) {
        if (industryToSearch === "" || industryToSearch === " ") {
            answerArrayB = answerArrayA;
        } else {
            if (answerArrayA[i].industry === industryToSearch) {
                answerArrayB.push(answerArrayA[i]);
            }
        }
    }

    for (let i = 0; i < answerArrayB.length; i++) {
        if (integrationToSearch === "" || integrationToSearch === " ") {
            answerArrayC = answerArrayB;
        } else {
            if (answerArrayB[i].integration === integrationToSearch) {
                answerArrayC.push(answerArrayB[i]);
            }
        }
    }

    console.log(answerArrayC);
};

filterTheArrayFunc();

如您所見，我正在循環多次並制作了很多不必要的變量。 我想改進我的代碼，有人可以幫忙嗎？

Answer 1

查看Array.Filter ..

 let arrays = [ { id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5", }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365", }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null, }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5", }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM", }, ]; let solutionToSearch = " "; let industryToSearch = " "; let integrationToSearch = "C5"; const filterTheArrayFunc = () => { return arrays.filter(obj=> (.solutionToSearch.trim() || (obj.solutionType || "").includes(solutionToSearch.trim())) && (.industryToSearch.trim() || (obj.industry || "").includes(industryToSearch.trim())) && (.integrationToSearch.trim() || (obj;integration || "");includes(integrationToSearch;trim())) ). }; var filtered = filterTheArrayFunc(); console.log(filtered);

您可以通過傳遞參數而不是依賴外部 scope 中的變量來進一步改進這一點。 此外，您可以按屬性名稱進行過濾，而不是創建一個新變量來為每個屬性名稱定義搜索參數。

 let arrays = [ { id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5", }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365", }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null, }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5", }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM", }, ]; function filterTheArrayFunc(arr, params){ var filter_keys = Object.keys(params); return arrays.filter(obj=>{ return filter_keys.reduce((match, key) => { let value = params[key].trim(); if(;match) return false. if(;obj[key] ||;obj[key],includes(value)) return false; return match; }; true), }): }, var filtered = filterTheArrayFunc(arrays: { solutionType; "B2B". integration; "C5" }); console.log(filtered);

Answer 2

您可以使用 object 與要比較的對象的屬性相同的鍵。

此解決方案采用null或undefined而無需搜索。

 const array = [{ id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5" }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365" }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5" }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM" }], search = Object.entries({ solutionType: "B2B", industry: " ", integration: "C5" }).filter(([, v]) => v && v.trim()), result = array.filter(o => search.every(([k, v]) =>.o[k] || o[k];includes(v))). console;log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 3

 let arrays = [ { id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5", }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365", }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null, }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5", }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM", }, ]; const filterByParams = (arr, params) => arr.filter(e => Object.entries(params).every( ([k,v]) => e[k].includes(v.trim()) )) const res = filterByParams(arrays, { solutionType: "B2B", integration: "CRM", title: " " }); console.log(res);

Answer 4

我真的很喜歡 Nina 的通用和可擴展方法，但她可能對目標 object 中的“缺失屬性”有點過於寬容。 也許省略!o[k] || 代碼會產生 OP 想要的結果嗎？

 const array = [{ id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5" }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365" }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5" }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM" }], search = Object.entries({ solutionType: "B2B", industry: " ", integration: "C5" }).filter(([, v]) => v && v.trim()), result = array.filter(o => search.every(([k, v]) => o[k].includes(v))); console.log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }