通过在 map 函数上迭代数组来从数组中删除对象？

Question

我有一个名为 data 的对象数组，还有一个名为 mapping 的单独对象。

我尝试从数组中删除无效对象。我已经使用 map function 迭代了数组。我使用mapping 对象检查对象是否有效。如果发现无效，则应将其从数组中删除，但 map 函数无法异步工作，因此它们会跳过无效对象，将其推入数组中，这是不好的。所以请提出一些解决方案，并告诉我为什么 map 函数跳过对象的小细节。

这是我的代码：

 const data = [
        {
          id: 11,
          name: "dashboard",
        },

        {
          id: 13,
          name: "card",
        },

        {
          id: 1,
          name: "user",
        },

        {
          id: 4,
          name: "test",
        },
      ];

      const mapping = {
        1: "dashboard",
        2: "user",
        3: "card",
        4: "test",
      };

      const filterData = () => {
        data.map((parent, i) => {
          if (Object.keys(mapping).includes(parent.id.toString())) {
          } else {
            const index = data.indexOf(parent);
            if (index > -1) {
              data.splice(index, 1);
            }
          }
        });
        console.log("updated data", data);
      };

    ```
wrong output
[
 { id: 13, name: "card" },
    { id: 1, name: "user" },
   { id: 4, name: "test" }
    ];

Answer 1

您可以使用filter 从数组中删除无效（基于某些条件）对象，而无需修改原始数组。

const filterData = (data, mapping) => data.filter(item => mapping[item.id])
// Or
const filterData = (data, mapping) => data.filter(item => mapping[item.id] !== undefined)
// Or
const filterData = (data, mapping) => data.filter(item => mapping[item.id] !== void 0)

演示：

const filterData = (data, mapping) => data.filter(item => mapping[item.id])

const data = [{
    id: 11,
    name: "dashboard",
  },
  {
    id: 13,
    name: "card",
  },
  {
    id: 1,
    name: "user",
  },
  {
    id: 4,
    name: "test",
  },
];

const mapping = {
  1: "dashboard",
  2: "user",
  3: "card",
  4: "test",
};

console.log(filterData(data, mapping))

请注意，splice 方法将修改您的原始数组，即您可能不想要的 data。

Answer 2

Ajeet Shah 的解决方案是正确的，我会采用相同的想法，但是，我认为基于您的代码的解决方案也很重要，因此您会知道您的代码和正确的代码之间有什么区别。不过，我建议接受 Ajeet 的回答。

我们看下面的代码：

 const data = [
        {
          id: 11,
          name: "dashboard",
        },

        {
          id: 13,
          name: "card",
        },

        {
          id: 1,
          name: "user",
        },

        {
          id: 4,
          name: "test",
        },
      ];

      const mapping = {
        1: "dashboard",
        2: "user",
        3: "card",
        4: "test",
      };

      const filterData = [];
      data.map((parent, i) => {
        if (Object.keys(mapping).includes(parent.id.toString())) {
          filterData.push(parent.id.toString());
        }
      });
      console.log(filterData);

解决方法是创建一个空数组，并且由于map() 正在循环data，您只需将有效元素添加到您打算用作输出的数组中。即使这个解决方案是正确的，.map() 确实意味着重新解释这些值，并且您在逻辑上需要.filter()。如上所示，您可以通过映射成功进行过滤，但是像上面这样编写代码的可读性不如以清楚地表明发生过滤器的方式编写代码。