JS生成唯一id方式介绍（UUID和NanoID）

前言

之前代码中前端生成唯一的 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 

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 

小结

本文主要讲解 js 生成 唯一 id 的方式，出自 haorooms 前端博客，转载必须注明出处！