js生成唯一标识符(例如key或者id)

2024-08-29 22:28
文章标签 js 生成 id key 唯一 标识符

本文主要是介绍js生成唯一标识符(例如key或者id),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端遍历渲染的时候,往往需要唯一标识符用作key或者id,当然可以使用第三方优秀的库,如 uuid 或 nanoid。下面不用第三方库的情况下,js生成独一无二的key或者id的方案

方法

/*** 生成唯一 key,这里使用时间戳 + 随机数* 你也可以引入第三方库,如 uuid 或 nanoid,但这里为了减少依赖,直接使用 JS 生成* @returns*/
const generateUniqueKey = () => {return `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;
};

解析

这段代码生成当前时间戳随机字符串拼接的唯一标识符。我们可以将其分解为几个部分来详细解析:

1. new Date().getTime()

  • new Date(): 创建一个表示当前日期和时间的 Date 对象。
  • getTime(): 返回自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数。这是一个大整数,表示当前时间的时间戳。

2. Math.random().toString(36).substr(2, 9)

  • Math.random(): 生成一个介于 0(包含)和 1(不包含)之间的随机浮点数。
  • toString(36): 将浮点数转换为一个以 36 为基数的字符串。基数 36 使用 0-9 和 a-z 来表示数字。
  • substr(2, 9): 从转换后的字符串中提取从索引 2 开始的 9 个字符。索引 0 和 1 通常是 “0.”,所以从索引 2 开始提取可以跳过这两个字符。

有兴趣可以参考

  • uuid库生成不重复的id字符串的原理

这篇关于js生成唯一标识符(例如key或者id)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1119022

相关文章

java中判断json key是否存在的几种方法

《java中判断jsonkey是否存在的几种方法》在使用Java处理JSON数据时,如何判断某一个key是否存在?本文就来介绍三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目http://www.chinasem.cn录第一种方法是使用 jsONObject 的 has 方法

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引

k8s admin用户生成token方式

《k8sadmin用户生成token方式》用户使用Kubernetes1.28创建admin命名空间并部署,通过ClusterRoleBinding为jenkins用户授权集群级权限,生成并获取其t... 目录k8s admin用户生成token创建一个admin的命名空间查看k8s namespace 的

使用Node.js和PostgreSQL构建数据库应用

《使用Node.js和PostgreSQL构建数据库应用》PostgreSQL是一个功能强大的开源关系型数据库,而Node.js是构建高效网络应用的理想平台,结合这两个技术,我们可以创建出色的数据驱动... 目录初始化项目与安装依赖建立数据库连接执行CRUD操作查询数据插入数据更新数据删除数据完整示例与最佳

Redis高性能Key-Value存储与缓存利器常见解决方案

《Redis高性能Key-Value存储与缓存利器常见解决方案》Redis是高性能内存Key-Value存储系统,支持丰富数据类型与持久化方案(RDB/AOF),本文给大家介绍Redis高性能Key-... 目录Redis:高性能Key-Value存储与缓存利器什么是Redis?为什么选择Redis?Red

Vue3 如何通过json配置生成查询表单

《Vue3如何通过json配置生成查询表单》本文给大家介绍Vue3如何通过json配置生成查询表单,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录功能实现背景项目代码案例功能实现背景通过vue3实现后台管理项目一定含有表格功能,通常离不开表单

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

如何通过try-catch判断数据库唯一键字段是否重复

《如何通过try-catch判断数据库唯一键字段是否重复》在MyBatis+MySQL中,通过try-catch捕获唯一约束异常可避免重复数据查询,优点是减少数据库交互、提升并发安全,缺点是异常处理开... 目录1、原理2、怎么理解“异常走的是数据库错误路径,开销比普通逻辑分支稍高”?1. 普通逻辑分支 v