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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 为指定元素增加样式的js代码

    为指定元素增加样式的js代码

    从此例子中发现,js对"" 与 " " ,注意中间还有一空格,解析是非常严格的。在java与net中还有待于研究。
    2009-12-12
  • JS实现图片元素转BASE64编码的简单示例

    JS实现图片元素转BASE64编码的简单示例

    在Web开发中,我们经常需要将图片转换为Base64格式,以便在不依赖外部资源的情况下直接在HTML中使用,在这篇文章中,我将向您展示如何使用JavaScript将图片元素转BASE64编码,需要的朋友可以参考下
    2023-12-12
  • 深入剖析JavaScript中Geolocation API的使用

    深入剖析JavaScript中Geolocation API的使用

    这篇文章主要来和大家一起深入探讨 JavaScript 的 Geolocation API,看看它的强大之处以及如何在你的项目中应用它,感兴趣的可以了解下
    2024-03-03
  • javascript和jQuery实现网页实时聊天的ajax长轮询

    javascript和jQuery实现网页实时聊天的ajax长轮询

    在做网页实时聊天的时候常常需要长轮询,本文由于采用原生的JS及AJAX,所以简单易懂,通过这篇文章就可以建立一个简单的聊天室程序。
    2016-07-07
  • 非常不错的弹出一个div的js代码

    非常不错的弹出一个div的js代码

    看代码主要是用css控制div的显示和div的显示位置和式样的代码
    2008-06-06
  • javascript数据结构与算法之检索算法

    javascript数据结构与算法之检索算法

    查找数据有2种方式,顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高,但是必须是已经排好序的列表元素集合
    2015-04-04
  • 开源的javascript项目Kissy介绍

    开源的javascript项目Kissy介绍

    本文向大家介绍了开源的javascript项目Kissy,是taobao UED小组推的一款js框架,我们来简单研究下,为什么taobao这么推崇他呢。
    2014-11-11
  • javascript重复绑定事件造成的后果说明

    javascript重复绑定事件造成的后果说明

    最近在修改百度地图开源的东西,想把里面耦合在一起的代码给拆分出来,拆解之后,发现了一些问题,逻辑上没有问题的情况下,该出现的效果没有出现
    2013-03-03
  • Yii2使用Bootbox插件实现自定义弹窗

    Yii2使用Bootbox插件实现自定义弹窗

    Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框,基于 Twitter 的 Bootstrap 开发。今天我们就来研究下,如何使用bootbox插件来实现自定义弹窗。
    2015-04-04
  • JS简单实现点击复制链接的方法

    JS简单实现点击复制链接的方法

    这篇文章主要介绍了JS简单实现点击复制链接的方法,提供了2种简单的复制链接操作方法供大家选择使用,需要的朋友可以参考下
    2016-08-08

最新评论