【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事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操