$ 与 $$(*) 是什么？

前言

今天在阅读一篇文章：小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug。主要内容是说翻译插件引发页面的react报错。

文章中用$$('*') 去获取报错页面所有的dom标签和正常无报错页面的dom标签，再进行对比来定位问题。
具体代码如下：

$$('*').reduce((acc, { tagName }) => `${acc}${tagName},`, '')

这篇文章看到了一个$$('*')的写法。我感到好奇，这个到底是什么？

可能性 1

通常来说这个$符号是jQuery 的别名写法。$$('*')难道是符号是jQuery某种高级写法吗？或者是设定了jQuery的使用是 $$

很多javascript库使用$作为一个函数或者变量名.如果你要使用这些javascript库又要使用jQuery 那么可以使用jQuery的noConflict()来来修改jQuery的别名。

noConflict() 方法让渡变量 $ 的 jQuery 控制权。
该方法释放 jQuery 对 $ 变量的控制。
该方法也可用于为 jQuery 变量规定新的自定义名称。

比如：

var $$ =$.noConflict();

在控制台试试$$('*')

但是它返回的是jQuery object. 并不是数组。执行这条语句是会报错的

var $$ =$.noConflict();
$$('*').reduce((acc, { tagName }) => `${acc}${tagName},`, '')

正解

在网上看到一篇问答：[What is the difference between $ and KaTeX parse error: Can't use function '$' in math mode at position 114: …入`jQuery`的情况下，`$̲` 和 `可以在Google Chrome,Firefox和Safari`浏览器中使用。

1. $ 是document.queryselect 的简写。返回传入选择的第一个元素
   

2. $$是document.queryselectAll 的简写。返回传入选择所有元素
   

我们再来执行一下这条代码：

$$('*').reduce((acc, { tagName }) => `${acc}${tagName},`, '')

正确地获取了页面所有元素的标签名

参考

What is the difference between $ and $$?
小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug