<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          10個常見的JavaScript函數(shù)的前端手寫功能,你都知道嗎?

          共 7324字,需瀏覽 15分鐘

           ·

          2022-01-20 01:27

          英文 | https://medium.com/@cookbug/10-common-front-end-handwriting-functions-do-you-know-all-of-them-9deb1ffb922d

          翻譯 | 楊小愛


          只有萬丈高樓平地起,才能永遠(yuǎn)立于不敗之地。
          今天給大家分享 10 個常用的 JavaScript 手寫功能,重要的地方已經(jīng)注釋了。有些是從別人那里看來的,有些是我自己寫的。如果有任何錯誤,請糾正我。在此,非常感謝。
          1、防抖
          function debounce(fn, delay) { let timer return function (…args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, args) }, delay) }}// testfunction task() { console.log(‘run task’)}const debounceTask = debounce(task, 1000)window.addEventListener(‘scroll’, debounceTask)

          2、節(jié)流

          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) } }}// testfunction 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}// testconst obj = {name:’Jack’, address: {x: 100, y: 200}}obj.a = obj // circular referenceconst newObj = deepClone(obj)console.log(newObj.address === obj.address) // false

          4、Promise 的實現(xiàn)

          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) } }}// testfunction 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// 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() } }) } }})}// testlimitRequest([‘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 = ChildChild.prototype.study = function () { console.log(this.name + ‘is studying’)}// testlet child = new Child(‘xiaoming’, 16)console.log(child.name) // xiaomingchild.eat() // xiaoming is eatingchild.study() // xiaoming is studying

          7、數(shù)組排序

          //sort// Sort the numbers, abbreviatedconst arr = [3, 2, 4, 1, 5]arr.sort((a, b) => a-b)console.log(arr) // [1, 2, 3, 4, 5]// Sort the letters, abbreviatedconst arr = [‘b’,’c’,’a’,’e’,’d’]arr.sort()console.log(arr) // [‘a(chǎn)’,’b’,’c’,’d’,’e’]
          //Bubble Sortfunction 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}//testconsole.log(bubbleSort([2, 3, 1, 5, 4])) // [1, 2, 3, 4, 5]

          8、陣列去重

          設(shè)置重復(fù)數(shù)據(jù)刪除
          cosnt newArr = […new Set(arr)]

          Array.from 去重

          const newArr = Array.from(new Set(arr))

          重復(fù)數(shù)據(jù)刪除索引

          function resetArr(arr) { let res = [] arr.forEach(item => { if (res.indexOf(item) === -1) { res.push(item) } }) return res}// testconst arr = [1, 1, 2, 3, 3]console.log(resetArr(arr)) // [1, 2, 3]

          9、獲取url參數(shù)

          URLSearchParams 方法

          // Create an instance of URLSearchParamsconst urlSearchParams = new URLSearchParams(window.location.search);// Convert the list of key-value pairs into an objectconst 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}// testconst user = getParams(‘http://www.baidu.com?user=%E9%98%BF%E9%A3%9E&age=16')console.log(user) // {user:’abor’, age: ‘16’}

          10、 事件總線 | 發(fā)布和訂閱模式

          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] } } }}// testconst 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)
          總結(jié)
          以上就是我今天與您分享10個常用的JavaScript函數(shù)的全部內(nèi)容。希望對您有所幫助,如果您有任何問題,請在留言區(qū)給我留言,我會盡快回復(fù)。
          如果您覺得,我今天的內(nèi)容對您有幫助,請記得給我點贊,并分享給您身邊做開發(fā)的朋友,也許可以幫助到他。
          最后,感謝您的閱讀。


          學(xué)習(xí)更多技能

          請點擊下方公眾號

          瀏覽 51
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  亚洲日韩在线视频 | 亚洲爽爽 | 亚洲高清视频不卡无码视频免费在线观看 | 国产三级片在线观看视频成人电影 | 亚洲狼人在线 |