如何在 JavaScript 中过滤和映射对象数组？

Question

我有一组对象，

我想从中有条件地创建另一个对象数组。

例如。 -

 var devs = [
    {
        name: 'A',
        age: 26,
        tech: ['JavaScript','React'],
        addr:{
            country:'India',
            city:'Pune'
        }
    },
    {
        name: 'B',
        age: 25,
        tech: ['Node','AngularJs'],
        addr:{
            country:'USA',
            city:'NY'
        }
    },
    {
        name: 'C',
        age: 27,
        tech: ['React','AWS'],
        addr:{
            country:'UK',
            city:'London'
        }
    }
]

我想要一个 在其“技术”字段数组中具有“反应”的 对象数组，

只想显示他们的名字和技术，

以下是预期的输出 -

 [
    {
        name: 'A',
        tech: ['JavaScript','React']
    },
    {
        name: 'C',
        tech: ['Java','React'],
    }
]

我知道可以使用有条件的过滤方法，

但是如何从对象数组中删除不必要的字段呢？

这里可以使用map方法吗？如果是这样，我该如何实施？

以下是我的半熟代码 -

 var filteredDevs = devs.filter(temp => temp.tech.includes('React'));

原文由 Ani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

You can use Array.filter and Array.map to do it, filter using the Array.includes where you check for the presence of React in the tech array .

第二步是通过仅保留 name 和 tech 原始对象的属性映射到所需的对象。

 const devs = [{"name":"A","age":26,"tech":["JavaScript","React"],"addr":{"country":"India","city":"Pune"}},{"name":"B","age":25,"tech":["Node","AngularJs"],"addr":{"country":"USA","city":"NY"}},{"name":"C","age":27,"tech":["Java","AWS"],"addr":{"country":"UK","city":"London"}}];
const devReact = devs.filter(obj => obj.tech.includes("React")).map(obj => ({"name":obj.name, "tech":obj.tech}));
console.log(devReact);

---

您也可以使用 Array.reduce 一次完成，您只在数组中累积那些具有 React 的对象。

 const devs = [{"name":"A","age":26,"tech":["JavaScript","React"],"addr":{"country":"India","city":"Pune"}},{"name":"B","age":25,"tech":["Node","AngularJs"],"addr":{"country":"USA","city":"NY"}},{"name":"C","age":27,"tech":["Java","AWS"],"addr":{"country":"UK","city":"London"}}];
const devReact = devs.reduce((acc, ele) =>  ele.tech.includes("React") ? acc.concat({"name": ele.name, "tech":ele.tech}): acc ,[]);
console.log(devReact);

原文由 Fullstack Guy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我最好使用 Array.reduce() 来完成这项任务，只在输入数据上循环一次。

 var devs = [
    {
        name: 'A',
        age: 26,
        tech: ['JavaScript','React'],
        addr: {country:'India', city:'Pune'}
    },
    {
        name: 'B',
        age: 25,
        tech: ['Node','AngularJs'],
        addr: {country:'USA', city:'NY'}
    },
    {
        name: 'C',
        age: 27,
        tech: ['React','AWS'],
        addr: {country:'UK', city:'London'}
    }
];

let res = devs.reduce((acc, {name, tech}) =>
{
    tech.includes("React") && acc.push({name, tech});
    return acc;
}, []);

console.log(res);

 .as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

原文由 Shidersz 发布，翻译遵循 CC BY-SA 4.0 许可协议