踩过坑才懂：前端生成唯一 ID，别用 Date.now ()了！一行代码搞定

前言

做过电商 PC 端开发的兄弟估计都懂：经常得弄个「绝不会跟别的重样的编号（ID）」------ 比如给弹窗、临时加的商品条目、页面里动态蹦出来的元素做标识，免得代码把东西搞混。这事看着好像随手就能写，但真要做到百分百不重复，可比想的要坑。

今天就唠唠大伙常踩的俩坑，再给你说个浏览器自带的、一行代码搞定的靠谱法子。

一、先踩第一个坑：拿时间戳加随机数凑数

好多人（不管是刚入门的还是干了俩年的）第一反应都是：把当前时间加个随机数不就行了？比如会写这么一段代码：

function generateNaiveId() {
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

出来的结果大概是l6n7f4v2am50k9m7o4这种，看着好像既有时间的 "独一份"，又有随机数的变化，挺好用？但真放到正经的生产环境里，这就是个定时炸弹：

• 时间戳精度不够

  Date.now()只能精确到毫秒，要是在同一毫秒里连续调用两次这个函数 ------ 比如用户点按钮点的特别快，或者页面一下子要生成好几个 ID------ 那 ID 的前半段就会完全一样

• 随机数不靠谱

  Math.random()那玩意生的不是啥 "靠谱随机数"，运气背的时候，短时间内可能跑出一模一样的序列

说白了，这种法子也就用在半天用一次的场景里凑活，真要讲 "绝对不重复"，差得远了。

二、再踩第二个坑：用自增的计数器

还有人想的更简单：整个全局的数字，每次生成 ID 就把数字加 1，从 0 开始往上排不就得了？但这个法子的问题更离谱：

• 浏览器是 "没记性" 的，用户一刷新页面，这个计数器直接就归零重来了
• 要是用户开了俩同款页面，每个页面的计数器都是从零开始算，生成的 ID 会直接撞车

三、别瞎折腾了：用浏览器自带的正经法子

其实现在的现代浏览器（还有 Node.js14 以上的版本），早就给咱们内置了靠谱的工具 ------crypto.randomUUID()，一行代码就能生成绝对靠谱的唯一 ID：

const uniqueId = crypto.randomUUID();

出来的结果是这种格式：3a6c4b2a-4c26-4d0f-a4b7-3b1a2b3c4d5e为啥说这个是王者？

1. 基本不可能撞号

   这个 ID 是用 122 位的随机数生成的，能组合出来的数字多到离谱 ------ 比地球上的沙子总数还多，撞号的概率约等于你连续中三次头奖

2. 随机数够安全

   它用的是浏览器里专门搞加密的随机数生成工具，不是Math.random()那种随便凑的，没法被轻易猜到

3. 大家都认

   生成的是全球通用的标准格式，不管是后端存数据库、还是和别的系统对接，都能直接用

4. 省心还高效

   不用装任何第三方的库，浏览器自带的，调用起来贼快

而且现在主流的新浏览器都支持这个方法：Chrome92 以上、Firefox90 以上、Safari15.4 以上都能用，要是你做的是新项目，直接用这个就行，再也不用自己瞎写凑数的 ID 生成器了。