在 querySelectorAll() 之前调用 querySelector()答案

【问题标题】：Calling querySelector() before querySelectorAll()在 querySelectorAll() 之前调用 querySelector()
【发布时间】：2020-01-02 14:46:38
【问题描述】：

阅读网站后台加载的一些 js 文件，我发现了这个结构：

var foo = (document.querySelector(".some-selector"), 
document.querySelectorAll(".some-selector > ul > li"));
Array.prototype.forEach.call(foo, ...);

对querySelector() 的调用似乎已经过时，但从代码和该脚本的来源来看，我不觉得这是一个错误，或者他们的意思是[...] 而不是(...)。代码被缩小了，但没有被混淆；对我来说，这似乎是故意的，但我不明白这一点。

我的最佳猜测是，对querySelector() 的调用以某种方式加速了对querySelectorAll() 的后续调用，或者这是某种浏览器破解。但是我还没有找到与这个结构相关的任何东西。

这里有没有人知道这是关于什么的，或者指出我正确的方向？

【问题讨论】：

缩小后的代码不是源代码。我会查看源代码以了解它的来源，但如果这只是一个错误，我不会感到惊讶。为了获得更好的性能，代码会在.some-selector 元素上调用querySelectorAll（假设只有一个这样的父元素，或者可能完全不使用querySelector，不确定内部算法用于迭代/匹配测试的内容）
一些网站（如 Stack Overflow）提供缩小的代码，但也有可用的源代码，希望您有幸进入这些网站之一
For better performance, the code would have called querySelectorAll on the .some-selector element 否，" > ul > li" 不是有效的选择器。非缩小代码不走运。
Thomas document.querySelector('.some-selector').querySelector(".some-selector > ul > li") 也可以工作，但与人们最初的想法相反，从文档开始实际上更快，因为无论如何选择器都必须从根开始，正是为了使这种情况有效... cc @CertainPerformance
对于手头的问题......我从来没有听说过这样的黑客，如果它确实有任何好的影响在某个版本的引擎中文档的结构，我敢打赌它不会在其他任何地方都成立。

【解决方案1】：

这是逗号（,）运算符的特点之一。

让我解释一下这是什么意思，

var x = (2+3, 4+5, 6+7);
console.log(x); // 13

它用于将多个语句级联为单个语句。从上面的代码中，我们可以看到输出是 13 而不是 7 或 9。这是因为，javascript 执行括号内的所有语句，但只返回最后一条语句的结果。因此，“x”的值为“13”。

解决手头的问题，

var foo = (document.querySelector(".some-selector"), 
document.querySelectorAll(".some-selector > ul > li"));
Array.prototype.forEach.call(foo, ...);

第一个语句被执行但它的结果没有返回。因此，“foo”的值将是第二条语句的结果。稍后遍历第二条语句的结果数组。

欲了解更多信息click here。

【讨论】：