JS手撕，经典面试题(1)，一个前端妹子的面试笔记

let bar = function (name, age) {
console.log(name, age, this.value)
}

bar.myAplly(foo, [‘HearLing’, 18]) //HearLing 18 1
bar.myAplly(null, [‘HearLing’, 18]) //HearLing 18 2
复制代码

bind

• 语法：fn.bind(obj,…args)
• 功能：返回一个新函数，给fn绑定this为obj，并制定参数为后面的n个参数

Function.prototype.myBind = function (obj, …args) {
let that = this
let fn = function () {
if (this instanceof fn) {
return new that(…args)
} else {
return that.call(obj, …args)
}
}
return fn
}

value = 2

let foo = {
value: 1,
}

let bar = function (name, age) {
console.log(name, age, this.value)
}
let fn = bar.myBind(foo, ‘HearLing’, 18)
//fn() //HearLing 18 1
let a = new fn() //HearLing 18 undefined
console.log(a.proto)//bar {}
复制代码

区别call()/apply()/bind()

call(obj)/apply(obj)：:调用函数, 指定函数中的this为第一个参数的值 bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值

节流

• 理解：在函数多次频繁触发时，函数执行一次后，只有大于设定的执行周期后才会执行第二次
• 场景：页面滚动（scroll）、DOM 元素的拖拽（mousemove）、抢购点击（click）、播放事件算进度信息
• 功能：节流函数在设置的delay毫秒内最多执行一次（简单点说就是，我上个锁，不管你点了多少下，时间到了我才解锁）

function throttle(fn, delay) {
let flag = true
return (…args) => {
if (!flag) return
flag = flase
setTimeout(() => {
fn.apply(this, args)
flag = true
}, delay)
}
}
复制代码

防抖

• 理解：在函数频繁触发是，在规定之间以内，只让最后一次生效
• 场景：搜索框实时联想（keyup/input）、按钮点击太快，多次请求（登录、发短信）、窗口调整（resize）
• 功能：防抖函数在被调用后，延迟delay毫秒后调用，没到delay时间，你又点了，清空计时器重新计时，直到真的等了delay这么多秒。

function debounce(fn, delay) {
let timer = null
return (…args) => {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
复制代码

节流与防抖的区别

首先概念上的不同，解释一下什么是防抖节流；然后就是使用场景的不同； 经典区分图： [图片上传中…(image-7eb6d7-1612680062643-0)]

curry

function mycurry(fn, beforeRoundArg = []) {
return function () {
let args = […beforeRoundArg, …arguments]
if (args.length < fn.length) {
return mycurry.call(this, fn, args)
} else {
return fn.apply(this, args)
}
}
}

function sum(a, b, c) {
return a + b + c
}

let sumFn = mycurry(sum)
console.log(sumFn(1)(2)(3))//6

复制代码

数组

数组去重

function unique(arr) {
const res = []
const obj = {}
arr.foreach((item) => {
if (obj[item] === undefined) {
obj[item] = true
res.push(item)
}
})
return res
}
//其他方法
//Array.from(new Set(array))
//[…new Set(array)]

复制代码

数组扁平化

// 递归展开
function flattern1(arr) {
let res = []
arr.foreach((item) => {
if (Array.isArray(item)) {
res.push(…flattern1(item))
} else {
res.push(item)
}
})
return res
}
复制代码

对象

new

function newInstance (Fn, …args) {
const obj = {}
obj.proto = Fn.prototype
const result = Fn.call(obj, …args)
// 如果Fn返回的是一个对象类型, 那返回的就不再是obj, 而是Fn返回的对象否则返回obj
return result instanceof Object ? result : obj
}
复制代码

instanceof

function instance_of(left, right) {
let prototype = right.prototype
while (true) {
if (left === null) {
return false
} else if (left.proto === prototype) {
return true
}
left = left.proto
}
}
let a = {}
console.log(instance_of(a, Object))//true

复制代码

对象数组拷贝

浅拷贝

// 浅拷贝的方法
//Object.assign(target,…arr)
// […arr]
// Array.prototype.slice()
// Array.prototype.concate()

function cloneShallow(origin) {
let target = {}
for (let key in origin) {
if (origin.hasOwnProperty(key)) {
target[key] = origin[key]
}
}
return target
}
let obj = {
name: ‘lala’,
skill: {
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。

“https://i-blog.csdnimg.cn/blog_migrate/c60dfbf6f3b5595525e138fce6f7e80b.jpeg” />

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。

[外链图片转存中…(img-GL1KzD8c-1712166297993)]
[外链图片转存中…(img-8fYUSapr-1712166297993)]