2024前端面试之JavaScript手写题（二）

timeLock = setTimeout(()=>{

fn(…args)

},time)

}

}

2.实现节流函数（throttle）

---

在一定时间内只触发一次，场景：长列表滚动节流

let throttle = (fn,time = 1000) => {

let flag = true;

return function (…args){

if(flag){

flag = false;

setTimeout(()=>{

flag = true;

fn(…args)

},time)

}

}

}

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)

})

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

de》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整