摘要:扁平化嵌套數(shù)組實現(xiàn)描述將嵌套多層的數(shù)組展開平鋪成只有一層的數(shù)組。方法一知識點方法二知識點方法三知識點展開語法其它方法數(shù)組去重描述將數(shù)組中重復(fù)的元素過濾掉。對于函數(shù)防抖,門外有人頻繁敲門,門衛(wèi)按最后一次敲門來決定是否開門。知識點發(fā)布訂閱模式
1. 扁平化嵌套數(shù)組/flat實現(xiàn)
描述:將嵌套多層的數(shù)組展開平鋪成只有一層的數(shù)組。
let array = [1, [1, 2, 3], [1, [2, {}]] ] handle(array) // [1, 1, 2, 3, 1, 2, {}]
方法一:
const handle = array => JSON.parse(`[${JSON.stringify(array).replace(/[|]/g,"")}]`) handle(array) // [ 1, 1, 2, 3, 1, 2, {} ]
知識點:JSON.parse()/JSON.stringify()、String.prototype.replace()
方法二:
const handle = array => array.reduce((accumulator, currentValue) => accumulator.concat(Array.isArray(currentValue) ? handle(currentValue): currentValue), []) handle(array) // [ 1, 1, 2, 3, 1, 2, {} ]
知識點:Array.prototype.reduce()、Array.prototype.concat()
方法三:
const handle = array => { while(array.some(item => Array.isArray(item))) { array = [].concat(...array) } return array } handle(array) // [ 1, 1, 2, 3, 1, 2, {} ]
知識點:while、Array.prototype.some()、展開語法(Spread syntax)
其它方法:......
2. 數(shù)組去重描述:將數(shù)組中重復(fù)的元素過濾掉。
let array = [1, 2, 1, "3", "3", 0 , 1] handle(array) // [1, 2, "3", 0]
方法一:
const handle = array => [...new Set(array)] handle(array) // [ 1, 2, "3", 0 ]
知識點:Set
方法二:
const handle = array => array.reduce((accumulator, currentValue) => { !accumulator.includes(currentValue) && accumulator.push(currentValue) return accumulator }, []) handle(array) // [ 1, 2, "3", 0 ]
知識點:Array.prototype.includes()
方法三:
const handle = array => { let map = new Map() return array.filter(item => map.has(item) ? false : map.set(item)) } handle(array) // [ 1, 2, "3", 0 ]
知識點:Map、Array.prototype.filter()
其它方法:......
3. 模擬bind實現(xiàn)Function.prototype.bind = function () { let self = this, args = Array.from(arguments), context = args.shift(); return function () { return self.apply(context, args.concat(...arguments)) }; };
知識點:apply、call、bind
4. 模擬New實現(xiàn)const handle = function() { let fn = Array.prototype.shift.call(arguments) let obj = Object.create(fn.prototype) let o = fn.apply(obj, arguments) return typeof o === "object" ? o : obj; }
知識點:Object.create()
5. 格式化數(shù)字const num = 123456789; const handle = num => String(num).replace(/B(?=(d{3})+(?!d))/g, ",") handle(num) // 123,456,789
知識點:正則表達式、String.prototype.replace()
6. 回文判斷const num = 123456654321; const str = "abababababab"; const handle = params => { let str_1 = String(params).replace(/[^0-9A-Za-z]/g, "").toLowerCase(); let str_2 = str_1.split("").reverse().join(); return str_1 === str_2 ? true : false } handle(num) // true handle(str) // false
知識點:String.prototype.split()、Array.prototype.join()
7. 函數(shù)節(jié)流 定時器const handle = (fn, interval) => { let timeId = null; return function() { if (!timeId) { timeId = setTimeout(() => { fn.apply(this, arguments) timeId = null }, interval) } } }
知識點:window.setTimeout
時間戳const handle = (fn, interval) => { let lastTime = 0 return function () { let now = Date.now(); if (now - lastTime > interval) { fn.apply(this, arguments) lastTime = now } } }8. 函數(shù)防抖
const handle = (fn, delay) => { let timeId; return function() { if (timeId) clearTimeout(timeId) timeId = setTimeout(() => { fn.apply(this, arguments) }, delay) } }
函數(shù)節(jié)流、函數(shù)防抖區(qū)別:函數(shù)節(jié)流和函數(shù)防抖較容易混淆,可以這么比喻,對于函數(shù)節(jié)流,門外有人頻繁敲門,但是門衛(wèi)按固定時間來決定是否開門。對于函數(shù)防抖,門外有人頻繁敲門,門衛(wèi)按最后一次敲門來決定是否開門。
知識點:window.clearTimeout
9. 發(fā)布訂閱模式class Pubsub { constructor() { this.handles = {} } subscribe(type, handle) { if (!this.handles[type]) { this.handles[type] = [] } this.handles[type].push(handle) } unsubscribe(type, handle) { let pos = this.handles[type].indexOf(handle) if (!handle) { this.handles.length = 0 } else { ~pos && this.handles[type].splice(pos, 1) } } publish() { let type = Array.prototype.shift.call(arguments) this.handles[type].forEach(handle => { handle.apply(this, arguments) }) } } const pub = new Pubsub() pub.subscribe("a", function() {console.log("a", ...arguments)}) pub.publish("a", 1, 2, 3) // a 1 2 3
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/102041.html
摘要:為了避免它,只需分配將要使用的必要構(gòu)造函數(shù)。示例對于此示例,就需要保持父構(gòu)造函數(shù)繼續(xù)正常工作。結(jié)論手動設(shè)置或更新構(gòu)造函數(shù)可能會導(dǎo)致不同且有時令人困惑的后果。為了防止它,只需在每個特定情況下定義構(gòu)造函數(shù)的角色。 hr小姐姐說一共有1輪筆試 + 3輪技術(shù)面 + 1輪hr面,面試地點在中關(guān)村天使大廈,崗位是1-3年前端 筆試 筆試分為多選 簡答 判斷 手寫代碼四部分,下面只寫了印象比較深的幾...
摘要:春招結(jié)果五月份了,春招已經(jīng)接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底,截止今天,已經(jīng)斬獲唯品會電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實習(xí)生的騰訊的是早上打過來的。 春招結(jié)果 五月份了,春招已經(jīng)接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底,截止今天,已經(jīng)斬獲唯品...
摘要:面經(jīng)因為我完全沒有面試經(jīng)驗,從來沒有經(jīng)歷過面試,于是想著在去這類大公司面試之前先找成都的小公司練練手,積累點面試經(jīng)驗。于是三月份開始就有成都的小公司開始約我面試。 前序 從我高考成績出來那一刻開始,從我在高考志愿上填上計算機科學(xué)與技術(shù)這幾個當(dāng)時在心中堪稱神圣的幾個字開始,我就已經(jīng)把進入中國互聯(lián)網(wǎng)最高殿堂BAT作為我整個大學(xué)奮斗的目標(biāo),哪怕我就讀的是一所位于內(nèi)陸的雙非一本大學(xué)我也認(rèn)為我能...
摘要:雖然構(gòu)造函數(shù)或者對象字面量的方法都可以用來創(chuàng)建對象,但是這些方法使用同一個接口創(chuàng)建很多對象,會產(chǎn)生大量的重復(fù)代碼。參考資料冴羽的專題系列中高級前端面試手寫代碼無敵秘籍前端筆試之手寫代碼一本系列會從面試的角度出發(fā)圍繞JavaScript,Node.js(npm包)以及框架三個方面來對常見的模擬實現(xiàn)進行總結(jié),具體源代碼放在github項目上,長期更新和維護 showImg(https://use...
閱讀 2716·2023-04-25 17:58
閱讀 2990·2021-11-15 11:38
閱讀 2391·2021-11-02 14:48
閱讀 1200·2021-08-25 09:40
閱讀 1832·2019-08-30 15:53
閱讀 1105·2019-08-30 15:52
閱讀 1043·2019-08-30 13:55
閱讀 2445·2019-08-29 15:21