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

return function (…args){

clearTimeout(timeLock)

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)

})

}

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)
读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）