这几天在学习的时候发现自己对有些
JavaScript的operator并不太熟。这导致其实可以用一行代码解决的问题，我用了一大堆。于是就想整理一下所有的operator，就有了这篇文章。
注：其实这没什么技术含量，仅仅是普通操作而已。之所以想要记录呢，主要是想告诉自己，少做“笨事”，多利用工具去实现自己想要的效果。
我想要的效果
首先，我想要把 JavaScript 中所有的 operator 整理出来，使用 markdown 的表格来显示。大概期望的样子如下：
打开了 MDN 之后，我开始飞快的 copy and paste... 复制了两个之后隐约觉得有点不对劲。我的潜意识突然告诉我，我是个程序员啊！怎么能干这种见不得人的事情呢？！（对不起，戏太多，收住！）
开始写代码
观察 MDN，很容易发现，这些列表应该是用 li 标签写出来的，而且操作符和名称用括号分开了。那么，我们只要拿到这个元素列表遍历一下拿到 innerText，根据括号拿到对应的 名称 和 操作符，然后拼接成 table 的格式不就好了吗？
于是，打开当前页面控制台，观察 Dom 结构，然后写出我的垃圾代码：
{
const sidebar = document.getElementById("sidebar-quicklinks");
const toggle = Array.from(sidebar.getElementsByClassName('toggle'))[5];
const innerLiList = toggle.getElementsByTagName("li");
const operatorList = [];
Array.from(innerLiList).map(i => {
const a = i.getElementsByTagName('a');
if (a.length) {
const value = a[0].innerText;
let name = value;
let operator = "";
if (value.match(/\)$/)) {
const res = value.match(/(.+(?=\())|(?<=\().*(?=\)$)/g);
name = res[0].trim();
operator = res[1].trim();
}
operatorList.push({name, operator});
}
});
let output = "";
operatorList.map(i => {
const op = i.operator.indexOf('|') > -1 ? i.operator.replace(/\|/g, '\\|') : i.operator;
output += `|${i.name}|${op}|\n`;
});
console.log(output);
}
输出结果：
把结果复制到 md 文档中如下：
经过处理发现有一个符号处理的不对：()。这是因为我们没有处理这种特殊的情况。
遇到的问题
事实上初步写的代码并没有这么顺利，会发现所有包含 | 的运算符都没有显示出来。这是因为table 中的 | 是一个特殊字符，而我们格式化时没有对 | 做特殊处理。只要将这一步加上：i.operator.replace(/\|/g, '\\|') 就没问题了。
OS：macOS Big Sur 11.2.3
Browser Version: 95.0.4638.54（正式版本） (x86_64)
