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

时间:2019-03-02 17:34:05

标签: javascript arrays

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

例如。 -

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'],
    }
]

我知道可以使用条件过滤器方法,
但是,如何从对象数组中删除不必要的字段呢?
可以在这里使用地图方法吗?如果可以,该如何实施?

以下是我的半熟代码-

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

5 个答案:

答案 0 :(得分:3)

您可以使用filter + map函数,但是该方法使用两个循环来完成您想要的事情。

此替代方法使用函数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'        }    }],
    result = devs.reduce((a, {name, tech}) => {
      if (tech.includes('React')) a.push({name, tech});
      return a;
    }, []);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

答案 1 :(得分:2)

您可以使用 Array.filter Array.map 进行操作,并使用 Array.includes 进行过滤在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: ['Java','AWS'], addr:{ country:'UK', city:'London' } } ] let newArr =devs.filter(temp => temp.tech.includes('React')).map(({name,tech}) => ({name,tech})); console.log(newArr);数组中检查 React 的存在。

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

tech


您也可以使用 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.filter(obj => obj.tech.includes("React")).map(obj => ({"name":obj.name, "tech":obj.tech}));
console.log(devReact);

答案 2 :(得分: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;}

答案 3 :(得分:1)

您可以过滤并映射所需的属性。

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' } }],
    result = devs
        .filter(({ tech }) => tech.includes('React'))
        .map(({ name, tech }) => ({ name, tech }));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

答案 4 :(得分:1)

您可以使用Array.prototype.map()删除不必要的字段

BUILTIN\Users: (I)(RX)
BUILTIN\Users: (I)(OI)(CI)(GR,GE)