因此，我正在制作一个React应用程序，并且我有一个使用特定技术的项目列表。我希望用户能够说我正在寻找一个通过某些复选框使用" A"，" B"one_answers" C"技术的项目（也许），并且项目列表将自动更新。我是否应该为此使用香草javaScript（通过一系列对象进行排序），还是有一种更简单的方法？
如果应该通过Vanilla 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'
}];
您可以在检查所有想要的技术过滤时使用破坏性。
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' }],
search = ['c', 'e'],
result = projects.filter(({ technologies }) =>
search.every(s => technologies.includes(s)));
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }如果您有多个复选框，您将获得一个数组，其中包含所有选定的复选框的值。过滤基于数组的一个或多个值将像这样起作用：
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'
}
];
const search = ['c', 'e'];
const result = projects.filter(project => {
return search.every(s => project.technologies.includes(s));
});
// or
const result2 = projects.filter(project => {
return !search.some(s => project.technologies.indexOf(s) === -1);
});
console.log(result);
console.log(result2);是的，您只能使用vanilla js进行，您可以从 array 的buil-In方法中获利。
您可以使用 .filter() 和 .some() 方法的组合来根据指定的技术列表过滤数组。
这应该是您的代码：
const techs = ['a', 'c'];
var filtered = projects.filter(function(p){
return !techs.some(function(t){
return p.technologies.indexOf(t) === -1;
});
});
演示：
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'
}
];
const techs = ['a', 'c'];
var filtered = projects.filter(function(p){
return !techs.some(function(t){
return p.technologies.indexOf(t) === -1;
});
});
console.log(filtered);说明：
我们使用 filter()方法将数组过滤器的元素循环循环，并且在其回调函数中，我们使用.some()方法在迭代项目technologies上测试以确保它们都是给定技术列表中的中的。
假设您将所选技术存储在数组中，则可以简单地使用filter()循环每个项目并返回至少具有技术人员的技术。
在下面的摘要中，我们通过filter迭代每个项目，这意味着我们创建了一个带有满足回调标准的项目的数组。
回调为当前项目的每种技术执行另一个过滤器，并返回过滤后数组的长度。如果当前项目的技术没有匹配您的选择，则数组长度为零，这是一个虚假的值，并且整个对象不会返回到新数组。
例如：
let selectedTechs = ['a', 'b']; //selected techs
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'
}
];
let arr = projects.filter(
(item) => item.technologies.filter((x) => selectedTechs.includes(x)).length
);
console.log(arr); //returns the 1st and 3rd project object.和反应中的演示：
class MyApp extends React.Component {
constructor() {
super();
this.state = {
technologies: ['a', 'b', 'c', 'd', 'e', 'f'],
checkedTechs: [],
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'
}
]
};
}
checkTech = (name) => {
let arr = this.state.checkedTechs.slice();
if(arr.includes(name)) {
arr.splice(arr.indexOf(name), 1);
} else {
arr.push(name);
}
this.setState({checkedTechs: arr});
}
render() {
let {technologies, checkedTechs, projects} = this.state;
return(
<div>
<div>
{technologies.map(
(item) => <label key={item}>{item}<input value={checkedTechs.indexOf(item)>-1} onChange={this.checkTech.bind(this, item)} type="checkbox" /></label>
)}
</div>
<ul>
{this.state.projects.filter(
(item) => item.technologies.filter((x) => checkedTechs.includes(x)).length
).map(
(item) => <li key={item.name}>{item.name}</li>
)}
</ul>
</div>
);
}
}
ReactDOM.render(<MyApp />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>以上是向项目显示 include 所选技术。如果要选择具有恰好的项目，请替换过滤器逻辑：
(item) => item.technologies.join(',') === checkedTechs.sort().join(',')
您可以使用JavaScript。说，在checkbox的每次点击中，您的复选框值都保存在选择中，然后您可以获取这样的对象，
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'
}
];
var choice = 'e';
var res= projects.filter((x)=>{
if(x.technologies.indexOf(choice) !== -1){
return x;
}
});
console.log(res);我找到了有效的东西。最好的解决方案？
const checkFor = ['a', 'b'];
const winners = projects.filter(project => {
return checkFor.every(function(val) {
return project.technologies.indexOf(val) !== -1;
});
});
console.log('winners: ', winners);