英文 | https://medium.com/@cookbug/10-common-front-end-handwriting-functions-do-you-know-all-of-them-9deb1ffb922d
翻譯 | 楊小愛
隻有萬丈高樓平地起，才能永遠立于不敗之地。
今天給大家分享 10 個常用的 JavaScript 手寫功能，重要的地方已經注釋了。有些是從别人那裡看來的，有些是我自己寫的。如果有任何錯誤，請糾正我。在此，非常感謝。
1、防抖
function debounce(fn, delay) {
let timer
return function (…args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
// test
function task() {
console.log(‘run task’)
}
const debounceTask = debounce(task, 1000)
window.addEventListener(‘scroll’, debounceTask) 2、節流
function throttle(fn, delay) {
let last = 0 // Last trigger time
return (…args) => {
const now = Date.now()
if (now-last> delay) {
last = now
fn.apply(this, args)
}
}
}
// test
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) // Prevent circular references, the program enters an infinite loop
if (obj instanceof Date) return new Date(obj)
if (obj instanceof RegExp) return new RegExp(obj)
// Find the constructor on the owning prototype, and the constructor on the owning prototype points to the constructor of the current object
let cloneObj = new obj.constructor()
cache.set(obj, cloneObj) // Cache copied objects, used to handle circular references
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloneObj[key] = deepClone(obj[key], cache) // recursive copy
}
}
return cloneObj
}
// test
const obj = {name:’Jack’, address: {x: 100, y: 200}}
obj.a = obj // circular reference
const newObj = deepClone(obj)
console.log(newObj.address === obj.address) // false 4、Promise 的實作
class MyPromise {
constructor(executor) {// executor executor
this.status =’pending’ // waiting status
this.value = null // parameter of success or failure
this.fulfilledCallbacks = [] // Successful function queue
this.rejectedCallbacks = [] // Failed function queue
const that = this
function resolve(value) {// successful method
if (that.status ===’pending’) {
that.status =’resolved’
that.value = value
that.fulfilledCallbacks.forEach(myFn => myFn(that.value)) //Execute callback method
}
}
function reject(value) {//Failed method
if (that.status ===’pending’) {
that.status =’rejected’
that.value = value
that.rejectedCallbacks.forEach(myFn => myFn(that.value)) //Execute callback method
}
}
try {
executor(resolve, reject)
} catch (err) {
reject(err)
}
}
then(onFulfilled, onRejected) {
if (this.status ===’pending’) {
// Waiting state, add the callback function to the successful function queue
this.fulfilledCallbacks.push(() => {
onFulfilled(this.value)
})
// Waiting state, add the callback function to the failed function queue
this.rejectedCallbacks.push(() => {
onRejected(this.value)
})
}
if (this.status ===’resolved’) {// support synchronous call
console.log(‘this’, this)
onFulfilled(this.value)
}
if (this.status ===’rejected’) {// Support synchronous call
onRejected(this.value)
}
}
}
// test
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
// Start limit tasks simultaneously
while (limit> 0) {
start()
limit -= 1
}
function start() {
const url = urls.shift() // Take the first task from the array
if (url) {
axios.post(url).finally(() => {
if (count == len-1) {
// The last task is completed
resolve()
} else {
// After completion, start the next task
count++
start()
}
})
}
}
})
}
// test
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’)
}
// test
let child = new Child(‘xiaoming’, 16)
console.log(child.name) // xiaoming
child.eat() // xiaoming is eating
child.study() // xiaoming is studying 7、數組排序
//sort
// Sort the numbers, abbreviated
const arr = [3, 2, 4, 1, 5]
arr.sort((a, b) => a-b)
console.log(arr) // [1, 2, 3, 4, 5]
// Sort the letters, abbreviated
const arr = [‘b’,’c’,’a’,’e’,’d’]
arr.sort()
console.log(arr) // [‘a’,’b’,’c’,’d’,’e’]
//Bubble Sort
function bubbleSort(arr) {
let len = arr.length
for (let i = 0; i <len-1; i++) {
// Starting from the first element, compare two adjacent elements, exchange positions if the former is bigger
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
}
}
// At the end of each traversal, a maximum value can be found and placed at the end of the array
}
return arr
}
//test
console.log(bubbleSort([2, 3, 1, 5, 4])) // [1, 2, 3, 4, 5] 8、陣列去重
設定重複資料删除
cosnt newArr = […new Set(arr)] Array.from 去重
const newArr = Array.from(new Set(arr)) 重複資料删除索引
function resetArr(arr) {
let res = []
arr.forEach(item => {
if (res.indexOf(item) === -1) {
res.push(item)
}
})
return res
}
// test
const arr = [1, 1, 2, 3, 3]
console.log(resetArr(arr)) // [1, 2, 3] 9、擷取url參數
URLSearchParams 方法
// Create an instance of URLSearchParams
const urlSearchParams = new URLSearchParams(window.location.search);
// Convert the list of key-value pairs into an object
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) // decode
})
}
return res
}
// test
const user = getParams(‘http://www.baidu.com?user=%E9%98%BF%E9%A3%9E&age=16')
console.log(user) // {user:’abor’, 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]) {
// Create a copy, if you continue to register the same event in the callback function, it will cause an endless loop
const tasks = this.cache[name].slice()
for (let fn of tasks) {
fn();
}
if (once) {
delete this.cache[name]
}
}
}
}
// test
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) 總結
以上就是我今天與您分享10個常用的JavaScript函數的全部内容。希望對您有所幫助，如果您有任何問題，請在留言區給我留言，我會盡快回複。
如果您覺得，我今天的内容對您有幫助，請記得給我點贊，并分享給您身邊做開發的朋友，也許可以幫助到他。
最後，感謝您的閱讀。
