正文

揭秘前端生成UUID的5种原生方法，轻松实现唯一标识符！

/0 浏览量
0722

在前端开发中，我们常常需要生成唯一标识符（UUID）来区分不同的数据或对象。UUID是一种128位的数字标识符，能够保证在全局范围内是唯一的。下面，我将详细介绍五种原生方法，帮助你轻松在前端生成UUID。

方法一：使用crypto.randomUUID()方法

从浏览器API（如Chrome 64及以上版本）中引入的crypto.randomUUID()方法，是生成UUID的最直接、最简洁的方式。

function generateUUID() {
  return crypto.randomUUID();
}

const uniqueId = generateUUID();
console.log(uniqueId); // 输出类似于 "6c0f1a84-4b3e-4f0f-9c7e-6d8e6b3b1e6e" 的UUID

方法二：利用crypto.getRandomValues()和math.random()方法

crypto.getRandomValues()方法可以生成一个随机的数组成员，math.random()方法可以生成一个随机浮点数。通过这两个方法，我们可以组合生成一个UUID。

function generateUUID() {
  let d = new Uint32Array(4);
  window.crypto.getRandomValues(d);

  let uuid = d[0] + '' + d[1] + '' + d[2] + '' + d[3];

  // 替换特定位置上的字符，确保格式正确
  uuid = uuid.replace(/-/g, '');
  uuid = uuid.substring(0, 8) + '-' + uuid.substring(8, 12) + '-' + uuid.substring(12, 16) + '-' + uuid.substring(16, 20) + '-' + uuid.substring(20);

  return uuid;
}

const uniqueId = generateUUID();
console.log(uniqueId); // 输出类似于 "6c0f1a84-4b3e-4f0f-9c7e-6d8e6b3b1e6e" 的UUID

方法三：使用uuid库

如果你不想直接操作底层的API，可以使用第三方库uuid来生成UUID。这种方法适用于多种JavaScript环境，包括Node.js。

const { v4: uuidv4 } = require('uuid');

function generateUUID() {
  return uuidv4();
}

const uniqueId = generateUUID();
console.log(uniqueId); // 输出类似于 "6c0f1a84-4b3e-4f0f-9c7e-6d8e6b3b1e6e" 的UUID

方法四：基于时间戳和随机数

结合当前时间戳和随机数生成UUID，这种方法较为简单，但可能存在重复的概率。

function generateUUID() {
  let d = new Date().getTime(); // 获取当前时间戳
  let d2 = (typeof performance !== 'undefined' && performance.now && (performance.now()*1000)) || 0; // 获取当前高精度时间戳

  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16;
    if(d > 0){ // 使用时间戳，确保全局唯一性
      r = (d + r)%16 | 0;
      d = Math.floor(d/16);
    } else { // 使用随机数，提高随机性
      r = (d2 + r)%16 | 0;
      d2 = Math.floor(d2/16);
    }
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

const uniqueId = generateUUID();
console.log(uniqueId); // 输出类似于 "6c0f1a84-4b3e-4f0f-9c7e-6d8e6b3b1e6e" 的UUID

方法五：基于数据库和序列

在某些场景下，你可以使用数据库和序列来生成UUID。这种方式适用于分布式系统或需要高并发访问的场景。

// 假设我们使用MySQL数据库
// 1. 创建一个表，包含一个名为uuid的自动增长字段
// 2. 查询该字段的值，即为UUID

const mysql = require('mysql');

const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'yourusername',
  password : 'yourpassword',
  database : 'yourdatabase'
});

connection.connect();

connection.query('SELECT AUTO_INCREMENT FROM yourtable LIMIT 1', function (error, results, fields) {
  if (error) throw error;
  console.log(results[0].AUTO_INCREMENT); // 输出类似于 "6c0f1a84" 的UUID
});

connection.end();

通过以上五种方法，你可以轻松地在前端生成UUID。选择适合你的方法，让唯一标识符成为你开发过程中的得力助手！

-- 展开阅读全文 --