【JS封装-工具函数】强化编程实践:精选JavaScript函数封装集锦-关于工具函数 (如深度克隆、浅拷贝、递归、防抖和节流等)

本文主要是介绍【JS封装-工具函数】强化编程实践:精选JavaScript函数封装集锦-关于工具函数 (如深度克隆、浅拷贝、递归、防抖和节流等),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

浅拷贝

深度克隆

递归函数示例:计算数组深度

防抖函数

节流函数

扁平化数组

检查对象是否为空

生成随机字符串

深度比较两个对象是否相等


浅拷贝

/*** 浅拷贝对象或数组。* @param {Object|Array} obj 要拷贝的对象或数组。* @returns {Object|Array} 新的拷贝对象或数组。*/
function shallowClone(obj) {if (Array.isArray(obj)) return obj.slice();if (typeof obj === 'object' && obj !== null) return Object.assign({}, obj);return obj;
}

深度克隆

/*** 深度克隆对象或数组。* @param {Object|Array} obj 要克隆的对象或数组。* @returns {Object|Array} 完全独立的新克隆对象或数组。*/
function deepClone(obj) {if (obj === null || typeof obj !== 'object') return obj;let clone = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key]);}}}return clone;
}

递归函数示例:计算数组深度

/*** 计算数组的最大深度。* @param {Array} arr 输入数组。* @returns {number} 数组的深度。*/
function calculateDepth(arr) {let maxDepth = 0;arr.forEach(item => {if (Array.isArray(item)) {maxDepth = Math.max(maxDepth, calculateDepth(item) + 1);}});return maxDepth;
}

防抖函数

/*** 防抖函数,限制函数在一段时间内只执行一次。* @param {Function} func 要执行的函数。* @param {number} wait 延迟执行的时间(毫秒)。* @returns {Function} 返回防抖处理后的函数。*/
function debounce(func, wait) {let timeout;return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => func.apply(this, args), wait);};
}

节流函数

/*** 节流函数,确保函数在规定时间内只执行一次。* @param {Function} func 要执行的函数。* @param {number} delay 规定的时间间隔(毫秒)。* @returns {Function} 返回节流处理后的函数。*/
function throttle(func, delay) {let lastExec = 0;return function(...args) {const now = Date.now();if (now - lastExec >= delay) {lastExec = now;func.apply(this, args);}};
}

扁平化数组

/*** 将嵌套数组扁平化为一维数组。* @param {Array} arr 原数组。* @param {number} [depth=Infinity] 扁平化的深度,默认无限深。* @returns {Array} 扁平化后的数组。*/
function flattenArray(arr, depth = Infinity) {return arr.reduce((acc, val) => Array.isArray(val) && depth > 0 ? acc.concat(flattenArray(val, depth - 1)) : acc.concat(val), []);
}

检查对象是否为空

/*** 检查对象是否为空(没有可枚举属性)。* @param {Object} obj 待检查的对象。* @returns {boolean} 如果对象为空返回true,否则返回false。*/
function isEmptyObject(obj) {return Object.keys(obj).length === 0;
}

生成随机字符串

/*** 生成指定长度的随机字符串。* @param {number} length 字符串长度。* @returns {string} 随机字符串。*/
function generateRandomString(length) {let result = '';const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';const charactersLength = characters.length;for (let i = 0; i < length; i++) {result += characters.charAt(Math.floor(Math.random() * charactersLength));}return result;
}

深度比较两个对象是否相等

/*** 深度比较两个对象是否相等。* @param {Object} obj1 对象1。* @param {Object} obj2 对象2。* @returns {boolean} 如果两个对象相等返回true,否则返回false。*/
function deepEqual(obj1, obj2) {if (obj1 === obj2) return true;if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {return false;}const keys1 = Object.keys(obj1);const keys2 = Object.keys(obj2);if (keys1.length !== keys2.length) return false;for (const key of keys1) {if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {return false;}}}return true;
}

这篇关于【JS封装-工具函数】强化编程实践:精选JavaScript函数封装集锦-关于工具函数 (如深度克隆、浅拷贝、递归、防抖和节流等)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

java如何解压zip压缩包

《java如何解压zip压缩包》:本文主要介绍java如何解压zip压缩包问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解压zip压缩包实例代码结果如下总结java解压zip压缩包坐在旁边的小伙伴问我怎么用 java 将服务器上的压缩文件解压出来,

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2