Javascript 根据包含的数组内容筛选对象数组。香草JS，lodash，其他反应相关技术？

所以我正在制作一个react应用程序，我有一个使用特定技术的项目列表。我希望用户能够通过一些复选框（可能）说我正在寻找一个使用“a”、“b”和“c”技术的项目，项目列表将自动更新。我应该仅仅使用香草javascript（对对象数组进行排序）还是有更简单的方法

如果这应该通过香草javascript完成，请有人给我一点指示。能够成功地搜索一种“技术”，但无法搜索多种技术

示例数据如下所示

const projects = [{
  name: 'projecta',
  technologies: ['a', 'b', 'f'],
  link: 'www.example.com'
},
{
  name: 'projectb',
  technologies: ['c', 'd', 'e'],
  link: 'www.example.com'
},
{
  name: 'projectc',
  technologies: ['a', 'b', 'c', 'd', 'e'],
  link: 'www.example.com'
}];

---

您可以使用javascript实现这一点。比如说，在每次点击

复选框时，您的复选框值都保存在choice中，这样您就可以得到这样的对象


const项目=[
{
名称：'projecta'，
技术：['a'，'b'，'f']，
链接：“www.example.com”
},
{
名称：'projectb'，
技术：['c'，'d'，'e']，
链接：“www.example.com”
},
{
名称：'projectc'，
技术：['a'，'b'，'c'，'d'，'e']，
链接：“www.example.com”
}
];
var选择='e'；
var res=projects.filter（（x）=>{
if（x.technologies.indexOf（选项）！=-1）{
返回x；
}
});
控制台日志（res）如果您有多个复选框，您将得到一个数组，其中包含所有选中复选框的值。
筛选基于一个或多个值的数组将如下所示：


const项目=[
{
名称：'projecta'，
技术：['a'，'b'，'f']，
链接：“www.example.com”
},
{
名称：'projectb'，
技术：['c'，'d'，'e']，
链接：“www.example.com”
},
{
名称：'projectc'，
技术：['a'，'b'，'c'，'d'，'e']，
链接：“www.example.com”
}
];
常量搜索=['c'，'e']；
const result=projects.filter（project=>{
返回search.every（s=>project.technologies.includes）；
});
//或
const result2=projects.filter（project=>{
return！search.some（s=>project.technologies.indexOf（s）=-1）；
});
控制台日志（结果）；
console.log（result2）是的，您可以只使用vanilla JS来完成，您可以从的内置方法中获益

您可以结合使用和方法，根据指定的技术列表筛选阵列

这是您的代码应该如何编写的：

const techs = ['a', 'c'];
var filtered = projects.filter(function(p){
    return !techs.some(function(t){
        return p.technologies.indexOf(t) === -1;
    });
});

演示：


const项目=[
{
名称：'projecta'，
技术：['a'，'b'，'f']，
链接：“www.example.com”
},
{
名称：'projectb'，
技术：['c'，'d'，'e']，
链接：“www.example.com”
},
{
名称：'projectc'，
技术：['a'，'b'，'c'，'d'，'e']，
链接：“www.example.com”
}
];
const techs=['a'，'c']；
var filtered=projects.filter（函数（p）{
return！techs.some（函数（t）{
返回p.technologies.indexOf（t）=-1；
});
});
console.log（过滤）假设您将所选技术存储在一个数组中，只需使用
filter（）
循环遍历每个项目，并返回至少有一种技术的项目

在下面的代码片段中，我们使用
过滤器
遍历每个项目，这意味着我们创建了一个数组，其中包含满足回调条件的项

回调函数对当前项目的每个技术进行另一个筛选，并返回筛选数组的长度。如果当前项目中没有任何技术与您的选择相匹配，则数组长度为零，这是一个错误的值，并且整个对象将不会返回到新数组


例如：


让selectedTechs=['a'，'b']//选定的技术人员
施工项目=[
{
名称：'projecta'，
技术：['a'，'b'，'f']，
链接：“www.example.com”
},
{
名称：'projectb'，
技术：['c'，'d'，'e']，
链接：“www.example.com”
},
{
名称：'projectc'，
技术：['a'，'b'，'c'，'d'，'e']，
链接：“www.example.com”
}
];
设arr=projects.filter(
（项）=>item.technologies.filter（（x）=>selectedTechs.includes（x））.length
);
控制台日志（arr）//返回第一个和第三个项目对象。
您可以在筛选时使用分解，同时检查所有需要的技术


const
项目=[{name:'projecta'，技术：['a'，'b'，'f']，链接：'www.example.com'}，{name:'projectb'，技术：['c'，'d'，'e']，链接：'www.example.com'}，{name:'projectc'，技术：['a'，'b'，'c'，'d'，'e']，链接：'www.example.com'}，
搜索=['c'，'e']，
结果=projects.filter（{technologies}）=>
search.every=>technologies.includes（s））；
控制台日志（结果）
.as控制台包装{max height:100%！important；top:0；}
我发现了一些有效的方法。最佳解决方案

const checkFor = ['a', 'b'];
const winners = projects.filter(project => {

            return checkFor.every(function(val) {
                return project.technologies.indexOf(val) !== -1;
            });
        });

        console.log('winners: ', winners);

但是他提到了“和”的关系，所以我希望在
a
和
e
的情况下会出现一个空列表，除非他是指其他的东西，否则我会在第二个项目的技术中添加一个“a”，我会修复它并使用另一个搜索进行测试。这是一个不错的解决方案，但要知道并非所有浏览器都支持它。@chsdk，很好。这是为支持ES6或使用babel polyfill的浏览器设计的。我非常喜欢，谢谢！超级干净的代码。对于这个项目来说，不是所有浏览器都支持.includes（）。@D.Wall，很高兴您发现它很有用！我为React实现添加了一个示例代码。此外，如果这是有益的，请考虑将其标记为“接受”。祝你好运。不错的解决方案@Nina，但请注意，并非所有浏览器都支持它。@chsdk，也不支持解构，但op使用
const
，s