JavaScript生成唯一ID的几种常用方法

 更新时间:2025年08月22日 09:45:49   作者:藤原とラふ店丶  
这篇文章主要介绍了JavaScript生成唯一ID的几种常用方法,UUID 是通用唯一标识符的缩写,是由一个可以确保全球唯一性的算法生成的标识符,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在 JavaScript 中生成唯一 ID(UUID)的方法有很多,根据场景需求(如唯一性强度、长度、可读性等)可选择不同方案。以下是几种常用方法:

1. 简单方案:时间戳 + 随机数(适合一般场景)

利用当前时间戳(毫秒级)结合随机数,实现简单且碰撞概率较低:

function generateSimpleId() {
  // 时间戳(毫秒)+ 3位随机数,确保同一毫秒内不重复
  return Date.now().toString(36) + Math.random().toString(36).substr(2, 3);
}

// 使用示例
console.log(generateSimpleId()); // 类似:"1h8t0d3-xyz"(36进制更短)

特点

  • 实现简单,长度较短(约12-15位);
  • 适合前端临时标识(如DOM元素ID、临时缓存键);
  • 高并发下可能有极低碰撞风险(可增加随机数长度降低概率)。

2. 标准 UUID v4(推荐,通用性强)

UUID(通用唯一识别码)是行业标准,其中 v4 版本基于随机数生成,碰撞概率极低(可忽略),格式为 8-4-4-4-12 共36位:

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

// 使用示例
console.log(generateUUID()); // 类似:"f47ac10b-58cc-4372-a567-0e02b2c3d479"

特点

  • 符合 UUID 标准,通用性强(后端、数据库等场景兼容);
  • 随机数生成,碰撞概率极低(适合生产环境);
  • 长度固定(36位),包含连字符,可读性较好。

3. 更安全的随机数(基于 crypto API)

浏览器环境下可使用 crypto.getRandomValues 生成加密级随机数,进一步降低碰撞风险:

function generateSecureUUID() {
  const array = new Uint8Array(16);
  window.crypto.getRandomValues(array);
  
  // 符合 UUID v4 格式:第6位固定为4,第8位固定为8-11之间的值
  array[6] = (array[6] & 0x0f) | 0x40;
  array[8] = (array[8] & 0x3f) | 0x80;
  
  return Array.from(array, byte => ('0' + (byte & 0xff).toString(16)).slice(-2))
    .join('')
    .replace(/^(.{8})(.{4})(.{4})(.{4})(.{12})$/, '$1-$2-$3-$4-$5');
}

// 使用示例
console.log(generateSecureUUID()); // 标准UUID格式,随机数更安全

特点

  • 随机数质量更高(加密级),适合安全性要求高的场景(如token、会话ID);
  • 需浏览器支持 crypto API(几乎所有现代浏览器都支持);
  • 仍符合 UUID 标准格式。

4. 短ID(适合需要短标识的场景)

生成更短的唯一ID(如8-10位),可通过基数转换(36进制/62进制)实现:

function generateShortId(length = 8) {
  const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let id = '';
  for (let i = 0; i < length; i++) {
    // 随机取字符(使用crypto提高随机性)
    const randomIndex = Math.floor(window.crypto.getRandomValues(new Uint32Array(1))[0] / (0xFFFFFFFF + 1) * chars.length);
    id += chars[randomIndex];
  }
  return id;
}

// 使用示例
console.log(generateShortId()); // 类似:"xY3p7Q9z"

特点

  • 长度可控(默认8位,碰撞概率随长度增加而降低);
  • 包含大小写字母和数字,可读性较好;
  • 适合URL参数、短链接等需要简短标识的场景。

选择建议:

  • 一般前端场景:优先用 UUID v4(通用且可靠);
  • 高安全性场景:用 crypto 生成的 UUID
  • 短标识需求:用 短ID生成函数(注意长度与碰撞风险平衡);
  • 简单临时标识:用 时间戳+随机数(实现最简单)。

这些方法基本能覆盖大部分前端生成唯一ID的需求,可根据实际场景选择。

总结

到此这篇关于JavaScript生成唯一ID的几种常用方法的文章就介绍到这了,更多相关js生成唯一ID内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • onclick和onblur冲突问题的快速解决方法

    onclick和onblur冲突问题的快速解决方法

    下面小编就为大家带来一篇onclick和onblur冲突问题的快速解决方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • JS基于Location实现访问Url、重定向及刷新页面的方法分析

    JS基于Location实现访问Url、重定向及刷新页面的方法分析

    这篇文章主要介绍了JS基于Location实现访问Url、重定向及刷新页面的方法,结合实例形式分析了javascript使用Location进行URL访问、重定向、页面刷新等操作相关原理、操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • JS中appendChild追加子节点无效的解决方法

    JS中appendChild追加子节点无效的解决方法

    这篇文章主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2018-10-10
  • 前端实现获取后端返回的文件流并下载三种方法

    前端实现获取后端返回的文件流并下载三种方法

    文件下载是最常见的流形式返回数据的应用场景之一,通过流形式返回文件内容,可以避免将整个文件加载到内存中,从而减少内存消耗,这篇文章主要介绍了前端实现获取后端返回的文件流并下载的三种方法,需要的朋友可以参考下
    2025-04-04
  • js设置鼠标悬停改变背景色实现详解

    js设置鼠标悬停改变背景色实现详解

    这篇文章主要介绍了js设置鼠标悬停改变背景色实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • js使用递归解析xml

    js使用递归解析xml

    这篇文章主要介绍了js使用递归解析xml,需要的朋友可以参考下
    2014-12-12
  • 编写一个javascript元循环求值器的方法

    编写一个javascript元循环求值器的方法

    这篇文章主要介绍了编写一个javascript元循环求值器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • ​​​​​​​基于el-table和el-pagination实现数据的分页效果流程详解

    ​​​​​​​基于el-table和el-pagination实现数据的分页效果流程详解

    本文主要介绍了​​​​​​​基于el-table和el-pagination实现数据的分页效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-11-11
  • JavaScript 事件流、事件处理程序及事件对象总结

    JavaScript 事件流、事件处理程序及事件对象总结

    JS与HTML之间的交互通过事件实现,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,可以使用(或处理程序)来预定事件,以便事件发生时执行相应的代码,本文将介绍JS事件相关的基础知识,
    2017-04-04
  • 微信小程序自定义支持图片的弹窗

    微信小程序自定义支持图片的弹窗

    这篇文章主要为大家详细介绍了微信小程序自定义支持图片的弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论