很多小伙伴的第一反应可能会这样来写function backUniqueIDvalue() { return Date.now().toString(36) Math.random().toString(36).substr(2); }简单解释一下这段代码的意思Date.now().toString(36)Date.now()获取当前的时间戳精确到毫秒的数字。toString(36)将这个时间戳数字转换为 36 进制的字符串。36 进制包含 0-9 和 a-z(10数字26个字母)。这样可以让原本很长的数字时间戳变得非常短且包含字母简单解释一下这段代码的意思Math.random().toString(36).substr(2)Math.random()生成一个 0 到 1 之间的随机小数例如 0.123456789。.toString(36)同样把这个小数转换为 36 进制字符串例如 0.4fzyo82mvyr。.substr(2)截取从第 2 位开始的字符串目的是去掉开头的 0.只保留后面的随机字符部分。举个例子如果当前时间戳转 36 进制是 lxixn9随机数转 36 进制是 0.abc123那么最终拼接的结果就是类似 lxixn9abc123 这样的一串短 ID可能会出现的问题看着好像是没有问题的而且代码也挺简单的。但是实际上放到生产环境中这就是个定时炸弹时间戳精度不够Date.now()只能精确到毫秒要是在同一毫秒里连续调用两次这个函数。那么就会返回相同的结果此时 ID 的前半段就会完全一样我们都知道 Math.random()这玩意生成的不是真正的随机数只是伪随机数。运气不好的时候在较短时间内可能跑出一模一样的序列说到这里小伙伴们可能已经知道生成的 ID 唯一性可能不是那么高可能会重复的。第二个坑用自增的计数器还其他小伙伴想的更简单整个全局的数字。每次生成 ID 就把数字加 1从 0 开始往上排不就得了但是如果用户开了俩同款页面每个页面的计数器都是从零开始算生成的 ID 会直接重复。显然这样的办法不太行。这个时候今天我们的主角就要闪亮登场了。掌声有请crypto.randomUUID()下面我们简单介绍一下我们的专家大拿crypto.randomUUID() 是 ES2023标准 APIcrypto.randomUUID() 是 ES2023标准 API.ES2023即 ECMAScript 2023是在 2023年 正式推出的。crypto.randomUUID() 浏览器的版本要求浏览器环境Chrome 92、Firefox 95、Safari 15.4。该 API 只能在安全上下文即 HTTPS 或 localhost中使用(重要)。判断浏览器是否支持 crypto.randomUUID()判断是否支持crypto.randomUUID()。使用 typeof 检查typeof是否是 undefined然后使用 typeof 检查crypto.randomUUID是否是一个函数如果都成立的话说明支持// 兼容性写法 let uniqueId; if (typeof crypto ! undefined typeof crypto.randomUUID function) { // 现代环境直接使用原生 API uniqueId crypto.randomUUID(); // 生成的是96e74085-38de-46bf-ba25-f85fe1bafc9d 这种格式的字符串 } else { // 旧环境降级方案例如引入 uuid 第三方库 // uniqueId uuid.v4(); console.warn(当前环境不支持 crypto.randomUUID); }为啥说这个是王者呢即使你以每秒生成 10 亿 个 UUID 的速度持续生成 100 年。发生一次重复的概率依然低于 10⁻³⁶即 1 后面跟着 36 个零。换句话说你需要生成大约 2.71 万亿个id才会有十亿分之一的概率发生一次重复。小伙伴们是不是觉得很厉害呢crypto.randomUUID()需要注意的点大家应该看到了这样一句话该 API 只能在安全上下文即 HTTPS 或 localhost中使用。换一句话说本地开发时使用 localhost 或 127.0.0.1 访问它是可以正常工作的。如果你的网页是通过普通的 http:// 协议(例如 http://192.168.1.10 或 http://xxx.com)访问的浏览器就会出于安全考虑直接禁用这个 API。此时调用它。控制台通常会报错 TypeError: crypto.randomUUID is not a function。crypto.randomUUID()也是不想象中的那样强大本来以为是瑶瑶领先同行的。结果还隐藏着安全上下文的限制其他生成唯一 id 第三方库 uuid 库安装npm install uuid使用import { v4 as uuidv4 } from uuid; const id uuidv4();其他的办法生成唯一 id我旁边机智的小伙伴说这样写也可以Math.random() Math.random() Math.random() Math.random()实在绷不住了哈哈