【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

相关文章

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器:探测开放端口2.简易 HTTP 服务器:10 秒搭个网页3.局域网游戏:多人联机对战4.

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain