总结
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
前端资料汇总
}
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: {
js: 1,
css: 2,
},
}
let newobj = cloneShallow(obj)
newobj.name = ‘zhl’
newobj.skill.js = 99
console.log(obj)//{ name: ‘lala’, skill: { js: 99, css: 2 } }
console.log(newobj)//{ name: ‘zhl’, skill: { js: 99, css: 2 } }
复制代码
深拷贝
// 浅拷贝的方法
//JSON.parse(JSON.stringify(obj))
function deepClone(source, hashMap = new WeakMap()) {
let target = new source.constructor()
总结
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
前端资料汇总