前端生成UUID

UUID（Universally Unique Identifier）是128位的唯一標識符，可用於標識信息或實體。在前端開發中，有時需要生成UUID來標識某些實體或用於其他用途。本文將從多個方面討論如何在前端生成UUID。

一、前端生成UUID v4

UUID v4是最常用的UUID版本，它是通過隨機數生成的，因此具備足夠的唯一性。在JavaScript中，可以使用第三方庫uuid.js來生成UUID v4。

npm install uuid

使用方法如下：

// ES6
import { v4 as uuidv4 } from 'uuid';

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

// 生成UUID
const uuid = uuidv4();
console.log(uuid);

上述代碼使用ES6語法和CommonJS語法引入uuid.js庫，然後調用v4函數生成UUID。

二、前端怎麼生成UUID

除了使用第三方庫以外，前端也可以通過自行編寫代碼生成UUID。以下代碼使用JavaScript的Math.random函數生成十六進制字符串並拼接成UUID。

function generateUUID() {
  let d = new Date().getTime();
  if (window.performance && typeof window.performance.now === 'function') {
    d += performance.now();
  }
  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  return uuid;
}

上述代碼使用當前時間和Math.random函數生成UUID的隨機部分，保證UUID的唯一性。UUID的格式為“xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx”，其中x為0~9或a~f的十六進制數，y為8、9、a或b，生成的十六進制字符串根據這個模式替換“x”和“y”。

三、前端生成唯一ID

如果不需要UUID的時效性和唯一性，前端也可以通過其他方式生成唯一ID。以下代碼定義了一個全局變量，每調用一次getNextId函數就返回一個新的唯一ID：

let id = 0;
function getNextId() {
  return ++id;
}

上述代碼每次調用getNextId函數時，就會返回一個唯一ID。由於id是全局變量，每一次調用next函數時都會自增1，保證返回的ID唯一性。

四、前端生成圖片

前端可以使用canvas和FileSaver.js庫生成圖片並下載到本地。以下代碼使用canvas先將指定的文本渲染成圖片，然後調用FileSaver.js庫將圖片保存到本地。

// 引入FileSaver.js庫
// npm install file-saver --save
import { saveAs } from 'file-saver';

// 創建canvas
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
const ctx = canvas.getContext('2d');

// 渲染文本
ctx.font = "30px Arial";
ctx.fillText("Hello World", 0, 50);

// 轉換為圖片並下載
canvas.toBlob(function(blob) {
  saveAs(blob, "hello_world.png");
}, "image/png");

上述代碼先創建了一個canvas，然後使用canvas將指定的文本渲染成圖片。最後調用canvas的toBlob方法將圖片轉換為Blob對象，再使用FileSaver.js庫將Blob對象保存到本地。

五、前端生成二維碼

前端可以使用qrcode.js庫生成二維碼。以下代碼使用qrcode.js庫生成包含指定文本的二維碼。

// 引入qrcode.js庫
// npm install qrcode --save
import QRCode from 'qrcode';

// 生成二維碼
const canvas = document.createElement('canvas');
QRCode.toCanvas(canvas, "https://www.example.com", function(error) {
  if (error) console.error(error);
  console.log('二維碼生成成功!');
});

上述代碼使用qrcode.js庫中的toCanvas方法生成二維碼並渲染到canvas上。toCanvas方法接收canvas和待生成的文本作為參數，還可以添加一個回調函數來處理生成完成後的操作。

六、前端生成隨機數

前端可以使用Math.random函數生成偽隨機數。以下代碼生成一個0~9之間的隨機數。

const randomNum = Math.floor(Math.random() * 10);
console.log(randomNum);

上述代碼使用Math.random函數生成0~1之間的隨機浮點數，然後將其乘以10並向下取整，生成0~9之間的整數。

七、前端生成Excel

前端可以使用SheetJS庫生成Excel文件。以下代碼使用SheetJS庫生成包含數據的Excel文件。

// 引入SheetJS庫
// npm install xlsx --save
import XLSX from 'xlsx';

// 定義數據
const data = [
  ["姓名", "年齡", "城市"],
  ["張三", 22, "上海"],
  ["李四", 25, "北京"],
  ["王五", 28, "廣州"]
];

// 創建工作簿
const worksheet = XLSX.utils.aoa_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

// 導出Excel
XLSX.writeFile(workbook, "data.xlsx");

上述代碼先定義了一個包含數據的二維數組，然後使用SheetJS庫將這個二維數組轉換為工作表和工作簿。最後調用SheetJS庫中的writeFile方法將工作簿導出為Excel文件。

八、JS生成UUID算法

以上介紹的UUID v4生成算法其實是一種比較通用的UUID生成算法，具體內容見代碼。

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

上述代碼使用Math.random函數生成UUID的隨機部分，與前面提到的方法基本相同。其中符號“&”為按位與運算符，它的作用是把左邊的數字轉換為二進制後與右邊的數字按位與運算，然後返回結果，起到了保留右邊數字的某些二進制位的作用。