js动态生成唯一id的三种方法

 更新时间:2023年05月07日 00:34:18   作者:未月廿三  
这篇文章主要介绍了js动态生成唯一id的两种方法,需要的朋友可以参考下

一. 引入时间戳,生成可控长度的随机数

随机数长度控制,定义一个长度变量(length),生成可控长度的随机数:

Math.random().toString(36).substr(3,length)

引入时间戳:

Date.now().toString(36)

合在一起最终办法:

genID(length){
   return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
}

或参考下面的

  <script>
        /**
         * 获取当前时间戳、生成唯一标识id, 以及常见方法。
         * **/
        // 方法一传值转换,注意格式
        var date = Date.parse(new Date())
        console.log(date);  // 1656581121000
        // //Date.parse("2022/6/30 10:05") 或者 Date.parse("2022-6-30 10:05")
        var date = Date.parse("2022-6-30 10:05:50")
        //方法二通过原型方法直接获得当前时间的毫秒值
        var date = new Date().getTime()
        //方法三Date.now()可以获得当前的时间戳
        var date = Date.now()
        //方法四valueOf()函数返回时间戳值
        var data = (new Date()).valueOf()
        //方法五将获取时间方法对象转化为一个number类型的数值
        var data = Number(new Date())
    </script>

二. JS 生成随机

如:07854BB7-6572-496E-918B-81115BCF396E

  getUuid () {
    var s = [];
    var hexDigits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    for (var i = 0; i < 36; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    s[14] = "4"
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
    s[8] = s[13] = s[18] = s[23] = "-"
    let uuid = s.join("")
    return uuid
  }

三、ID生成器NanoID

2.1-安装

npm i nanoid

2.2-使用

import {nanoid} from 'nanoid';
let  idA = nanoid() //=> "V1SyGzR8_Z5jdHd8B-myT"
// 也可以指定生成字符串的长度
let  idB = nanoid(10)
 

下面是一些补充

在 JavaScript 中,可以通过使用 Date 对象的 getTime 方法来生成一个毫秒级别的唯一 ID。具体示例如下:

let uniqueId = new Date().getTime();
console.log(uniqueId); // 输出的结果类似于 1633067982824

如果需要生成更长的 ID,可以将该 ID 转换为字符串,并在后面添上一个随机数。示例如下:

let uniqueId = String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
console.log(uniqueId); // 输出的结果类似于 1633067982824432

上述代码将自动生成一个长度为 16 位的唯一 ID,其中前 13 位是时间戳,后 3 位是随机数。

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

相关文章

  • 详解JavaScript中this的指向问题

    详解JavaScript中this的指向问题

    本文主要介绍了JavaScript中this的指向问题。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • javascript 容错处理代码(屏蔽js错误)

    javascript 容错处理代码(屏蔽js错误)

    有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志,有时候更是直接弹出错误无法继续浏览页面,这样对于网站的正规性与权威性发展不利。
    2010-04-04
  • js中的this关键字详解

    js中的this关键字详解

    this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,下面分四种情况,详细讨论this的用法,感兴趣的朋友可以了解下
    2013-09-09
  • js获取对象的属性值两种方式

    js获取对象的属性值两种方式

    这篇文章主要介绍了js获取对象的属性值两种方式,在JavaScript中访问对象的属性值可以通过点运算符(.)或括号运算符([])两种方式,文中将两种方式的代码介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • JS实现鼠标点击展开或隐藏表格行的方法

    JS实现鼠标点击展开或隐藏表格行的方法

    这篇文章主要介绍了JS实现鼠标点击展开或隐藏表格行的方法,实例分析了javascript操作table表格与css样式的技巧,需要的朋友可以参考下
    2015-03-03
  • security.js实现的RSA加密功能示例

    security.js实现的RSA加密功能示例

    这篇文章主要介绍了security.js实现的RSA加密功能,结合实例形式分析了基于security.js进行RSA加密的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

    javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

    这篇文章主要介绍了javascript数组对象常用api函数,结合实例形式总结分析了javascript针对数组的连接、删除、反转、排序、插入等操作相关函数用法,需要的朋友可以参考下
    2016-09-09
  • javascript的函数

    javascript的函数

    javascript的函数...
    2006-09-09
  • js的es6常用新特性详解

    js的es6常用新特性详解

    ES6(ECMAScript 6,也称为ES2015)是JavaScript的一个重要更新版本,引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发,ES6的主要变化归纳为:语法糖、新机制、更好的语义、更多的内置对象和方法
    2023-11-11
  • JS实现的简单鼠标跟随DiV层效果完整实例

    JS实现的简单鼠标跟随DiV层效果完整实例

    这篇文章主要介绍了JS实现的简单鼠标跟随DiV层效果,涉及JavaScript基于时间函数动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论