前端筆試之手寫程式碼
摘要：
1. 扁平化巢狀陣列/flat實現
描述：將巢狀多層的陣列展開平鋪成只有一層的陣列。
let array = [1, [1, 2, 3], [1, [2, {}]] ]
handle(array) // [1, 1, 2, 3, 1, 2, {}]
方法一：
const ...
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(arr).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) ? hanlde(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