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

我知道可以使用條件過濾器方法
但是，如何從對象數組中刪除不必要的字段呢？
可以在這里使用地圖方法嗎？ 如果是這樣，我該如何實施？

以下是我半熟的代碼-

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

Answer 1

您可以使用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; } 

Answer 2

您可以使用Array.filter和Array.map使用做到這一點，過濾器Array.includes在您檢查的在陣營的存在tech陣列。

第二步是通過僅保留原始對象的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); 

Answer 3

我最好將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;} 

Answer 4

您可以過濾和映射所需的屬性。

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

Answer 5

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

 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);