如何不使用嵌套循环从数组对象中匹配CSS选择器并返回对应值？

优化实现方案 #

直接使用JS数组内置的高阶迭代方法替代手动嵌套循环，语义化更强、执行效率更高，同时完全符合预期输出要求：

// 将NodeList转为数组，遍历每一个选中的元素
const matchResults = Array.from(sel).map((element, index) => {
  // 筛选当前元素匹配的所有规则对应的val值
  const matchedValues = list
    .filter(rule => element.matches(rule.css))
    .map(rule => rule.val)
  // 按要求格式拼接结果
  return `sel[${index}] matches ${matchedValues.join(',')}`
})

// 输出结果
matchResults.forEach(res => console.log(res))

注：Element.matches API 兼容所有现代浏览器，如需兼容IE11可使用msMatchesSelector前缀适配，或引入对应polyfill。

方案优势 #

• 无手动嵌套for循环，代码逻辑清晰，通过map/filter的语义化命名可以直接看懂代码作用
• 时间复杂度和原生嵌套循环一致为O(元素数量 * 规则数量)，没有额外性能损耗，JS内置的迭代方法执行效率优于手动实现的for循环
• 可复用性高，简单封装为函数后即可在所有同类匹配场景复用，无需重复编写逻辑

特殊场景优化建议 #

如果规则量级超过千条，可以提前将规则按照标签、类名等特征做预分组，每个元素匹配前先按自身特征过滤掉不符合的规则分组，减少单次匹配的规则数量，进一步提升性能。

内容的提问来源于stack exchange，提问作者Ethnic Bee