前端 web 已支持 randomUUID 方法

从 Chome92 版本开始，crypto 模块已经支持randomUUID()方法了。

1. 以前的方式 #

在前端 web 中，我们在生成 uuid 时，通常都会使用时间戳或 Math.random()。例如在 stackoverflow 上，有段很出名的代码：How to create a GUID / UUID，就是Math.random()来生成的：

function uuidv4() {
  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);
  });
}

console.log(uuidv4()); // "f94adc58-89b7-4c70-bc92-2935ea6fb5d2" 格式一样，但每次都不一样

每个位置都调用一次 random()方法。

2. randomUUID #

现在，Chrome 从 92 版本开始，已经原生支持 uuId 方法了，即crypto.randomUUID()。

crypto.randomUUID();

以后想获取一个随机值，或者用来标识设备（要求不高的前提下）的时候，就可以用这个randomUUID()方法。

3. 总结 #

randomUUID()这个浏览器提供的原生确实很好用，而且符合 v4 版本的格式。

但就是有一个缺点：兼容性太差。不止其他浏览器不支持，即使在 Chrome 浏览器，也只有从 92 版本开始，才能使用。

不过相信不久的将来，其他浏览器也会支持这个方法的。

我们来写一个前端获取uuid的方法。

1. 优先使用crypto.randomUUID；
2. 没有的话，使用优先使用crypto.getRandomValues；
3. 使用Math.random()进行兜底；

const generateUUID = () => {
  if (typeof crypto === 'object') {
    if (typeof crypto.randomUUID === 'function') {
      // https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
      return crypto.randomUUID();
    }
    if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') {
      // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
      const callback = (c) => {
        const num = Number(c);
        return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16);
      };
      return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback);
    }
  }
  let timestamp = new Date().getTime();
  let perforNow = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0;
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    let random = Math.random() * 16;
    if (timestamp > 0) {
      random = (timestamp + random) % 16 | 0;
      timestamp = Math.floor(timestamp / 16);
    } else {
      random = (perforNow + random) % 16 | 0;
      perforNow = Math.floor(perforNow / 16);
    }
    return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16);
  });
};