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

问题描述

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

I have an array of objects called data and also have a separate object that is called mapping.

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

I try to delete the invalid object from the array. I have iterated the array using the map function. I check whether the object is valid using the mapping object. If it is found to be invalid then it should be deleted from the array, but the map function is not working asynchronously so they skip the invalid object, which is pushed into the array which is not fine. so please suggest some solution and also give me the small detail why map function is skipping the object.

这是我的代码:

 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" }
    ];

推荐答案

Ajeet Shah 的解决方案是正确的，我会应用相同的想法，但是，我认为基于您的代码的解决方案也很重要，因此您会知道是什么您的代码与正确代码之间的差异.但是，我建议接受 Ajeet 的回答.

Ajeet Shah's solution is correct and I would apply the same idea, however, I think that a solution based on your code is also important so you will know what was the difference between your code and a correct one. However, I recommend accepting Ajeet's answer.

让我们看看下面的代码:

Let's see the following code:

 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().如上所示，您可以通过映射成功进行过滤，但是编写上述代码的可读性不如编写清楚地表明过滤器是发生了什么的代码.

The fix was to create an empty array and since map() is looping data, you just add the valid elements to the array you intend to use as an output. Even though this solution is correct, .map() is really meant to reinterpret the values and you logically need .filter(). As shown above, you can successfully filter by mapping, but writing code like above is less readable than writing the code in such a way that it clearly indicates that a filter is what happens.

这篇关于通过在 map 函数上迭代数组来从数组中删除对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！