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

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

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

好多人第一反应都是：把当前时间加个随机数不就行了？比如会写这么一段代码：

function generateId() {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
}
// 示例: "lgn5q8h2b0.4fzq7v9m3k"

 

 

 

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

• 时间戳精度不够

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

• 随机数不靠谱

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

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

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

let counter = 0;
function generateId() {
  const timestamp = Date.now();
  const random = Math.random().toString(36).substr(2, 9);
  return `${timestamp}_${random}_${counter++}`;
}

const id = generateId();
console.log(id);

 

 

 

 

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

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

三，crypto.randomUUID() 是现代浏览器提供的原生生成 UUID 的方法，非常推荐使用！

const uuid = crypto.randomUUID();
console.log(uuid); // "123e4567-e89b-12d3-a456-426614174000"

crypto.randomUUID() 是：

• ✅ 首选方案（如果不需要支持旧浏览器）

• ✅ 标准、安全、高效

• ✅ 无需依赖第三方库

• ✅ 生产环境推荐