以不可变的方式过滤作为对象属性的数组

Question

如何以不可变的方式过滤作为对象属性的数组？例如。

public transform(contactGroups: ContactGroup[], searchText: string): ContactGroup[] {
    if (!contactGroups) {
        return [];
    }
    if (searchText === undefined) {
        return contactGroups;
    }
    return contactGroups.filter((contactGroup: ContactGroup) => {
        return contactGroup.contacts.filter((contact: Contact) => {
            return contact.displayName && contact.displayName.toLowerCase().includes(searchText.toLowerCase())
        }).length > 0;
    });
}

在上面的示例中，contactGroup.contacts包含数组中的所有项目，但不包含由于对象引用而过滤的结果。

任何帮助将不胜感激。谢谢。

function transform(contactGroups, searchText) {
        if (!contactGroups) {
            return [];
        }
        if (searchText === undefined) {
            return contactGroups;
        }
        return contactGroups.filter(function (contactGroup) {
            return contactGroup.contacts.filter(function (contact) {
                return (contact.displayName && contact.displayName.toLowerCase().includes(searchText.toLowerCase()));
            }).length > 0;
        });
    };
 
 var contactGroups = [{  
   "letter":"S",
   "contacts":[  
      {  
            "id":"173",
            "rawId":null,
            "displayName":"sam",
            "name":{  
               "givenName":"sam",
               "formatted":"sam"
            },
            "nickname":null,
            "phoneNumbers":null,
            "emails":[  
               {  
                  "id":"955",
                  "pref":false,
                  "value":"[e-mail]",
                  "type":"other"
               }
            ],
            "addresses":null,
            "ims":null,
            "organizations":null,
            "birthday":null,
            "note":"",
            "photos":null,
            "categories":null,
            "urls":null
      },
      {  
            "id":"1717",
            "rawId":null,
            "displayName":"Sat33",
            "name":{  
               "givenName":"Sat33",
               "formatted":"Sat33 "
            },
            "nickname":null,
            "phoneNumbers":[  
               {  
                  "id":"5521",
                  "pref":false,
                  "value":"1133",
                  "type":"work"
               }
            ],
            "emails":null,
            "addresses":null,
            "ims":null,
            "organizations":null,
            "birthday":null,
            "note":null,
            "photos":null,
            "categories":null,
            "urls":null
      },
      {  
            "id":"1712",
            "rawId":null,
            "displayName":"Server1234",
            "name":{  
               "givenName":"Server1234",
               "formatted":"Server1234 "
            },
            "nickname":null,
            "phoneNumbers":[  
               {  
                  "id":"5509",
                  "pref":false,
                  "value":"1234",
                  "type":"mobile"
               }
            ],
            "emails":null,
            "addresses":null,
            "ims":null,
            "organizations":null,
            "birthday":null,
            "note":null,
            "photos":null,
            "categories":null,
            "urls":null
      }
   ]
}]
console.log(transform(contactGroups, 'ver'))

它应该返回仅包含联系人对象"Server1234"的联系人组，因为搜索的字符串是"ver"，但它仍然返回包含所有联系人对象的联系人组。

Answer 1

你可以试试这个解决方案

class ContactGroup {
    contacts: Contact[]
}
class Contact {
    displayName: string
}
function transform(contactGroups: ContactGroup[], searchText: string): ContactGroup[] {
    if (!contactGroups) {
        return [];
    }
    if (searchText === undefined) {
        return contactGroups;
    }
    return contactGroups.map((contactGroup: ContactGroup) => {
        return {
            ...contactGroup,
            contacts: contactGroup.contacts.filter((contact: Contact) => {
                return contact.displayName && contact.displayName.toLowerCase().includes(searchText.toLowerCase())
            })
        }
    }).filter((contactGroup: ContactGroup) => {
        return contactGroup.contacts.length > 0
    })
}

Answer 2

您可以清空传递的数组并将过滤后的元素推送到其中。下面是代码的简化版本：

function transform(contactGroups, searchText) {	
    var filtered = contactGroups.filter(e => e.name.includes(searchText));
    contactGroups.splice(0, contactGroups.length);
    contactGroups.push(...filtered);
    return filtered;  // <-- if still needed
}
var contacts = [{name: 'abc'}, {name: 'abcc'}, {name: 'xyz'}];
transform(contacts, 'abc');
console.log(contacts);