阿幸课堂随机点名

代码功能

这个是一个HTML网页端,简单来说就是可以双击之后运行进行点名。
当然,不局限于课堂点名

代码功能

Excel 导入增强:

增加了列选择器,可以指定从哪一列读取学生姓名
增加了起始行选择器,可以跳过标题行或其他非学生数据行

自动检测功能:尝试识别可能包含姓名的列并自动选择

一键清空功能:
在学生列表上方添加了 “清空名单” 按钮
点击后会提示确认,防止误操作

用户体验优化:

导入 Excel 后显示导入选项,导入完成后自动隐藏
优化了通知提示效果
保持了原有随机点名的核心功能不变

界面截图

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>阿幸随机点名抽问</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script><script>tailwind.config = {theme: {extend: {colors: {primary: '#4F46E5',secondary: '#EC4899',accent: '#8B5CF6',neutral: '#F3F4F6',"neutral-dark": '#1F2937',},fontFamily: {cute: ['"Comic Sans MS"', '"Marker Felt"', 'Arial', 'sans-serif'],},animation: {'bounce-slow': 'bounce 3s infinite',}},}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.bg-cute {background-image: radial-gradient(circle at 25% 25%, rgba(255, 220, 220, 0.8) 0%, transparent 50%),radial-gradient(circle at 75% 75%, rgba(220, 220, 255, 0.8) 0%, transparent 50%);background-color: #FFF5F7;}.name-container {perspective: 1000px;}.name-card {transform-style: preserve-3d;transition: transform 0.5s;}.name-card:hover {transform: translateY(-5px) rotateX(5deg);}}</style>
</head>
<body class="min-h-screen bg-cute flex flex-col items-center justify-between p-4 md:p-8"><!-- 顶部标题区域 --><header class="w-full text-center mb-8"><h1 class="text-[clamp(2rem,5vw,3.5rem)] font-cute font-bold text-primary text-shadow animate-bounce-slow"><i class="fa fa-star text-yellow-400"></i>阿幸随机点名抽问<i class="fa fa-star text-yellow-400"></i></h1><p class="text-gray-600 mt-2">公平、随机、有趣的课堂互动工具</p></header><!-- 主要内容区域 --><main class="flex-1 w-full max-w-4xl flex flex-col items-center justify-center"><!-- 名字显示区域 --><div class="name-container w-full bg-white rounded-2xl shadow-lg p-6 md:p-10 mb-8 transform transition-all duration-300 hover:shadow-xl"><div class="name-card bg-gradient-to-br from-pink-100 to-purple-100 rounded-xl p-8 text-center"><p id="displayedName" class="text-[clamp(2.5rem,8vw,5rem)] font-black text-neutral-dark transition-all duration-500">准备开始</p></div></div><!-- 控制面板 --><div class="w-full bg-white rounded-xl shadow-md p-6 md:p-8"><div class="flex flex-col md:flex-row items-center justify-between gap-6"><!-- 速度控制滑块 --><div class="w-full md:w-1/3"><label for="speedControl" class="block text-gray-700 font-medium mb-2 flex items-center"><i class="fa fa-tachometer text-accent mr-2"></i>滚动速度</label><input type="range" id="speedControl" min="50" max="500" value="200" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"><div class="flex justify-between text-xs text-gray-500 mt-1"><span></span><span></span></div></div><!-- 开始/停止按钮 --><div class="w-full md:w-auto flex justify-center md:justify-end"><button id="toggleButton" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95 flex items-center"><i class="fa fa-play mr-2"></i><span>开始点名</span></button></div></div></div><!-- 学生名单管理 --><div class="w-full mt-8 bg-white rounded-xl shadow-md p-6 md:p-8"><h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"><i class="fa fa-users text-secondary mr-2"></i>学生名单管理</h2><div class="flex flex-col md:flex-row gap-4"><!-- 文本导入 --><div class="w-full md:w-1/2"><label for="nameList" class="block text-gray-700 font-medium mb-2">输入学生姓名(用逗号、空格或换行分隔)</label><textarea id="nameList" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="张三, 李四, 王五..."></textarea><button id="importNames" class="mt-2 bg-accent hover:bg-accent/90 text-white font-medium py-2 px-4 rounded-lg shadow transition-all duration-200 flex items-center"><i class="fa fa-upload mr-1"></i> 导入名单</button></div><!-- Excel导入 --><div class="w-full md:w-1/2"><label class="block text-gray-700 font-medium mb-2">或从Excel文件导入</label><div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-colors cursor-pointer" id="excelDropArea"><input type="file" id="excelFile" accept=".xlsx,.xls" class="hidden"><i class="fa fa-file-excel-o text-3xl text-gray-400 mb-2"></i><p class="text-gray-500">拖放Excel文件到此处<br>或点击选择文件</p></div><div id="excelFileName" class="mt-2 text-sm text-gray-600 hidden"></div><!-- Excel导入选项 --><div id="excelOptions" class="mt-4 grid grid-cols-2 gap-4 hidden"><div><label for="excelColumn" class="block text-gray-700 text-sm font-medium mb-1">姓名列选择</label><select id="excelColumn" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary"><option value="A">A列</option><option value="B">B列</option><option value="C">C列</option><option value="D">D列</option><option value="E">E列</option><option value="F">F列</option></select></div><div><label for="excelStartRow" class="block text-gray-700 text-sm font-medium mb-1">起始行号</label><input type="number" id="excelStartRow" min="1" value="1" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary"></div></div><button id="importExcel" class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg shadow transition-all duration-200 flex items-center hidden"><i class="fa fa-check mr-1"></i> 确认导入Excel</button></div></div><!-- 学生列表显示 --><div class="mt-6"><div class="flex justify-between items-center mb-3"><h3 class="text-lg font-medium text-gray-700 flex items-center"><i class="fa fa-list-ul text-primary mr-2"></i>已导入学生 (<span id="studentCount">0</span>)</h3><button id="clearStudents" class="text-red-500 hover:text-red-600 text-sm font-medium flex items-center"><i class="fa fa-trash mr-1"></i> 清空名单</button></div><div id="studentList" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 max-h-40 overflow-y-auto p-2 bg-gray-50 rounded-lg"><div class="text-gray-400 col-span-full text-center py-4">暂无学生名单</div></div></div></div></main><!-- 页脚 --><footer class="w-full text-center text-gray-500 text-sm mt-8"><p>双击此页面即可离线使用 | 点击右上角可保存为应用</p></footer><script>document.addEventListener('DOMContentLoaded', function() {// DOM元素const displayedName = document.getElementById('displayedName');const toggleButton = document.getElementById('toggleButton');const speedControl = document.getElementById('speedControl');const nameList = document.getElementById('nameList');const importNames = document.getElementById('importNames');const excelFile = document.getElementById('excelFile');const excelDropArea = document.getElementById('excelDropArea');const excelFileName = document.getElementById('excelFileName');const excelOptions = document.getElementById('excelOptions');const importExcel = document.getElementById('importExcel');const excelColumn = document.getElementById('excelColumn');const excelStartRow = document.getElementById('excelStartRow');const studentList = document.getElementById('studentList');const studentCount = document.getElementById('studentCount');const clearStudents = document.getElementById('clearStudents');// 状态变量let students = [];let isRolling = false;let rollInterval;let rollSpeed = 200; // 默认速度,值越小越快let selectedName = null;let excelData = null;// 处理学生名单导入importNames.addEventListener('click', function() {const text = nameList.value.trim();if (!text) {alert('请输入学生姓名');return;}// 支持逗号、空格、换行等多种分隔符students = text.split(/[,\s\n]+/).filter(name => name.trim() !== '');updateStudentList();resetRollState();showNotification(`成功导入 ${students.length} 名学生`);});// 处理Excel文件导入excelFile.addEventListener('change', handleExcelFile);excelDropArea.addEventListener('click', () => excelFile.click());// 拖放功能excelDropArea.addEventListener('dragover', function(e) {e.preventDefault();this.classList.add('border-primary', 'bg-primary/5');});excelDropArea.addEventListener('dragleave', function() {this.classList.remove('border-primary', 'bg-primary/5');});excelDropArea.addEventListener('drop', function(e) {e.preventDefault();this.classList.remove('border-primary', 'bg-primary/5');if (e.dataTransfer.files.length) {excelFile.files = e.dataTransfer.files;handleExcelFile();}});function handleExcelFile() {const file = excelFile.files[0];if (!file) return;if (!file.name.match(/\.(xlsx|xls)$/i)) {alert('请选择Excel文件 (.xlsx 或 .xls)');return;}excelFileName.textContent = `已选择: ${file.name}`;excelFileName.classList.remove('hidden');excelOptions.classList.remove('hidden');importExcel.classList.remove('hidden');const reader = new FileReader();reader.onload = function(e) {try {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];// 保存Excel数据供后续处理excelData = worksheet;// 尝试自动检测姓名列autoDetectNameColumn(worksheet);} catch (error) {console.error('Excel处理错误:', error);alert('处理Excel文件时出错,请确保文件格式正确');}};reader.readAsArrayBuffer(file);}// 自动检测姓名列function autoDetectNameColumn(worksheet) {const nameKeywords = ['姓名', '名字', '学生姓名', 'name', 'student'];const headerRow = XLSX.utils.sheet_to_json(worksheet, { header: 1, range: 0, raw: false })[0] || [];for (let i = 0; i < headerRow.length; i++) {const cellValue = headerRow[i] || '';const cellValueLower = cellValue.toString().toLowerCase();if (nameKeywords.some(kw => cellValueLower.includes(kw))) {// 将列索引转换为字母 (0->A, 1->B, ...)const columnLetter = String.fromCharCode(65 + i);excelColumn.value = columnLetter;return;}}// 默认选择A列excelColumn.value = 'A';}// 确认导入ExcelimportExcel.addEventListener('click', function() {if (!excelData) {alert('请先选择Excel文件');return;}const column = excelColumn.value;const startRow = parseInt(excelStartRow.value) || 1;try {// 提取指定列的数据const range = XLSX.utils.decode_range(excelData['!ref'] || 'A1:A1');const maxRow = range.e.r;students = [];for (let row = startRow; row <= maxRow; row++) {const cellAddress = `${column}${row}`;const cell = excelData[cellAddress];if (cell && cell.v && cell.v.toString().trim() !== '') {students.push(cell.v.toString().trim());}}if (students.length === 0) {alert('未能从Excel文件中提取到有效姓名,请检查列选择和起始行');return;}updateStudentList();resetRollState();showNotification(`成功从Excel导入 ${students.length} 名学生`);// 导入后隐藏选项excelOptions.classList.add('hidden');importExcel.classList.add('hidden');} catch (error) {console.error('Excel导入错误:', error);alert('导入Excel数据时出错,请检查设置');}});// 更新学生列表显示function updateStudentList() {studentList.innerHTML = '';if (students.length === 0) {studentList.innerHTML = `<div class="text-gray-400 col-span-full text-center py-4">暂无学生名单</div>`;studentCount.textContent = '0';return;}students.forEach(name => {const nameEl = document.createElement('div');nameEl.className = 'bg-white border border-gray-200 rounded p-2 text-center text-sm hover:bg-primary/5 transition-colors';nameEl.textContent = name;nameEl.dataset.name = name;studentList.appendChild(nameEl);});studentCount.textContent = students.length;}// 开始/停止点名toggleButton.addEventListener('click', function() {if (students.length === 0) {alert('请先导入学生名单');return;}if (isRolling) {stopRolling();} else {startRolling();}});// 开始滚动function startRolling() {isRolling = true;toggleButton.innerHTML = '<i class="fa fa-stop mr-2"></i><span>停止点名</span>';toggleButton.classList.remove('bg-primary');toggleButton.classList.add('bg-red-500', 'hover:bg-red-600');// 重置之前的选中状态displayedName.classList.remove('text-primary', 'font-black', 'scale-110');// 开始滚动rollInterval = setInterval(() => {const randomIndex = Math.floor(Math.random() * students.length);displayedName.textContent = students[randomIndex];// 添加动画效果displayedName.classList.add('animate-pulse');setTimeout(() => {displayedName.classList.remove('animate-pulse');}, 50);}, 600 - rollSpeed); // 反转速度值,使滑块右侧表示更快}// 停止滚动function stopRolling() {clearInterval(rollInterval);isRolling = false;toggleButton.innerHTML = '<i class="fa fa-play mr-2"></i><span>开始点名</span>';toggleButton.classList.remove('bg-red-500', 'hover:bg-red-600');toggleButton.classList.add('bg-primary', 'hover:bg-primary/90');// 突出显示选中的名字selectedName = displayedName.textContent;displayedName.classList.add('text-primary', 'font-black', 'scale-110', 'transition-transform', 'duration-500');// 高亮学生列表中的选中项highlightSelectedStudent();}// 高亮选中的学生function highlightSelectedStudent() {const nameElements = studentList.querySelectorAll('[data-name]');nameElements.forEach(el => {if (el.dataset.name === selectedName) {el.classList.add('bg-primary/10', 'border-primary', 'font-bold');el.scrollIntoView({ behavior: 'smooth', block: 'center' });} else {el.classList.remove('bg-primary/10', 'border-primary', 'font-bold');}});}// 重置滚动状态function resetRollState() {if (isRolling) {clearInterval(rollInterval);isRolling = false;}displayedName.textContent = '准备开始';displayedName.classList.remove('text-primary', 'font-black', 'scale-110');toggleButton.innerHTML = '<i class="fa fa-play mr-2"></i><span>开始点名</span>';toggleButton.classList.remove('bg-red-500', 'hover:bg-red-600');toggleButton.classList.add('bg-primary', 'hover:bg-primary/90');// 清除学生列表中的高亮const nameElements = studentList.querySelectorAll('[data-name]');nameElements.forEach(el => {el.classList.remove('bg-primary/10', 'border-primary', 'font-bold');});}// 速度控制speedControl.addEventListener('input', function() {rollSpeed = parseInt(this.value);// 如果正在滚动,更新速度if (isRolling) {clearInterval(rollInterval);startRolling();}});// 显示通知function showNotification(message) {// 创建通知元素const notification = document.createElement('div');notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full opacity-0 z-50';notification.textContent = message;// 添加到页面document.body.appendChild(notification);// 显示通知setTimeout(() => {notification.classList.remove('translate-x-full', 'opacity-0');}, 10);// 自动隐藏setTimeout(() => {notification.classList.add('translate-x-full', 'opacity-0');setTimeout(() => {document.body.removeChild(notification);}, 300);}, 3000);}// 清空学生名单clearStudents.addEventListener('click', function() {if (students.length === 0) return;if (confirm('确定要清空当前学生名单吗?')) {students = [];updateStudentList();resetRollState();showNotification('已清空学生名单');}});// 键盘快捷键document.addEventListener('keydown', function(e) {// 空格键控制开始/停止if (e.code === 'Space') {e.preventDefault();if (students.length > 0) {toggleButton.click();}}});// 示例数据nameList.value = "张三、李四、王五、赵六、钱七、孙八、周九、吴十、郑十一、王十二";});</script>
</body>
</html>

源码文件

迅雷下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/88271.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/88271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 560: 和为K的子数组

题目描述给定一个整数数组 nums 和一个整数 k&#xff0c;请统计并返回该数组中和为 k 的连续子数组的个数。示例 1&#xff1a;输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例 2&#xff1a;输入&#xff1a;nums [1,2,3], k 3 输出&#xff1a;2提示&#xff…

微软官方C++构建工具:历史演变、核心组件与现代实践指南

引言&#xff1a;C构建工具的战略意义 在Windows生态系统中&#xff0c;​​微软C构建工具​​&#xff08;Microsoft C Build Tools&#xff09;构成了数百万开发者和应用程序的技术基石。从早期的MS-DOS命令行工具到如今支持​​跨平台开发​​的现代化工具链&#xff0c;微…

探索Cocos_CoilTheRope:一款创新的游戏引擎扩展项目

探索Cocos_CoilTheRope&#xff1a;一款创新的游戏引擎扩展项目 去发现同类优质开源项目:https://gitcode.com/ 是一个基于Cocos2d-x游戏引擎的扩展库&#xff0c;旨在为开发者提供一种简便的方法来实现绳子缠绕和物理交互效果。该项目由DreamLXW开发并维护&#xff0c;为游戏…

爬虫-正则表达式

在线正则表达式测试OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具&#xff0c;提供jsbin在线 CSS、JS 调试&#xff0c;在线 Java API文档,在线 PHP API文档,在线 Node.js API文档,Less CSS编译器&#xff0c;MarkDown编译器等其他在线工具https://tool.oschina.net/…

【BTC】数据结构

目录 那比特币区块链的组织形式到底是以链表的形式&#xff0c;还是树的形式呢&#xff1f; 区块头和区块体与默克尔树的关系 默克尔证明详解 区块链和链表最大的区别就是区块链用哈希指针代替了普通指针。 链表的指针就是指向一个结构体在内存中的地址&#xff0c;而哈希指…

飞算 JavaAI:让 Java 开发效率飙升的智能助手,日常开发全场景应用指南

飞算 JavaAI&#xff1a;让 Java 开发效率飙升的智能助手 &#xff0c;日常开发全场景应用指南 在 Java 开发的日常工作中&#xff0c;开发者常常面临各类重复性劳动与逻辑复杂度挑战。飞算 JavaAI 作为专注于 Java 领域的智能开发助手&#xff0c;能够覆盖从代码生成到项目维护…

8.2 文档预处理模块(二)

一、从0开始&#xff1a;简易RAG实现 在构建更复杂的 RAG 架构之前&#xff0c;我们先从最基础的版本入手。整个流程可以分为以下几个关键步骤&#xff1a; 1.数据导入&#xff1a;加载并预处理原始文本数据&#xff0c;为后续处理做好准备。 2.文本分块&#xff1a;将长文本…

【系统与工具】Linux——Linux简介、安装、简单使用

计算机概论与Linux简介 计算机概论Linux介绍与版本 Linux的规划与安装 Linux与硬件平台密切相关规划硬件与Linux安装 主机规划与磁盘分区安装CentOS、多重引导 简单使用 帮助手册文本编辑器关机 0. Linux介绍与版本 操作系统&#xff08;Linux&#xff09;&#xff1a;高效…

从视频数据到数字孪生:如何构建虚拟与现实的桥梁?

概述 视频数据与三维场景融合渲染技术通过将动态视频与静态三维模型结合&#xff0c;利用GPU加速、WebGL渲染、数字孪生等技术&#xff0c;实现虚拟与现实的交互式融合。该技术广泛应用于智慧城市、工业监控、虚拟现实、游戏特效等领域&#xff0c;能够提升场景的直观性和用户沉…

【笔记】开源 AI Agent 项目 V1 版本 [新版] 部署 日志

kortix-ai/suna at v1 一、最新版本号 V1 二、部署截图 本地开发环境仍然依赖于 Poetry 环境&#xff1a; &#xff08;Python>3.11,<3.13&#xff09; 创建本地 Poetry 虚拟环境 Python 多版本环境治理理念驱动的系统架构设计&#xff1a;三维治理、四级隔离、五项自…

NumPy-梯度与导数计算详解

NumPy-梯度与导数计算详解一、梯度与导数的基本概念1. 导数的定义2. 梯度的定义二、NumPy中的梯度计算函数&#xff1a;np.gradient()1. 函数语法2. 一维数组的梯度计算3. 多维数组的梯度计算三、基于梯度的导数近似方法1. 前向差分2. 中心差分四、实际应用场景1. 函数优化2. 数…

Redis架构安全

先学习&#xff1a;Redis架构简介-CSDN博客 Redis压测 Redis一般应用于高并发的场景&#xff0c;所以一定要对Redis的性能做压测。 Redis提供了压测脚本redis-benchmark&#xff0c;可以对Redis进行快速的基准测试。 # 20个线程&#xff0c;100W个请求&#xff0c;测试redi…

自动化Trae Apollo参数解释的批量获取

自动化Trae Apollo参数解释的批量获取一、背景介绍二、设计思路三、操作步骤1. 环境准备2. 获取界面坐标3. 定位关键元素4. 执行自动化查询5. 获取结果四、完整代码五、扩展应用一、背景介绍 在自动驾驶开发中&#xff0c;百度Apollo平台提供了大量参数用于调整系统行为。Trae…

数学模型:十大距离

十大距离 文章目录十大距离定义1. 欧氏距离&#xff08;Euclidean Distance&#xff09;2. 曼哈顿距离&#xff08;Manhattan Distance&#xff09;3. 切比雪夫距离&#xff08;Chebyshev Distance&#xff09;4. 闵可夫斯基距离&#xff08;Minkowski Distance&#xff09;5. …

流水线(Jenkins)打包拉取依赖的时候提示无法拉取,需要登录私仓的解决办法

在日常工作中&#xff0c;遇到了Jenkins拉取部门内部组件库失败的情况&#xff0c;原因是组件库后面放到了阿里云私仓&#xff0c;并且是没有公开的&#xff0c;所以就会有如下提示的&#xff0c;一开始我实在.npmrc文件写死阿里云提供的接入token&#xff0c;后面发现可能是因…

操作系统王道考研习题

1.1.4本节习题精选 一、单项选择题 01&#xff0e;操作系统是对(&#xff09;进行管理的软件。 A.软件 B.硬件 C.计算机资源 D.应用程序 01.c 操作系统管理计算机的硬件和软件资源&#xff0c;这些资源统称为计算机资源。注意&#xff0c;操作系统不仅管理处理机、存储器等硬件…

C语言extern的用法(非常详细,通俗易懂)

以往我们都是将所有的代码写到一个源文件里面&#xff0c;对于小程序&#xff0c;代码不过几百行&#xff0c;这或许无可厚非&#xff0c;但当程序膨胀代码到几千行甚至上万行后&#xff0c;就应该考虑将代码分散到多个文件中&#xff0c;否则代码的阅读和维护将成为一件痛苦的…

Git【开源分布式版本控制工具】安装-配置-常用指令-Git远程仓库-IDEA使用Git

参考博客&#xff1a;Git&#xff08;分布式版本控制工具&#xff09;_为什么哔哩哔哩有些视频没有字幕-CSDN博客 Git就是一个类似于百度云盘的仓库&#xff1b;重点是要掌握使用idea操作Git&#xff0c;企业用的最多&#xff0c;一般不会去使用命令 Git通过不断阶段保存文件…

JavaScript数组键值去重方法

使用 filter 和 Map 根据键值去重我来详细解释方法2&#xff0c;这是一种高效且简洁的数组去重方法&#xff0c;特别适合根据对象中的某个键值进行去重操作。完整代码function uniqueByKey(arr, key) {return [...new Map(arr.map(item > [item[key], item])).values()]; }分…

【机器学习笔记Ⅰ】9 特征缩放

特征缩放&#xff08;Feature Scaling&#xff09;详解 特征缩放是机器学习数据预处理的关键步骤&#xff0c;旨在将不同特征的数值范围统一到相近的尺度&#xff0c;从而加速模型训练、提升性能并避免某些特征主导模型。1. 为什么需要特征缩放&#xff1f; (1) 问题背景 量纲不…