请教JavaScript过滤div代码中c.matches(`.${filters.join('.')}`)的含义

咱们把这段代码拆成几个部分逐个理解：

1. filters.join('.') #

filters是存储过滤类名的数组，比如['vintage', 'cheap']。join('.')会把数组元素用.拼接起来，变成'vintage.cheap'。

2. .${...}模板字符串拼接 #

用模板字符串在前面补一个.，上面的例子就变成.vintage.cheap——这是一个CSS复合选择器，意思是同时拥有vintage和cheap两个类的元素。

3. c.matches(选择器) #

c是遍历到的每个目标div（来自sheets数组），matches()是DOM元素自带的方法，用来判断当前元素是否匹配传入的CSS选择器。匹配返回true，不匹配返回false。

结合整段代码的逻辑 #

这段过滤逻辑很明确：

• 若filters数组为空（未选择任何过滤条件），所有元素都显示（移除hidden类）
• 若filters有内容，检查当前元素是否同时具备所有过滤条件对应的类，符合条件就显示，不符合就隐藏（添加hidden类）

举个实际场景例子：
如果用户选中「夏季」「促销」两个过滤按钮，filters会变成['summer', 'sale']，拼接后的选择器是.summer.sale，c.matches('.summer.sale')会检查这个div是否同时带有summer和sale类，符合就显示，不符合就隐藏。

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