php 手写代码题目,前端笔试之手写代码

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, {} ]

方法二：

const handle = array => array.reduce((accumulator, currentValue) => accumulator.concat(Array.isArray(currentValue) ? handle(currentValue): currentValue), [])

handle(array) // [ 1, 1, 2, 3, 1, 2, {} ]

方法三：

const handle = array => {

while(array.some(item => Array.isArray(item))) {

array = [].concat(...array)

}

return array

}

handle(array) // [ 1, 1, 2, 3, 1, 2, {} ]

其它方法：......

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 ]

方法三：

const handle = array => {

let map = new Map()

return array.filter(item => map.has(item) ? false : map.set(item))

}

handle(array) // [ 1, 2, '3', 0 ]

其它方法：......

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))

};

};

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;

}

5. 格式化数字

const num = 123456789;

const handle = num => String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ',')

handle(num) // 123,456,789

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

7. 函数节流

定时器

const handle = (fn, interval) => {

let timeId = null;

return function() {

if (!timeId) {

timeId = setTimeout(() => {

fn.apply(this, arguments)

timeId = null

}, interval)

}

}

}

时间戳

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)

}

}

函数节流、函数防抖区别：函数节流和函数防抖较容易混淆，可以这么比喻，对于函数节流，门外有人频繁敲门，但是门卫按固定时间来决定是否开门。对于函数防抖，门外有人频繁敲门，门卫按最后一次敲门来决定是否开门。

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