摘要:扁平化嵌套數組實現描述將嵌套多層的數組展開平鋪成只有一層的數組。方法一知識點方法二知識點方法三知識點展開語法其它方法數組去重描述將數組中重復的元素過濾掉。對于函數防抖,門外有人頻繁敲門,門衛按最后一次敲門來決定是否開門。知識點發布訂閱模式
1. 扁平化嵌套數組/flat實現
描述:將嵌套多層的數組展開平鋪成只有一層的數組。
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. 數組去重描述:將數組中重復的元素過濾掉。
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實現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實現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. 格式化數字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. 函數節流 定時器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. 函數防抖
const handle = (fn, delay) => { let timeId; return function() { if (timeId) clearTimeout(timeId) timeId = setTimeout(() => { fn.apply(this, arguments) }, delay) } }
函數節流、函數防抖區別:函數節流和函數防抖較容易混淆,可以這么比喻,對于函數節流,門外有人頻繁敲門,但是門衛按固定時間來決定是否開門。對于函數防抖,門外有人頻繁敲門,門衛按最后一次敲門來決定是否開門。
知識點:window.clearTimeout
9. 發布訂閱模式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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102041.html
摘要:為了避免它,只需分配將要使用的必要構造函數。示例對于此示例,就需要保持父構造函數繼續正常工作。結論手動設置或更新構造函數可能會導致不同且有時令人困惑的后果。為了防止它,只需在每個特定情況下定義構造函數的角色。 hr小姐姐說一共有1輪筆試 + 3輪技術面 + 1輪hr面,面試地點在中關村天使大廈,崗位是1-3年前端 筆試 筆試分為多選 簡答 判斷 手寫代碼四部分,下面只寫了印象比較深的幾...
摘要:春招結果五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品會電商前端研發部大數據與威脅分析事業部京東精銳暑假實習生的騰訊的是早上打過來的。 春招結果 五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品...
摘要:面經因為我完全沒有面試經驗,從來沒有經歷過面試,于是想著在去這類大公司面試之前先找成都的小公司練練手,積累點面試經驗。于是三月份開始就有成都的小公司開始約我面試。 前序 從我高考成績出來那一刻開始,從我在高考志愿上填上計算機科學與技術這幾個當時在心中堪稱神圣的幾個字開始,我就已經把進入中國互聯網最高殿堂BAT作為我整個大學奮斗的目標,哪怕我就讀的是一所位于內陸的雙非一本大學我也認為我能...
摘要:雖然構造函數或者對象字面量的方法都可以用來創建對象,但是這些方法使用同一個接口創建很多對象,會產生大量的重復代碼。參考資料冴羽的專題系列中高級前端面試手寫代碼無敵秘籍前端筆試之手寫代碼一本系列會從面試的角度出發圍繞JavaScript,Node.js(npm包)以及框架三個方面來對常見的模擬實現進行總結,具體源代碼放在github項目上,長期更新和維護 showImg(https://use...
閱讀 2695·2023-04-25 17:58
閱讀 2978·2021-11-15 11:38
閱讀 2378·2021-11-02 14:48
閱讀 1185·2021-08-25 09:40
閱讀 1823·2019-08-30 15:53
閱讀 1093·2019-08-30 15:52
閱讀 1031·2019-08-30 13:55
閱讀 2437·2019-08-29 15:21