国产裸体永久免费视频网站,中文字幕,久热精品,视频在线,在线看国产

萬丈高樓平地起，地基打的牢，才能永遠(yuǎn)立于不敗之地。今天給大家?guī)淼氖?0個(gè)常見的 JavaScript 手寫功能，重要的地方已添加注釋。有的是借鑒別人的，有的是自己寫的，如有不正確的地方，歡迎多多指正。

十個(gè)常見的前端手寫功能，你全都會嗎？

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、節(jié)流

function throttle(fn, delay) {
let last = 0 // 上次觸發(fā)時(shí)間
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) // 防止循環(huán)引用，程序進(jìn)入死循環(huán)
if (obj instanceof Date) return new Date(obj)
if (obj instanceof RegExp) return new RegExp(obj)
// 找到所屬原型上的constructor，所屬原型上的constructor指向當(dāng)前對象的構(gòu)造函數(shù)
let cloneObj = new obj.constructor()
cache.set(obj, cloneObj) // 緩存拷貝的對象，用于處理循環(huán)引用的情況
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 // 循環(huán)引用
const newObj = deepClone(obj)
console.log(newObj.address === obj.address) // false

4、實(shí)現(xiàn) Promise

class MyPromise {
constructor(executor) { // executor執(zhí)行器
this.status = 'pending' // 等待狀態(tài)
this.value = null // 成功或失敗的參數(shù)
this.fulfilledCallbacks = [] // 成功的函數(shù)隊(duì)列
this.rejectedCallbacks = [] // 失敗的函數(shù)隊(duì)列
const that = this
function resolve(value) { // 成功的方法
if (that.status === 'pending') {
that.status = 'resolved'
that.value = value
that.fulfilledCallbacks.forEach(myFn => myFn(that.value)) //執(zhí)行回調(diào)方法
}
}
function reject(value) { //失敗的方法
if (that.status === 'pending') {
that.status = 'rejected'
that.value = value
that.rejectedCallbacks.forEach(myFn => myFn(that.value)) //執(zhí)行回調(diào)方法
}
}
try {
executor(resolve, reject)
} catch (err) {
reject(err)
}
}
then(onFulfilled, onRejected) {
if (this.status === 'pending') {
// 等待狀態(tài)，添加回調(diào)函數(shù)到成功的函數(shù)隊(duì)列
this.fulfilledCallbacks.push(() => {
onFulfilled(this.value)
})
// 等待狀態(tài)，添加回調(diào)函數(shù)到失敗的函數(shù)隊(duì)列
this.rejectedCallbacks.push(() => {
onRejected(this.value)
})
}
if (this.status === 'resolved') { // 支持同步調(diào)用
console.log('this', this)
onFulfilled(this.value)
}
if (this.status === 'rejected') { // 支持同步調(diào)用
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、異步控制并發(fā)數(shù)

function limitRequest(urls = [], limit = 3) {
return new Promise((resolve, reject) => {
const len = urls.length
let count = 0 // 當(dāng)前進(jìn)行到第幾個(gè)任務(wù)
const start = async () => {
const url = urls.shift() // 從數(shù)組中拿取第一個(gè)任務(wù)
if (url) {
try {
await axios.post(url)
if (count == len - 1) {
// 最后一個(gè)任務(wù)成功
resolve()
} else {
count++
// 成功，啟動下一個(gè)任務(wù)
start()
}
} catch (e) {
if (count == len - 1) {
// 最后一個(gè)任務(wù)失敗
resolve()
} else {
count++
// 失敗，啟動下一個(gè)任務(wù)
start()
}
}
}
}
// 啟動limit個(gè)任務(wù)
while (limit > 0) {
start()
limit -= 1
}
})
}
// 測試
limitRequest(['http://xxa', 'http://xxb', 'http://xxc', 'http://xxd', 'http://xxe'])