1. 扁平化嵌套數(shù)組/flat實(shí)現(xiàn)

描述：將嵌套多層的數(shù)組展開平鋪成只有一層的數(shù)組。

let array = [1, [1, 2, 3], [1, [2, {}]] ] handle(array) // [1, 1, 2, 3, 1, 2, {}] 復(fù)制代碼

方法一：

const handle = array => JSON.parse(`[${JSON.stringify(array).replace(/\[|]/g,'')}]`) handle(array) // [ 1, 1, 2, 3, 1, 2, {} ] 復(fù)制代碼

知識(shí)點(diǎn)：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, {} ] 復(fù)制代碼

知識(shí)點(diǎn)：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, {} ] 復(fù)制代碼

知識(shí)點(diǎn)：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] 復(fù)制代碼

方法一：

const handle = array => [...new Set(array)] handle(array) // [ 1, 2, '3', 0 ] 復(fù)制代碼

知識(shí)點(diǎn)：Set

方法二：

const handle = array => array.reduce((accumulator, currentValue) => {!accumulator.includes(currentValue) && accumulator.push(currentValue)return accumulator }, []) handle(array) // [ 1, 2, '3', 0 ] 復(fù)制代碼

知識(shí)點(diǎn)：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 ] 復(fù)制代碼

知識(shí)點(diǎn)：Map、Array.prototype.filter()

其它方法：......

3. 模擬bind實(shí)現(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))}; }; 復(fù)制代碼

知識(shí)點(diǎn)：apply、call、bind

4. 模擬New實(shí)現(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; } 復(fù)制代碼

知識(shí)點(diǎn)：Object.create()

5. 格式化數(shù)字

const num = 123456789; const handle = num => String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ',') handle(num) // 123,456,789 復(fù)制代碼

知識(shí)點(diǎn)：正則表達(dá)式、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 復(fù)制代碼

知識(shí)點(diǎn)：String.prototype.split()、Array.prototype.join()

7. 函數(shù)節(jié)流

定時(shí)器

const handle = (fn, interval) => {let timeId = null;return function() {if (!timeId) {timeId = setTimeout(() => {fn.apply(this, arguments)timeId = null}, interval)}} } 復(fù)制代碼

知識(shí)點(diǎn)：window.setTimeout

時(shí)間戳

const handle = (fn, interval) => {let lastTime = 0return function () {let now = Date.now();if (now - lastTime > interval) {fn.apply(this, arguments)lastTime = now}} } 復(fù)制代碼

8. 函數(shù)防抖

const handle = (fn, delay) => {let timeId;return function() {if (timeId) clearTimeout(timeId)timeId = setTimeout(() => {fn.apply(this, arguments)}, delay)} } 復(fù)制代碼

函數(shù)節(jié)流、函數(shù)防抖區(qū)別：函數(shù)節(jié)流和函數(shù)防抖較容易混淆，可以這么比喻，對(duì)于函數(shù)節(jié)流，門外有人頻繁敲門，但是門衛(wèi)按固定時(shí)間來決定是否開門。對(duì)于函數(shù)防抖，門外有人頻繁敲門，門衛(wèi)按最后一次敲門來決定是否開門。

知識(shí)點(diǎn)：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 復(fù)制代碼 新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的前端笔试之手写代码(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。