- 当前位置：首页 >焦点 >十个常见的前端手写功能，你全都会吗？
十个常见的前端手写功能，你全都会吗？
发布时间：2025-11-05 09:17:14 来源：云智核 作者：IT科技类资讯
万丈高楼平地起，个常功地基打的前端全都牢，才能永远立于不败之地。手写今天给大家带来的个常功是10个常见的 JavaScript 手写功能，重要的前端全都地方已添加注释。有的手写是借鉴别人的，有的个常功是自己写的，如有不正确的前端全都地方，欢迎多多指正。手写
1、个常功防抖
function debounce(fn,前端全都 delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, args) }, delay) } } // 测试 function task() { console.log(run task) } const debounceTask = debounce(task, 1000) window.addEventListener(scroll, debounceTask)2、WordPress模板节流
function throttle(fn,手写 delay) { let last = 0 // 上次触发时间 return (...args) => { const now = Date.now() if (now - last > delay) { last = now fn.apply(this, args) } } } // 测试 function task() { console.log(run task) } const throttleTask = throttle(task, 1000) window.addEventListener(scroll, throttleTask)3、深拷贝
function deepClone(obj,个常功 cache = new WeakMap()) { if (typeof obj !== object) return obj // 普通类型，直接返回 if (obj === null) return obj if (cache.get(obj)) return cache.get(obj) // 防止循环引用，前端全都程序进入死循环 if (obj instanceof Date) return new Date(obj) if (obj instanceof RegExp) return new RegExp(obj) // 找到所属原型上的手写constructor，所属原型上的constructor指向当前对象的构造函数 let cloneObj = new obj.constructor() cache.set(obj, cloneObj) // 缓存拷贝的对象，用于处理循环引用的情况 for (let key in obj) { if (obj.hasOwnProperty(key)) { cloneObj[key] = deepClone(obj[key], cache) // 递归拷贝 } } return cloneObj } // 测试 const obj = { name: Jack, address: { x: 100, y: 200 } } obj.a = obj // 循环引用 const newObj = deepClone(obj) console.log(newObj.address === obj.address) // false4、实现 Promise
class MyPromise { constructor(executor) { // executor执行器 this.status = pending // 等待状态 this.value = null // 成功或失败的参数 this.fulfilledCallbacks = [] // 成功的函数队列 this.rejectedCallbacks = [] // 失败的函数队列 const that = this function resolve(value) { // 成功的方法 if (that.status === pending) { that.status = resolved that.value = value that.fulfilledCallbacks.forEach(myFn => myFn(that.value)) //执行回调方法 } } function reject(value) { //失败的方法 if (that.status === pending) { that.status = rejected that.value = value that.rejectedCallbacks.forEach(myFn => myFn(that.value)) //执行回调方法 } } try { executor(resolve, reject) } catch (err) { reject(err) } } then(onFulfilled, onRejected) { if (this.status === pending) { // 等待状态，添加回调函数到成功的函数队列 this.fulfilledCallbacks.push(() => { onFulfilled(this.value) }) // 等待状态，添加回调函数到失败的函数队列 this.rejectedCallbacks.push(() => { onRejected(this.value) }) } if (this.status === resolved) { // 支持同步调用 console.log(this, this) onFulfilled(this.value) } if (this.status === rejected) { // 支持同步调用 onRejected(this.value) } } } // 测试 function fn() { return new MyPromise((resolve, reject) => { setTimeout(() => { if(Math.random() > 0.6) { resolve(1) } else { reject(2) } }, 1000) }) } fn().then( res => { console.log(res, res) // res 1 }, err => { console.log(err, err) // err 2 })5、异步控制并发数
function limitRequest(urls = [], limit = 3) { return new Promise((resolve, reject) => { const len = urls.length let count = 0 // 当前进行到第几个任务 const start = async () => { const url = urls.shift() // 从数组中拿取第一个任务 if (url) { try { await axios.post(url) if (count == len - 1) { // 最后一个任务成功 resolve() } else { count++ // 成功，b2b信息网启动下一个任务 start() } } catch (e) { if (count == len - 1) { // 最后一个任务失败 resolve() } else { count++ // 失败，启动下一个任务 start() } } } } // 启动limit个任务 while (limit > 0) { start() limit -= 1 } }) } // 测试 limitRequest([http://xxa, http://xxb, http://xxc, http://xxd, http://xxe])6、ES5继承(寄生组合继承)
function Parent(name) { this.name = name } Parent.prototype.eat = function () { console.log(this.name + is eating) } function Child(name, age) { Parent.call(this, name) this.age = age } Child.prototype = Object.create(Parent.prototype) Child.prototype.contructor = Child Child.prototype.study = function () { console.log(this.name + is studying) } // 测试 let child = new Child(xiaoming, 16) console.log(child.name) // xiaoming child.eat() // xiaoming is eating child.study() // xiaoming is studying7、数组排序
sort 排序
// 对数字进行排序，简写 const arr = [3, 2, 4, 1, 5] arr.sort((a, b) => a - b) console.log(arr) // [1, 2, 3, 4, 5] // 对字母进行排序，简写 const arr = [b, c, a, e, d] arr.sort() console.log(arr) // [a, b, c, d, e]冒泡排序
function bubbleSort(arr) { let len = arr.length for (let i = 0; i < len - 1; i++) { // 从第一个元素开始，比较相邻的两个元素，前者大就交换位置 for (let j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j + 1]) { let num = arr[j] arr[j] = arr[j + 1] arr[j + 1] = num } } // 每次遍历结束，都能找到一个最大值，放在数组最后 } return arr } //测试 console.log(bubbleSort([2, 3, 1, 5, 4])) // [1, 2, 3, 4, 5]8、数组去重
Set 去重
cosnt newArr = [...new Set(arr)]Array.from 去重
const newArr = Array.from(new Set(arr))indexOf 去重
function resetArr(arr) { let res = [] arr.forEach(item => { if (res.indexOf(item) === -1) { res.push(item) } }) return res } // 测试 const arr = [1, 1, 2, 3, 3] console.log(resetArr(arr)) // [1, 2, 3]9、获取 url 参数
URLSearchParams 方法
// 创建一个URLSearchParams实例 const urlSearchParams = new URLSearchParams(window.location.search); // 把键值对列表转换为一个对象 const params = Object.fromEntries(urlSearchParams.entries());split 方法
function getParams(url) { const res = {} if (url.includes(?)) { const str = url.split(?)[1] const arr = str.split(&) arr.forEach(item => { const key = item.split(=)[0] const val = item.split(=)[1] res[key] = decodeURIComponent(val) // 解码 }) } return res } // 测试 const user = getParams(http://www.baidu.com?user=%E9%98%BF%E9%A3%9E&age=16) console.log(user) // { user: 阿飞, age: 16 }10、事件总线 | 发布订阅模式
class EventEmitter { constructor() { this.cache = {} } on(name, fn) { if (this.cache[name]) { this.cache[name].push(fn) } else { this.cache[name] = [fn] } } off(name, fn) { const tasks = this.cache[name] if (tasks) { const index = tasks.findIndex((f) => f === fn || f.callback === fn) if (index >= 0) { tasks.splice(index, 1) } } } emit(name, once = false) { if (this.cache[name]) { // 创建副本，如果回调函数内继续注册相同事件，会造成死循环 const tasks = this.cache[name].slice() for (let fn of tasks) { fn(); } if (once) { delete this.cache[name] } } } } // 测试 const eventBus = new EventEmitter() const task1 = () => { console.log(task1); } const task2 = () => { console.log(task2); } eventBus.on(task, task1) eventBus.on(task, task2) eventBus.off(task, task1) setTimeout(() => { eventBus.emit(task) // task2 }, 1000)以上就是工作或求职中最常见的手写功能，你是不是全都掌握了呢
- X99装机教程（选择X99主板，为你的装机之路带来巅峰体验）
- windows7系统怎么设置CF烟雾头(穿透烟雾)详细图解
- windows 7下远程桌面的使用技巧如何让其端口躲避攻击
- windows7/windows8系统点击关机后提示确认关机的解决方法
- 用彩纸打造趣味电脑教程（彩纸DIY教程，让电脑知识更有趣）
- windows7系统固定本地连接IP地址的操作图解
- 如何在windows 7系统下添加不同时区的时钟
- windows7系统始终使用选择程序打开的复选框无法勾选
- 华为电脑MateBookXPro使用教程（轻松掌握华为MateBookXPro的使用技巧与窍门）
- windows 7删除桌面文件需要刷新才会消失(2种解决方法)
- W10系统备份教程（一步步教你如何以W10系统备份还原，保护你的宝贵数据）
- 怎样实现 Win 7/Vista 开机自动登录而不用输入密码的问题
- Win 7系统中如何查看和修改计算机名、域和工作组? 方法介绍
- 联想电脑windows 7系统在BIOS里面启用网卡教程
- 电脑主板刷机教程（电脑主板刷机步骤详解，让你轻松升级BIOS）
- 怎么把系统和所有文件弄到新电脑(Windows轻松传送可以办到)
- windows 7系统中怎么创建新的磁盘分区 windows 7新建磁盘分区过
- windows7系统开启AHCI模式提升硬盘性能具体步骤
- 51系统安装教程（详解51系统的安装步骤与技巧）
- windows 7系统一定不可关闭的9个关键系统服务介绍
随便看看
香港云服务器IT技术网源码库源码下载益华科技IT资讯网服务器租用亿华云企商汇运维纵横益强科技益强数据堂亿华云亿华互联技术快报亿华科技极客码头益强智囊团益强智未来益强科技创站工坊极客编程益强前沿资讯思维库亿华智慧云亿华智造码上建站汇智坊益强IT技术网益强资讯优选亿华灵动云智核亿华云计算智能时代编程之道益强编程舍云站无忧益华科技全栈开发码力社益华IT技术论坛多维IT资讯
- Copyright © 2025 Powered by 十个常见的前端手写功能，你全都会吗？,云智核 滇ICP备2023006006号-28sitemap