2024年2024前端面试之JavaScript手写题（二），秋招的面试时间一般在什么时候

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

3.深拷贝（deepclone）

---

判断类型，正则和日期直接返回新对象

空或者非对象类型，直接返回原值

考虑循环引用，判断如果hash中含有直接返回hash中的值

新建一个相应的new obj.constructor加入hash

遍历对象递归（普通key和key是symbol情况）

function deepClone(obj,hash = new WeakMap()){

if(obj instanceof RegExp) return new RegExp(obj);

if(obj instanceof Date) return new Date(obj);

if(obj === null || typeof obj !== ‘object’) return obj;

//循环引用的情况

if(hash.has(obj)){

return hash.get(obj)

}

//new 一个相应的对象

//obj为Array，相当于new Array()

//obj为Object，相当于new Object()

let constr = new obj.constructor();

hash.set(obj,constr);

for(let key in obj){

if(obj.hasOwnProperty(key)){

constr[key] = deepClone(obj[key],hash)

}

}

//考虑symbol的情况

let symbolObj = Object.getOwnPropertySymbols(obj)

for(let i=0;i<symbolObj.length;i++){

if(obj.hasOwnProperty(symbolObj[i])){

constr[symbolObj[i]] = deepClone(obj[symbolObj[i]],hash)

}

}

return constr

}

4.数组扁平化的实现(flat)

---

let arr = [1,2,[3,4,[5,[6]]]]

console.log(arr.flat(Infinity))//flat参数为指定要提取嵌套数组的结构深度，默认值为 1

//用reduce实现

function fn(arr){

return arr.reduce((prev,cur)=>{

return prev.concat(Array.isArray(cur)?fn(cur):cur)

},[])

}

5.函数柯里化

---

function sumFn(a,b,c){return a+ b + c};

let sum = curry(sumFn);

sum(2)(3)(5)//10

sum(2,3)(5)//10

function curry(fn,…args){

let fnLen = fn.length,

argsLen = args.length;

//对比函数的参数和当前传入参数

//若参数不够就继续递归返回curry

//若参数够就调用函数返回相应的值

if(fnLen > argsLen){

return function(…arg2s){

return curry(fn,…args,…arg2s)

}

}else{

return fn(…args)

}

}

6.使用闭包实现每隔一秒打印 1,2,3,4

---

for (var i=1; i<=5; i++) {

(function (i) {

setTimeout(() => console.log(i), 1000*i)

})(i)

}

7.手写一个 jsonp

---

const jsonp = function (url, data) {

return new Promise((resolve, reject) => {

// 初始化url

let dataString = url.indexOf(‘?’) === -1 ? ‘?’ : ‘’

let callbackName = jsonpCB_${Date.now()}

url += ${dataString}callback=${callbackName}

if (data) {

// 有请求参数，依次添加到url

for (let k in data) {

url += ${k}=${data[k]}

}

}

let jsNode = document.createElement(‘script’)

jsNode.src = url

// 触发callback，触发后删除js标签和绑定在window上的callback

window[callbackName] = result => {

delete window[callbackName]

document.body.removeChild(jsNode)

if (result) {

resolve(result)

} else {

reject(‘没有返回数据’)

}

}

// js加载异常的情况

jsNode.addEventListener(‘error’, () => {

delete window[callbackName]

document.body.removeChild(jsNode)

reject(‘JavaScript资源加载失败’)

}, false)

// 添加js节点到document上时，开始请求

document.body.appendChild(jsNode)

})

}

jsonp(‘http://192.168.0.103:8081/jsonp’, {

a: 1,

b: ‘heiheihei’

})

.then(result => {

console.log(result)

})

.catch(err => {

console.error(err)

})

8.手写一个观察者模式

---

class Subject{

constructor(name){

this.name = name

this.observers = []

this.state = ‘XXXX’

}

// 被观察者要提供一个接受观察者的方法

attach(observer){

this.observers.push(observer)

}

// 改变被观察着的状态

setState(newState){

this.state = newState

this.observers.forEach(o=>{

o.update(newState)

})

}

}

class Observer{

constructor(name){

this.name = name

}

update(newState){

console.log(${this.name}say:${newState})

}

}

// 被观察者 灯

let sub = new Subject(‘灯’)

let mm = new Observer(‘小明’)

let jj = new Observer(‘小健’)

// 订阅 观察者

sub.attach(mm)

sub.attach(jj)

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。