news 2026/6/13 6:14:12

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
踩过坑才懂:前端生成唯一 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 生成器了。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 14:09:34

DPO-LoRA模型微调参数配置技术文档

文档摘要本文档旨在提供关于DPO-LoRA(基于直接偏好优化的低秩适应)模型微调方法的详细技术指南,重点阐述其核心参数配置、实践示例及调优策略。本文档适用于希望利用DPO-LoRA方法对齐大型语言模型与人类偏好的研究人员和工程师。1. 技术概述D…

作者头像 李华
网站建设 2026/6/10 14:10:43

【必收藏】AI大模型开发完全指南:从零到全栈工程师的技能清单

当然!AI 大模型应用开发是一个复合型领域,它要求开发者兼具软件工程的扎实基础和AI/机器学习的专项知识。我们可以将其分为核心硬技能和辅助软技能两大板块。 一、 核心硬技能 这部分是完成工作的技术基础,可以看作是一个技能栈。 编程语言与…

作者头像 李华
网站建设 2026/6/12 23:23:42

Unity WebGL终极教程:免费实现RTSP视频流弹窗播放

想要在Unity WebGL项目中快速集成实时视频流播放功能?RTSP-Player-For-Unity-WebGL项目为你提供完整的免插件解决方案。这套工具专为监控摄像头接入设计,支持在网页中心位置弹窗播放RTSP视频流,完美融合到Unity 3D场景中。 【免费下载链接】R…

作者头像 李华
网站建设 2026/6/10 13:00:34

一次使用AI辅助编程的真实体验

AI现在到底有多强,今天我就给你分享一下我使用AI和我一起编写程序完成一个任务的经历。 前段时间,一位客户向我们提出了需求:她们需要将本地一个目录中的文件定期上传到网盘。上传频率可以是一天一次,也可以是一周。除此之外&…

作者头像 李华
网站建设 2026/6/12 16:00:18

首家!百度大模型安全护栏荣获信通院大模型安全护栏能力评估优秀级

12月12日,百度大模型安全护栏在中国信通院泰尔实验室的大模型安全护栏能力评估中,凭借多模态审核、安全代答及攻击拦截等能力维度的出色表现,斩获最高级别的“优秀级”评级。此前,百度大模型安全护栏的红线代答模型已于2025年6月获…

作者头像 李华
网站建设 2026/6/12 21:33:25

BotW存档管理工具:跨平台游戏进度迁移解决方案

BotW存档管理工具:跨平台游戏进度迁移解决方案 【免费下载链接】BotW-Save-Manager BOTW Save Manager for Switch and Wii U 项目地址: https://gitcode.com/gh_mirrors/bo/BotW-Save-Manager 在《塞尔达传说:旷野之息》的广阔世界中&#xff0c…

作者头像 李华