百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

JS生成唯一id方式介绍(UUID和NanoID)

nanshan 2024-11-14 16:38 25 浏览 0 评论

之前代码中前端生成唯一的id方式,一般采用uuid的方式,最近唯一id有了更好的方式,那就是NanoID,今天这篇文章记录一下NanoID 正在取代 UUID?及js 生成uuid及NanoID的方法。

为什么 NanoID 正在取代 UUID

1、.更安全 在大多数随机生成器中,它们使用不安全的 Math.random()。但是,NanoID 使用 crypto module 和 Web Crypto API,意味着 NanoID 更安全。 此外,NanoID 在 ID 生成器的实现过程中使用了自己的算法,称为 统一算法,而不是使用“随机 % 字母表” random % alphabet。

2、 它既快速又紧凑 NanoID 比 UUID 快 60%。与 UUID 字母表中的 36 个字符不同,NanoID 只有 21 个字符。

此外,NanoID 支持 14 种不同的编程语言,它们分别是:

C#、C++、Clojure 和 ClojureScript、Crystal、Dart & Flutter、Deno、Go、Elixir、Haskell、Janet、Java、Nim、Perl、PHP、带字典的 Python、Ruby、Rust、Swift

3、兼容性

它还支持 PouchDB、CouchDB WebWorkers、Rollup 以及 React 和 Reach-Native 等库。 我们可以使用 npx nanoid 在终端中获得唯一 ID。

js如何生成

我们看下他们都是如何用js生成的

首先说下,之前我们是如何生成uuid的

方法一:

function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}
guid() // "a1ca0f7b-51bd-4bf3-a5d5-6a74f6adc1c7"

方法二:

var _S4 = function() {
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}

// 获取广告请求唯一ID 方式是当前时间戳+13位随机吗
export function GetsingleId() {
  var _res = (_S4() + _S4() + '-' + _S4() + '-' + _S4() + '-' + _S4() + '-' + _S4() + _S4() + _S4())
  return '_' + config.version + '_' + _res
}

方法三:

function uuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    return uuid;
}
uuid() // "ffb7cefd-02cb-4853-8238-c0292cf988d5"

NanoID的方式

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

主要可以通过npm包的形式安装,核心代码如下:

let urlAlphabet =
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'

let nanoid = (size = 21) => {
  let id = ''
  // A compact alternative for `for (var i = 0; i < step; i++)`.
  let i = size
  while (i--) {
    // `| 0` is more compact and faster than `Math.floor()`.
    id += urlAlphabet[(Math.random() * 64) | 0]
  }
  return id
}

相关推荐

HTTP 和 HTTPS 有何不同?一文带你全面了解

随着互联网时代的高速发展,Web服务器和客户端之间的安全通信需求也越来越高。HTTP和HTTPS是两种广泛使用的Web通信协议。本文将介绍HTTP和HTTPS的区别,并探讨为什么HTTPS已成为We...

HTTP和HTTPS的区别?

本文主要讲解http和https的关系与区别,分辨不清区别的同学要注意朝下看完,Web面试中最常问的已到面试题~~一.HTTP和HTTPS的相同点:大多数情况下,HTTP和HTTPS是相同的,...

详解HTTP协议与RESTFUL

1.HTTP简介http协议是一种超文本传输协议,主要应用在浏览器与服务器之间的通信,可以传输文本,图片,视频等。它是一种应用层协议,也是基于TCP协议,当然现在流行的Https协议是在TLS或SSL...

http与https的区别,读完之后,大部分程序员收藏了...

在URL前加https://前缀表明是用SSL加密的。你的电脑与服务器之间收发的信息传输将更加安全。Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。http和ht...

JMeter测试HTTP GET请求(附实例)

一、HTTPRequest配置项解析●WebServer:1.Protocol[http]:○若为HTTP协议可以不填写(默认为HTTP);○若为HTTPS协议可以填写“https”;还可...

2019山东高考分数线公布:本科文503 理443

刚刚,2019年山东高考各批次录取最低分数线公布了!6月24日下午,山东省教育厅举行2019年山东高考第二场新闻发布会。山东省教育招生考试院在发布会上公布了山东今年高招各批次录取控制分数线。其中,本科...

Linux系统网站出现503错误提示怎么解决?

当Linux系统上的网站出现503ServiceUnavailable错误时,通常表示服务器暂时无法处理请求,可能由后端服务崩溃、资源耗尽或配置错误导致。以下是系统化的排查和解决方案:一、...

三石说:一文带你了解Https

今天我们继续深入http,本篇将介绍Https的内容,相信你看过之后对https有一定的了解。HTTPSHTTPS(全称:HyperTextTransferProtocoloverSecu...

HTTP与HTTPS的区别

首先,需要知道HTTP和HTTPS是什么。HTTP是超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,是互联网上应用最为广泛的一种网络协议。也...

Caddy服务器开启HTTP/3:如何让你的网站快如闪电?

Caddy服务器开启HTTP/3:如何让你的网站快如闪电?在互联网技术飞速迭代的今天,HTTP/3正以革命性的姿态颠覆传统网络传输模式。作为首个基于QUIC协议的HTTP标准,它不仅能大幅提升网站加载...

HTTP/1.1、HTTP/2、HTTP/3 演变

HTTP基本概念HTTP是超文本传输协议,也就是HyperTextTransferProtocol。HTTP常见的状态码有哪些?1xx类状态码属于提示信息,是协议处理中的一种中间状态,实际...

HTTP/3 黑科技:三次握手如何进阶 QUIC?30 年通信细节揭秘

大家好,我是“极客运维社”的飞哥,点击右上方“关注”,每天和大家分享关于网络设备及系统和企业组网方面干货。码字不易,如果您觉得文章还可以,就点赞+关注+收藏吧,也许在以后某个时间能够用得到。H...

总结HTTP/HTTPS协议基础的有那些漏洞,怎么检查,怎么防范

以下是基于黑盒测试、白盒测试和灰盒测试视角对HTTP/HTTPS协议漏洞检查与防范的分类整理:一、黑盒测试(外部视角,无内部权限)定义:模拟攻击者视角,仅通过外部网络接口进行测试,不依赖系...

什么是HTTP? HTTP 和 HTTPS 的区别?

HTTP(HyperTextTransferProtocol),即超文本运输协议,是实现网络通信的一种规范。HTTP是一个传输协议,即将数据由A传到B或将B传输到A,并且A与B之间能够存...

一篇文章搞懂HTTP和HTTPS的的本质区别

http协议是基于tcp协议,默认是80端口。它的特点是什么?它是基于请求和响应的,大家抓个包能看到http协议有一个请求报文有一个响应报文,还有它是一个无状态的协议,还有一个无连接的协议。无连接是指...

取消回复欢迎 发表评论: