成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端筆試之手寫代碼

zhichangterry / 2969人閱讀

摘要:扁平化嵌套數(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 ]

知識點MapArray.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

相關(guān)文章

  • 一篇字節(jié)跳動前端面經(jīng)

    摘要:為了避免它,只需分配將要使用的必要構(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年前端 筆試 筆試分為多選 簡答 判斷 手寫代碼四部分,下面只寫了印象比較深的幾...

    caige 評論0 收藏0
  • 記錄一下自己的春招,唯品會、360、京東offer已收、騰訊offer_call已達?。?!

    摘要:春招結(jié)果五月份了,春招已經(jīng)接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底,截止今天,已經(jīng)斬獲唯品會電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實習(xí)生的騰訊的是早上打過來的。 春招結(jié)果 五月份了,春招已經(jīng)接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底,截止今天,已經(jīng)斬獲唯品...

    freewolf 評論0 收藏1
  • 我的春招求職經(jīng)驗分享(已拿阿里京東網(wǎng)易等 5 個 offer)

    摘要:面經(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)為我能...

    Winer 評論0 收藏1
  • 前端面試手寫代碼

    摘要:雖然構(gòu)造函數(shù)或者對象字面量的方法都可以用來創(chuàng)建對象,但是這些方法使用同一個接口創(chuàng)建很多對象,會產(chǎn)生大量的重復(fù)代碼。參考資料冴羽的專題系列中高級前端面試手寫代碼無敵秘籍前端筆試之手寫代碼一本系列會從面試的角度出發(fā)圍繞JavaScript,Node.js(npm包)以及框架三個方面來對常見的模擬實現(xiàn)進行總結(jié),具體源代碼放在github項目上,長期更新和維護 showImg(https://use...

    niceforbear 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<