1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        分享10個面試題會經(jīng)常出現(xiàn)的 JS 手寫函數(shù)代碼,你都會寫嗎?

        共 7319字,需瀏覽 15分鐘

         ·

        2022-01-20 02:51


        英文 | 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í)更多技能

        請點擊下方公眾號

        瀏覽 27
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

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

        手機掃一掃分享

        分享
        舉報
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            动漫美女被到爽视频 | 一级香蕉视频在线看 | 国产91精品入口福利 | 99re热在线视频 | 国产呦精品一区二区三区网站 | 日韩国产av | 黄色小视频免费观看 | 77777免费观看电视剧推荐爱的教育 | 久久视精品 | 大乳boobs巨大乳bbw |