从数组对象中查找所有匹配并返回值

Question

var sel = document.querySelectorAll('ul li a')
sel[0] == // ELEMENT WITH div.bottom ul li a.box
sel[1] == // ELEMENT WITH div.head ul li a.box
var list = [
{css: 'a span', val:'1st'},
{css: 'div.bottom ul a', val:'2nd'},
{css: 'div.head li > a.box', val:'3rd'},
{css: 'div.head li a', val:'4th'}
]
//desired result 
"sel[0] matches 2nd"
"sel[1] matches 3rd,4th"

我试图从列表中找到所有css selectorAll匹配。我知道我可以通过这种方式在选择器和列表中使用嵌套的for循环和循环

for (var i = 0; i < list.length; i++) {
if (sel[0].matches(list[i].css)) {
console.log(list[i].val);
}
}

，但试图找到更好的解决方案，不使用嵌套的for循环。我如何改进这段代码?

Answer 1

使用filter()方法获取数组中所有匹配的元素

sel.forEach((el, i) => {
let matches = list.filter(item => el.matches(item.css));
if (matches.length > 0) {
console.log(`sel[${i}] matches ${matches.map(item => item.val).join(',')}`);
}
}