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

相关文章

MybatisGenerator文件生成不出对应文件的问题

《MybatisGenerator文件生成不出对应文件的问题》本文介绍了使用MybatisGenerator生成文件时遇到的问题及解决方法,主要步骤包括检查目标表是否存在、是否能连接到数据库、配置生成... 目录MyBATisGenerator 文件生成不出对应文件先在项目结构里引入“targetProje

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log

深入理解Redis大key的危害及解决方案

《深入理解Redis大key的危害及解决方案》本文主要介绍了深入理解Redis大key的危害及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、背景二、什么是大key三、大key评价标准四、大key 产生的原因与场景五、大key影响与危

Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南

《Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南》在日常数据处理工作中,我们经常需要将不同Excel文档中的数据整合到一个新的DataFrame中,以便进行进一步... 目录一、准备工作二、读取Excel文件三、数据叠加四、处理重复数据(可选)五、保存新DataFram

SpringBoot生成和操作PDF的代码详解

《SpringBoot生成和操作PDF的代码详解》本文主要介绍了在SpringBoot项目下,通过代码和操作步骤,详细的介绍了如何操作PDF,希望可以帮助到准备通过JAVA操作PDF的你,项目框架用的... 目录本文简介PDF文件简介代码实现PDF操作基于PDF模板生成,并下载完全基于代码生成,并保存合并P

python 字典d[k]中key不存在的解决方案

《python字典d[k]中key不存在的解决方案》本文主要介绍了在Python中处理字典键不存在时获取默认值的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录defaultdict:处理找不到的键的一个选择特殊方法__missing__有时候为了方便起见,

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

详解Java中如何使用JFreeChart生成甘特图

《详解Java中如何使用JFreeChart生成甘特图》甘特图是一种流行的项目管理工具,用于显示项目的进度和任务分配,在Java开发中,JFreeChart是一个强大的开源图表库,能够生成各种类型的图... 目录引言一、JFreeChart简介二、准备工作三、创建甘特图1. 定义数据集2. 创建甘特图3.

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom