jquery生成uuid如何保证唯一性 js生成唯一值

文章目录

• 前言
• 方法一
• 方法一扩展
• 方法二
• 方法二的拓展
• 方法三
• 方法四
• 方法五
• npm

• 1、下载安装指令
• 2、暴露的方法
• 3、使用方式

---

前言

在项目开发初期，后端是无法提供接口数据让前端写静态页面。此时需要前端自己创建假数据用来实现静态页面，在实现列表数据时，v-for需要绑定唯一值，每次都要手动创建唯一值特别麻烦，于是就写了这么一个插件。不仅在在项目初期需要创建唯一值，在获取真实数据时也有可能需要前端自行解决唯一值的问题。当后端返回的数据是对象时，对象的键与值正好是标题与值的关系，此时就需要前端自行遍历对象，并生成数组对象进行页面渲染时就需要唯一值了。

---

方法一

生成标准的唯一值，且方法最简单。

---

代码实现

function uniqueA(num = 16) {
	if (typeof num !== 'number') throw 'not a number.';
	
	let str = '';
	
	num = num < 8 ? 8 : num > 32 ? 32 : num;
	
	for (let i = 0; i < num; i++) str += 'x';
	
	return str.replace(/[x]/g, (c) => {
		let r = Math.random() * 16 | 0,
			v = c === 'x' ? r : (r & 0x3 | 0x8);
		
		return v.toString(16);
	});
}

---

函数调用

console.log('uniqueA:', uniqueA());
// uniqueA: 6b5f6550f02ff265
// 默认长度为16
console.log('uniqueA:', uniqueA(7));
// uniqueA: 6da4b53f
// 最小长度为8
console.log('uniqueA:', uniqueA(33));
// uniqueA: 2e69f4b9a066f4da9902e44454d753ad
// 最大长度为32
console.log('uniqueA:', uniqueA(16));
// uniqueA: d14700a18e7a8b74
console.log('uniqueA:', uniqueA('换行'));
// not a number.

---

方法一扩展

生成标准的唯一值，且使用了随机种子，比方法一要好。

---

代码实现

function uniqueAa() {
	let nowTime = Date.now() || new Date().getTime(),
		str = 'xxxxxxxx-xxxx-7xxx-yxxx-xxxxxxxxxxxx';
	
	// 高精度计时器
	if (window.performance && typeof window.performance.now === "function") nowTime += performance.now();
	
	return str.replace(/[xy]/ig, c => {
		let r = (nowTime + Math.random() * 16) % 16 | 0;
		
		nowTime = Math.floor(nowTime / 16);
		
		return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
	});
}

---

函数调用

console.log(uniqueAa());
// a16a6f51-dcff-732a-a715-74d7909a66f8

---

方法二

生成了不太规范的唯一标识，但最简便。

---

代码实现

function uniqueB() {
	return new Date().getTime() + Math.random().toString(36).substr(2);
}

---

函数调用

console.log(uniqueB());
// 1683814728709c3hfiufgge

---

方法二的拓展

比方法二看起来规范些，但是需要一个格式化时间的函数。

---

代码实现

function uniqueBa() {
	let formatDateTime = () => {
		let date = new Date(),
			y = date.getFullYear(),
			m = date.getMonth() + 1,
			d = date.getDate(),
			h = date.getHours(),
			minute = date.getMinutes(),
			second = date.getSeconds();
		
		m = m < 10 ? ('0' + m) : m;
		d = d < 10 ? ('0' + d) : d;
		
		return y + m + d + h + minute + second;
	}
	
	return formatDateTime() + Math.random().toString(36).substr(2);
}

---

函数调用

console.log(uniqueBa());
// 2023051122279txe9p46103l

---

方法三

代码实现

function uniqueC() {
	let s = [],
		hexDigits = "0123456789abcdef",
		i = 0;
	
	for (; i < 36; i++) s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
	
	// bits 12-15 of the time_hi_and_version field to 0010
	s[14] = "7";
	// bits 6-7 of the clock_seq_hi_and_reserved to 01
	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
	s[8] = s[13] = s[18] = s[23] = "-";
	
	return s.join("");
}

---

函数调用

console.log(uniqueC());
// 9d13fa53-1d8f-7c0a-b1cf-bd36c69a13f8

---

方法四

代码实现

function uniqueD() {
	let S = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
	
	return (S() + S() + "-" + S() + "-" + S() + "-" + S() + "-" + S() + S() + S());
}

---

函数调用

console.log(uniqueD());
// 384b0ee9-d334-2beb-0a00-e2026ac40e40

---

方法五

代码实现

function uniqueE(len = 16, radix = 62) {
	if (typeof len !== 'number' || typeof radix !== 'number') throw new Error('not a number.');
	
	len = len < 8 ? 8 : len > 32 ? 32 : len;
	radix = radix < 6 ? 6 : radix > 62 ? 62 : radix;
	
	let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
		uuid = [],
		i;
	
	// 把字符串变为数组
	chars = chars.split('');
	// 打乱数组顺序/使其变为无序
	chars = chars.sort(() => Math.random() - 0.5);
	
	if (len) {
		for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
	} else {
		let r = undefined;
		
		uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
		uuid[14] = '4';
	
		for (i = 0; i < 36; i++) {
			if (!uuid[i]) {
				r = 0 | Math.random() * 16;
				uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
			}
		}
	}
	
	return uuid.join('');
}

---

函数调用

console.log(uniqueE());
// 61GhSv51Jo1LH4cK
console.log(uniqueE(32, 16));
// 8ToTaA78TNBaNJ7vR82JaNHAacTH77v7
console.log(uniqueE('g', 16));
// not a number.

---

npm

1、下载安装指令

npm install js-unique --save

---

cnpm install js-unique -S

---

2、暴露的方法

序号方法名描述1uniqueA方法一(版本一，比较简单，有几率会获取相同的值)2uniqueAa方法一的扩展(生成标准的唯一值，且使用了随机种子，比方法一要好)3uniqueB方法二(生成了不太规范的唯一标识，但最简便)4uniqueBa方法二的扩展(比方法二看起来规范些，但是需要一个格式化时间的函数)5uniqueC方法三6uniqueD方法四7uniqueE方法五(可以传入长度与随机基数)

---

3、使用方式

CDN方式

<script src="../node_modules/js-unique/index.js"></script>

<script>
    let { uniqueA } = unique;

    console.log('uniqueA:', unique.uniqueA());
    // uniqueA: 6b5f6550f02ff265
    // 默认长度为16
    console.log('uniqueA:', unique.uniqueA(7));
    // uniqueA: 6da4b53f
    // 最小长度为8
    console.log('uniqueA:', uniqueA(33));
    // uniqueA: 2e69f4b9a066f4da9902e44454d753ad
    // 最大长度为32
    console.log('uniqueA:', uniqueA(16));
    // uniqueA: d14700a18e7a8b74
</script>

---

vue方式

import { uniqueA } from "js-unique";
// const unique = require("js-unique");

export default {
    name: "demo",
    data() {
        return {};
    },
    mounted() {
        // console.log("unique:", unique);
        // unique: {uniqueA: ƒ}

        console.log(uniqueA);
        // 使用方式与CDN一样
    },
};