持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情
前端页面中经常会使用一串值作为唯一的标识，有些时候这个标识并不用于表示具体的含义，比如 id、key 值或者生成唯一的文件名（防止重名等）。接下来要提到的 UUID 就是生成唯一标识的方法之一。
UUID — Universally Unique Identifier，含义是通用唯一识别码（也叫做全局唯一标识）
一个 UUID 是由32位16进制数组成，大小为128bit，生成一串 UUID 可以使用随机数、伪随机数、 MAC 地址、时间戳、命名空间等方式来保证生成的字符串的唯一性（生成的过程会涉及到，但并不是全部会用到）。
具体格式：xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx，如：'9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
'-'将上面的一串字符串分为 8-4-4-4-8 长度的五段子字符串
使用方法
以 Vue 项目为例，使用方法如下：
- 安装以及引入
npm install uuid --save
import { v4 } from 'uuid';
// 或者
// import { v4 as uuidv4 } from 'uuid';
注：如果安装引入后依旧提示无法找到或者未定义等问题，一般重新安装即可正常使用
- 使用
v4（）函数执行后即可生成一串带’-’连接的字符串
UUID生成的会比较长，有需要的时候可以去掉 UUID 中的连接线，具体操作如下：
const key = v4().replaceAll('-', '')
// 或者执行： uuidv4()
UUID 的 API
具体操作可参照 UUID 官方
常用的生成 UUID 的方式
生成 UUID 大致有四种不同算法的版本，分别是基于不同原理进行字符串的生成。前面的 uuidv4() 就是其中的一种方式。
比较常用的是随机数版本的实现：
function generateKey() {
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);
});
}
generateKey()
或是这样的形式：
function uuid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
uuid()
执行函数后会生成一串 UUID ，生成时也可以指定字符串的长度。
