前端面试手撕题整理（自用）
收集整理自用，方便平时翻看记忆。题目和答案来源请看文章末尾，欢迎各位大佬补充，批评指正
一般来说，把下面基础中的高频题写熟练就差不多了。当然去面大厂这些远远不够，还要再刷一些算法题。
基础
高频
1.手写 instanceof
// 原理：验证当前类的原型prototype是否会出现在实例的原型链proto上，只要在它的原型链上，则结果都为true
function myinstanceOf_(obj, class_name) {
// let proto = obj.__proto__;
let proto = Object.getPrototypeOf(obj)
let prototype = class_name.prototype
while (true) {
if (proto == null) return false
if (proto == prototype) return true
// proto = proto.__proto__;
proto = Object.getPrototypeOf(proto)
}
} 2.手写 new 操作符
function myNew(){
//1.创建一个新的对象
let obj = {};
//获得构造函数
let con = [].shift.call(arguments);
//2.新对象的隐式原型__proto__链接到构造函数的显式原型prototype
obj.__proto__ = con.prototype;
//3.构造函数内部的 this 绑定到这个新创建的对象 执行构造函数
let result = con.apply(obj, arguments)
//4.如果构造函数没有返回非空对象，则返回创建的新对象
return result instanceof Object ? result:obj;
}
// test
/*
function Car(name,price){
this.name = name
this.price = price
}
Car.prototype.run = function() {
console.log(this.price);
};
var test_create = myNew(Car, 'a', 100000);
console.log(test_create)
// compare
let obj = new Car( 'a', 100000)
console.log(obj)
*/ 3.手写 call、apply、bind 函数
- call(thisArg, ...args)
// 给函数的原型添加 _call 方法，使得所有函数都能调用 _call
// thisArg 就是要绑定的那个this；...args 扩展操作符传参，适合不定长参数，args是一个数组
Function.prototype._call = function(thisArg,...args){
// 1.获取需要执行的函数
let func = this
// 2.将 thisArg 转成对象类型（防止它传入的是非对象类型，例如123数字）
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
// 3.使用 thisArg 调用函数，绑定 this
// 评论区大佬提出的改进方法，用 Symbol 创建一个独一无二的属性，避免属性覆盖或冲突的情况
let fn = Symbol()
thisArg[fn] = this
// thisArg.fn = fn
let result = thisArg[fn](...args)
delete thisArg[fn]
// 4.返回结果
return result
} - apply(thisArg, argsArray)
Function.prototype._apply = function(thisArg,argArray){
// 1.获取需要执行的函数
let fn = this
// 2.将 thisArg 转成对象类型（防止它传入的是非对象类型，例如123数字）
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
// 判断一些边界情况
argArray = argArray || []
// 3.使用 thisArg 调用函数，绑定 this
thisArg.fn = fn
// 将传递过来的数组（可迭代对象）拆分，传给函数
let result = thisArg.fn(...argArray)
delete thisArg.fn
// 4.返回结果
return result
} - bind(thisArg, ...args)
Function.prototype._call = function(thisArg,...args){
let fn = this
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
thisArg.fn = fn
let result = thisArg.fn(...args)
delete thisArg.fn
return result
}
// 利用 call 模拟 bind
Function.prototype._bind = function(thisArg,...args){
let fn = this // 需要调用的那个函数的引用
// bind 需要返回一个函数
return function(){
return fn._call(thisArg, ...args)
}
} 4.手写深拷贝
PS:浅拷贝也可以用一样的模板，当然深拷贝考得多
function deepCopy(object) {
if (!object || typeof object !== "object") return object;
let newObject = Array.isArray(object) ? [] : {};
for (let key in object) {
if (object.hasOwnProperty(key)) {
newObject[key] = deepCopy(object[key]);
}
}
return newObject;
} 进阶：解决循环引用的深拷贝
function deepClone(obj, hash = new WeakMap()) {
if (!object || typeof object !== "object") return object;
// 是对象的话就要进行深拷贝,遇到循环引用，将引用存储起来，如果存在就不再拷贝
if (hash.get(obj)) return hash.get(obj);
let cloneObj = Array.isArray(object) ? [] : {};
hash.set(obj, cloneObj);
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 实现一个递归拷贝
cloneObj[key] = deepClone(obj[key], hash);
}
}
return cloneObj;
} 5.手写防抖节流
function debounce(func, delay) {
// 这里使用了闭包，所以 timer 不会轻易被销毁
let timer = null
// 生成一个新的函数并返回
return function (...args) {
// 清空定时器
if (timer) {
clearTimeout(timer)
}
// 重新启动定时器
timer = setTimeout(() => {
func.call(this, ...args)
}, delay)
}
}
function throttle(func, delay) {
let timer = null
// 在 delay 时间内，最多执行一次 func
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
func.call(this, ...args)
// 完成一次计时，清空，待下一次触发
timer = null
}, delay)
}
}
} 6.手写Ajax请求
function ajax(url) {
// 创建一个 XHR 对象
return new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest()
// 指定请求类型，请求URL，和是否异步
xhr.open('GET', url, true)
xhr.onreadystatechange = funtion() {
// 表明数据已就绪
if(xhr.readyState === 4) {
if(xhr.status === 200){
// 回调
resolve(JSON.stringify(xhr.responseText))
}
else{
reject('error')
}
}
}
// 发送定义好的请求
xhr.send(null)
})
} 7.手写数组去重
// 1.Set + 数组复制
fuction unique1(array){
// Array.from()，对一个可迭代对象进行浅拷贝
return Array.from(new Set(array))
}
// 2.Set + 扩展运算符浅拷贝
function unique2(array){
// ... 扩展运算符
return [...new Set(array)]
}
// 3.filter，判断是不是首次出现，如果不是就过滤掉
function unique3(array){
return array.filter((item,index) => {
return array.indexOf(item) === index
})
}
// 4.创建一个新数组，如果之前没加入就加入
function unique4(array){
let res = []
array.forEach(item => {
if(res.indexOf(item) === -1){
res.push(item)
}
})
return res
} 进阶：如果数组内有数组和对象，应该怎么去重（此时对象的地址不同，用Set去不了重）
8.手写数组扁平
// 方法1-3：递归
function flat1(array){
// reduce(): 对数组的每一项执行归并函数，这个归并函数的返回值会作为下一次调用时的参数，即 preValue
// concat(): 合并两个数组，并返回一个新数组
return array.reduce((preValue,curItem) => {
return preValue.concat(Array.isArray(curItem) ? flat1(curItem) : curItem)
},[])
}
function flat2(array){
let res = []
array.forEach(item => {
if(Array.isArray(item)){
// res.push(...flat2(item))
// 如果遇到一个数组，递归
res = res.concat(flat2(item))
}
else{
res.push(item)
}
})
return res
}
function flat3(array){
// some(): 对数组的每一项都运行传入的函数，如果有一项返回 TRUE，则这个方法返回 TRUE
while(array.some(item => Array.isArray(item))){
// ES6 增加了扩展运算符，用于取出参数对象的所有可遍历属性，拷贝到当前对象之中：
array = [].concat(...array)
console.log(...array)
}
return array
}
// 方法4、5：先转成字符串，再变回数组
function flat4(array){
//[1,[2,3]].toString() => 1,2,3
return array.toString().split(',').map(item => parseInt(item))
}
function flat5(array){
return array.join(',').split(',').map(item => Number(item))
} 9.手写数组乱序
// 方法1： sort + Math.random()
function shuffle1(arr){
return arr.sort(() => Math.random() - 0.5);//
}
// 方法2：时间复杂度 O(n^2)
// 随机拿出一个数（并在原数组中删除），放到新数组中
function randomSortArray(arr) {
let backArr = [];
while (arr.length) {
let index = parseInt(Math.random() * arr.length);
backArr.push(arr[index]);
arr.splice(index, 1);
}
return backArr;
}
// 方法3：时间复杂度 O(n)
// 随机选一个放在最后，交换
function randomSortArray2(arr) {
let lenNum = arr.length - 1;
for (let i = 0; i < lenNum; i++) {
let index = parseInt(Math.random() * (lenNum + 1 - i));
[a[index],a[lenNum - i]] = [a[lenNum - i],a[index]]
}
return arr;
} 10.手写 Promise.all()、Promise.race()
PS: 有能力的可以去写下 Promise 和其他的 Promise 方法
function myAll(promises){
// 问题关键：什么时候要执行resolve，什么时候要执行 reject
return new Promise((resolve,reject) => {
results = []
// 迭代数组中的 Promise，将每个 promise 的结果保存到一个数组里
let counter = 0
for (let i = 0; i < promises.length; i++) {
// 如果不是 Promise 类型要先包装一下
// 调用 then 得到结果
Promise.resolve(promises[i]).then(res => {
// 这里不能用 push()，因为需要保证结果的顺序。感谢评论区大佬的批评指正
results[i] = res
counter++
// 如果全部成功，状态变为 fulfilled
if(counter === promises.length){
resolve(results)
}
},err => { // 如果出现了 rejected 状态，则调用 reject() 返回结果
reject(err)
})
}
}
)
}
// test
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(1)
}, 1000)
})
let p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(2)
}, 2000)
})
let p3 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(3)
}, 3000)
})
myAll([p3, p1, p2]).then(res => {
console.log(res) // [3, 1, 2]
}) // 哪个 promise 状态先确定，就返回它的结果
function myRace(promises) {
return new Promise((resolve, reject) => {
promises.forEach(promise => {
Promise.resolve(promise).then(res => {
resolve(res)
}, err => {
reject(err)
})
})
})
} 11.手撕快排
PS: 常见的排序算法，像冒泡，选择，插入排序这些最好也背一下，堆排序归并排序能写则写。万一考到了呢，要是写不出就直接回去等通知了
const _quickSort = array => {
// 补全代码
quickSort(array, 0, array.length - 1)
// 别忘了返回数组
return array
}
const quickSort = (array, start, end) => {
// 注意递归边界条件
if(end - start < 1) return
// 取第一个数作为基准
const base = array[start]
let left = start
let right = end
while(left < right){
// 从右往左找小于基准元素的数，并赋值给右指针 array[right]
while(left < right && array[right] >= base) right--
array[left] = array[right]
// 从左往右找大于基准元素的数，并赋值给左指针 array[left]
while(left < right && array[left] <= base) left++
array[right] = array[left]
}
// 双指针重合处，将基准元素填到这个位置。基准元素已经事先保存下来了，因此不用担心上面的赋值操作会覆盖掉基准元素的值
// array[left] 位置已经确定，左边的都比它小，右边的都比它大
array[left] = base
quickSort(array, start, left - 1)
quickSort(array, left + 1, end)
return array
} 12.手写 JSONP
// 动态的加载js文件
function addScript(src) {
const script = document.createElement('script');
script.src = src;
script.type = "text/javascript";
document.body.appendChild(script);
}
addScript("http://xxx.xxx.com/xxx.js?callback=handleRes");
// 设置一个全局的callback函数来接收回调结果
function handleRes(res) {
console.log(res);
}
// 接口返回的数据格式，加载完js脚本后会自动执行回调函数
handleRes({a: 1, b: 2}); 13.手写寄生组合继承
PS: 组合继承也要能写出来
function Parent(name) {
this.name = name;
this.say = () => {
console.log(111);
};
}
Parent.prototype.play = () => {
console.log(222);
};
function Children(name,age) {
Parent.call(this,name);
this.age = age
}
Children.prototype = Object.create(Parent.prototype);
Children.prototype.constructor = Children; 14.数组/字符串操作题
可以自己找些基础的练一下，就不一一列举了
15.手写二分查找
// 迭代版
function search(nums, target) {
// write code here
if(nums.length === 0) return -1
let left = 0,right = nums.length - 1
// 注意这里的边界，有等号
while(left <= right){
let mid = Math.floor((left + right) / 2)
if(nums[mid] < target) left = mid + 1
else if(nums[mid] > target) right = mid - 1
else return mid
}
return -1
}
// 递归版
function binary_search(arr, low, high, key) {
if (low > high) {
return -1;
}
var mid = parseInt((high + low) / 2);
if (arr[mid] == key) {
return mid;
} else if (arr[mid] > key) {
high = mid - 1;
return binary_search(arr, low, high, key);
} else if (arr[mid] < key) {
low = mid + 1;
return binary_search(arr, low, high, key);
}
}; 16.手写函数柯里化
function sum(x,y,z) {
return x + y + z
}
function hyCurrying(fn) {
// 判断当前已经接收的参数的个数，和函数本身需要接收的参数是否一致
function curried(...args) {
// 1.当已经传入的参数 大于等于 需要的参数时，就执行函数
if(args.length >= fn.length){
// 如果调用函数时指定了this，要将其绑定上去
return fn.apply(this, args)
}
else{
// 没有达到个数时，需要返回一个新的函数，继续来接收参数
return function(...args2) {
//return curried.apply(this, [...args, ...args2])
// 接收到参数后，需要递归调用 curried 来检查函数的个数是否达到
return curried.apply(this, args.concat(args2))
}
}
}
return curried
}
var curryAdd = hyCurry(sum)
curryAdd(10,20,30)
curryAdd(10,20)(30)
curryAdd(10)(20)(30) 17.CSS水平垂直居中
18.CSS画三角形
19.CSS实现两栏和三栏布局
20.手写发布-订阅模式 || Event Bus
中频
1.手写事件委托
2.DOM操作相关题目
3.手写对象扁平化
4.手写数组常见方法 Array.filter/map/fill/reduce
5.手写列表转树
6.日期时间格式化
7.数字千分位
8.URL参数解析
9.手写观察者模式
10.手写 Promise（进阶）
低频
1.手写组合函数
2.手写Object.create()
3.手写Object.is()
4.手写Object.freeze()
5.手写JSON.stringify()
6.大数相加
7.下划线转驼峰
8.CSS清除浮动
场景模拟题
高频
1.实现 sleep 函数
async function test() {
console.log('开始')
await sleep(4000)
console.log('结束')
}
function sleep(ms) {
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, ms)
})
}
test() 2.setTimeout 实现 setInterval
function setInterval(fn, time){
var interval = function(){
// time时间过去，这个异步被执行，而内部执行的函数正是interval，就相当于进了一个循环
setTimeout(interval, time);
// 同步代码
fn();
}
//interval被延迟time时间执行
setTimeout(interval,time);
} 3.异步循环打印 1，2，3
var sleep = function (time, i) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(i);
}, time);
})
};
var start = async function () {
for (let i = 1; i <= 3; i++) {
let result = await sleep(1000, i);
console.log(result);
}
};
start();
4.循环打印红、黄、绿
function red() {
console.log('red');
}
function green() {
console.log('green');
}
function yellow() {
console.log('yellow');
}
const task = (timer, light) => {
new Promise((resolve, reject) => {
setTimeout(() => {
if (light === 'red') {
red()
}
else if (light === 'green') {
green()
}
else if (light === 'yellow') {
yellow()
}
resolve()
}, timer)
})
}
const taskRunner = async () => {
await task(3000, 'red')
await task(2000, 'green')
await task(2100, 'yellow')
taskRunner()
}
taskRunner() 进阶
Promise 并发控制、串行执行相关的题目
更多 Promise 的面试题在这里：要就来45道Promise面试题一次爽到底，面大厂的兄弟可以看看
参考资料
- 牛客职导校招冲刺集训营-前端.牛客
- 前端面试手撕题.牛客网JS手撕题库
- 前端秋招面经.bbin.牛客
- 前端开发-个人面经高频知识点整理(校招) .求求来一份offer趴！！.牛客
- 「2021」高频前端面试题汇总之手写代码篇.CUGGZ.掘金
- 最全的手写JS面试题.Big shark@LX.掘金
- 2021年前端各大公司都考了那些手写题(附带代码).战场小包.掘金
- awesome-coding-js 用
JavaScript实现的算法和数据结构.Conardli.GitHub - 深入JavaScript高级语法.coderwhy
- 「一劳永逸」送你21道高频JavaScript手写面试题.TianTianUp.掘金
#前端##面试##手撕代码##前端基础知识点总结##前端面试#更多题目可见 https://fe.ecool.fun/topic-list?pageNumber=6&orderBy=updateTime&order=asc&tagId=26
大佬！
