社招前端一面经典手写面试题集锦
- 2022 年 9 月 17 日 浙江
本文字数：10952 字
阅读完需：约 36 分钟
对象数组列表转成树形结构（处理菜单）
[ { id: 1, text: '节点1', parentId: 0 //这里用0表示为顶级节点 }, { id: 2, text: '节点1_1', parentId: 1 //通过这个字段来确定子父级 } ...]
转成[ { id: 1, text: '节点1', parentId: 0, children: [ { id:2, text: '节点1_1', parentId:1 } ] }]
复制代码
实现代码如下:
function listToTree(data) { let temp = {}; let treeData = []; for (let i = 0; i < data.length; i++) { temp[data[i].id] = data[i]; } for (let i in temp) { if (+temp[i].parentId != 0) { if (!temp[temp[i].parentId].children) { temp[temp[i].parentId].children = []; } temp[temp[i].parentId].children.push(temp[i]); } else { treeData.push(temp[i]); } } return treeData;}
复制代码
实现一个 padStart()或 padEnd()的 polyfil
String.prototype.padStart 和 String.prototype.padEnd是ES8中新增的方法，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。我们先看下使用语法：
String.padStart(targetLength,[padString])
复制代码
用法：
'x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab'
// 1. 若是输入的目标长度小于字符串原本的长度则返回字符串本身'xxx'.padStart(2, 's') // 'xxx'
// 2. 第二个参数的默认值为 " "，长度是为1的// 3. 而此参数可能是个不确定长度的字符串，若是要填充的内容达到了目标长度，则将不要的部分截取'xxx'.padStart(5, 'sss') // ssxxx
// 4. 可用来处理日期、金额格式化问题'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
复制代码
polyfill 实现：
String.prototype.myPadStart = function (targetLen, padString = " ") { if (!targetLen) { throw new Error('请输入需要填充到的长度'); } let originStr = String(this); // 获取到调用的字符串, 因为this原本是String{}，所以需要用String转为字符串 let originLen = originStr.length; // 调用的字符串原本的长度 if (originLen >= targetLen) return originStr; // 若是 原本 > 目标 则返回原本字符串 let diffNum = targetLen - originLen; // 10 - 6 // 差值 for (let i = 0; i < diffNum; i++) { // 要添加几个成员 for (let j = 0; j < padString.length; j++) { // 输入的padString的长度可能不为1 if (originStr.length === targetLen) break; // 判断每一次添加之后是否到了目标长度 originStr = `${padString[j]}${originStr}`; } if (originStr.length === targetLen) break; } return originStr;}console.log('xxx'.myPadStart(16))console.log('xxx'.padStart(16))
复制代码
还是比较简单的，而padEnd的实现和它一样，只需要把第二层for循环里的${padString[j]}${orignStr}换下位置就可以了。
实现字符串翻转
在字符串的原型链上添加一个方法，实现字符串翻转：
String.prototype._reverse = function(a){ return a.split("").reverse().join("");}var obj = new String();var res = obj._reverse ('hello');console.log(res); // olleh
复制代码
需要注意的是，必须通过实例化对象之后再去调用定义的方法，不然找不到该方法。
实现 instanceOf
// 模拟 instanceoffunction instance_of(L, R) { //L 表示左表达式，R 表示右表达式 var O = R.prototype; // 取 R 的显示原型 L = L.__proto__; // 取 L 的隐式原型 while (true) { if (L === null) return false; if (O === L) // 这里重点：当 O 严格等于 L 时，返回 true return true; L = L.__proto__; }}
复制代码
实现观察者模式
观察者模式（基于发布订阅模式） 有观察者，也有被观察者
观察者需要放到被观察者中，被观察者的状态变化需要通知观察者 我变化了 内部也是基于发布订阅模式，收集观察者，状态变化后要主动通知观察者
class Subject { // 被观察者 学生 constructor(name) { this.state = 'happy' this.observers = []; // 存储所有的观察者 } // 收集所有的观察者 attach(o){ // Subject. prototype. attch this.observers.push(o) } // 更新被观察者 状态的方法 setState(newState) { this.state = newState; // 更新状态 // this 指被观察者 学生 this.observers.forEach(o => o.update(this)) // 通知观察者 更新它们的状态 }}
class Observer{ // 观察者 父母和老师 constructor(name) { this.name = name } update(student) { console.log('当前' + this.name + '被通知了', '当前学生的状态是' + student.state) }}
let student = new Subject('学生');
let parent = new Observer('父母'); let teacher = new Observer('老师');
// 被观察者存储观察者的前提，需要先接纳观察者student. attach(parent); student. attach(teacher); student. setState('被欺负了');
复制代码
实现 some 方法
Array.prototype.mySome=function(callback, context = window){ var len = this.length, flag=false, i = 0;
for(;i < len; i++){ if(callback.apply(context, [this[i], i , this])){ flag=true; break; } } return flag; }
// var flag=arr.mySome((v,index,arr)=>v.num>=10,obj) // console.log(flag);
复制代码
实现一下 hash 路由
基础的html代码：
<html> <style> html, body { margin: 0; height: 100%; } ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } .box { width: 100%; height: 100%; background-color: red; } </style> <body> <ul> <li> <a href="#red">红色</a> </li> <li> <a href="#green">绿色</a> </li> <li> <a href="#purple">紫色</a> </li> </ul> </body></html>
复制代码
简单实现：
<script> const box = document.getElementsByClassName('box')[0]; const hash = location.hash window.onhashchange = function (e) { const color = hash.slice(1) box.style.background = color }</script>
复制代码
封装成一个 class:
<script> const box = document.getElementsByClassName('box')[0]; const hash = location.hash class HashRouter { constructor (hashStr, cb) { this.hashStr = hashStr this.cb = cb this.watchHash() this.watch = this.watchHash.bind(this) window.addEventListener('hashchange', this.watch) } watchHash () { let hash = window.location.hash.slice(1) this.hashStr = hash this.cb(hash) } } new HashRouter('red', (color) => { box.style.background = color })</script>
复制代码
版本号排序的方法
题目描述:有一组版本号如下 ['0.1.1', '2.3.3', '0.302.1', '4.2', '4.3.5', '4.3.4.5']。现在需要对其进行排序，排序的结果为 ['4.3.5','4.3.4.5','2.3.3','0.302.1','0.1.1']
arr.sort((a, b) => { let i = 0; const arr1 = a.split("."); const arr2 = b.split(".");
while (true) { const s1 = arr1[i]; const s2 = arr2[i]; i++; if (s1 === undefined || s2 === undefined) { return arr2.length - arr1.length; }
if (s1 === s2) continue;
return s2 - s1; }});console.log(arr);
复制代码
手写深度比较 isEqual
思路：深度比较两个对象，就是要深度比较对象的每一个元素。=> 递归
递归退出条件：
被比较的是两个值类型变量，直接用“===”判断
被比较的两个变量之一为
null，直接判断另一个元素是否也为null提前结束递推：
两个变量
keys数量不同传入的两个参数是同一个变量
递推工作：深度比较每一个
key
function isEqual(obj1, obj2){ //其中一个为值类型或null if(!isObject(obj1) || !isObject(obj2)){ return obj1 === obj2; }
//判断是否两个参数是同一个变量 if(obj1 === obj2){ return true; }
//判断keys数是否相等 const obj1Keys = Object.keys(obj1); const obj2Keys = Object.keys(obj2); if(obj1Keys.length !== obj2Keys.length){ return false; }
//深度比较每一个key for(let key in obj1){ if(!isEqual(obj1[key], obj2[key])){ return false; } }
return true;}
复制代码
实现 Array.isArray 方法
Array.myIsArray = function(o) { return Object.prototype.toString.call(Object(o)) === '[object Array]';};
console.log(Array.myIsArray([])); // true
复制代码
手写防抖函数
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
// 函数防抖的实现function debounce(fn, wait) { let timer = null;
return function() { let context = this, args = arguments;
// 如果此时存在定时器的话，则取消之前的定时器重新记时 if (timer) { clearTimeout(timer); timer = null; }
// 设置定时器，使事件间隔指定事件后执行 timer = setTimeout(() => { fn.apply(context, args); }, wait); };}
复制代码
设计一个方法提取对象中所有 value 大于 2 的键值对并返回最新的对象
实现：
var obj = { a: 1, b: 3, c: 4 }foo(obj) // { b: 3, c: 4 }
复制代码
方法有很多种，这里提供一种比较简洁的写法，用到了ES10的Object.fromEntries()：
var obj = { a: 1, b: 3, c: 4 }function foo (obj) { return Object.fromEntries( Object.entries(obj).filter(([key, value]) => value > 2) )}var obj2 = foo(obj) // { b: 3, c: 4 }console.log(obj2)
复制代码
// ES8中 Object.entries()的作用：var obj = { a: 1, b: 2 }var entries = Object.entries(obj); // [['a', 1], ['b', 2]]// ES10中 Object.fromEntries()的作用：Object.fromEntries(entries); // { a: 1, b: 2 }
复制代码
实现 call 方法
call 做了什么:
将函数设为对象的属性
执行和删除这个函数
指定
this到函数并传入给定参数执行函数如果不传入参数，默认指向为
window
// 模拟 call bar.mycall(null);//实现一个call方法：// 原理：利用 context.xxx = self obj.xx = func-->obj.xx()Function.prototype.myCall = function(context = window, ...args) { if (typeof this !== "function") { throw new Error('type error') } // this-->func context--> obj args--> 传递过来的参数
// 在context上加一个唯一值不影响context上的属性 let key = Symbol('key') context[key] = this; // context为调用的上下文,this此处为函数，将这个函数作为context的方法 // let args = [...arguments].slice(1) //第一个参数为obj所以删除,伪数组转为数组
// 绑定参数 并执行函数 let result = context[key](...args); // 清除定义的this 不删除会导致context属性越来越多 delete context[key];
// 返回结果 return result;};
复制代码
//用法：f.call(obj,arg1)function f(a,b){ console.log(a+b) console.log(this.name)}let obj={ name:1}f.myCall(obj,1,2) //否则this指向window
复制代码
查找文章中出现频率最高的单词
function findMostWord(article) { // 合法性判断 if (!article) return; // 参数处理 article = article.trim().toLowerCase(); let wordList = article.match(/[a-z]+/g), visited = [], maxNum = 0, maxWord = ""; article = " " + wordList.join(" ") + " "; // 遍历判断单词出现次数 wordList.forEach(function(item) { if (visited.indexOf(item) < 0) { // 加入 visited visited.push(item); let word = new RegExp(" " + item + " ", "g"), num = article.match(word).length; if (num > maxNum) { maxNum = num; maxWord = item; } } }); return maxWord + " " + maxNum;}
复制代码
原生实现
function ajax() { let xhr = new XMLHttpRequest() //实例化，以调用方法 xhr.open('get', 'https://www.google.com') //参数2，url。参数三：异步 xhr.onreadystatechange = () => { //每当 readyState 属性改变时，就会调用该函数。 if (xhr.readyState === 4) { //XMLHttpRequest 代理当前所处状态。 if (xhr.status >= 200 && xhr.status < 300) { //200-300请求成功 let string = request.responseText //JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象 let object = JSON.parse(string) } } } request.send() //用于实际发出 HTTP 请求。不带参数为GET请求}
复制代码
字符串查找
请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）。
a='34';b='1234567'; // 返回 2a='35';b='1234567'; // 返回 -1a='355';b='12354355'; // 返回 5isContain(a,b);
复制代码
function isContain(a, b) { for (let i in b) { if (a[0] === b[i]) { let tmp = true; for (let j in a) { if (a[j] !== b[~~i + ~~j]) { tmp = false; } } if (tmp) { return i; } } } return -1;}
复制代码
实现日期格式化函数
输入：
dateFormat(new Date('2020-12-01'), 'yyyy/MM/dd') // 2020/12/01dateFormat(new Date('2020-04-01'), 'yyyy/MM/dd') // 2020/04/01dateFormat(new Date('2020-04-01'), 'yyyy年MM月dd日') // 2020年04月01日
复制代码
const dateFormat = (dateInput, format)=>{ var day = dateInput.getDate() var month = dateInput.getMonth() + 1 var year = dateInput.getFullYear() format = format.replace(/yyyy/, year) format = format.replace(/MM/,month) format = format.replace(/dd/,day) return format}
复制代码
实现 Promise
var PromisePolyfill = (function () { // 和reject不同的是resolve需要尝试展开thenable对象 function tryToResolve (value) { if (this === value) { // 主要是防止下面这种情况 // let y = new Promise(res => setTimeout(res(y))) throw TypeError('Chaining cycle detected for promise!') }
// 根据规范2.32以及2.33 对对象或者函数尝试展开 // 保证S6之前的 polyfill 也能和ES6的原生promise混用 if (value !== null && (typeof value === 'object' || typeof value === 'function')) { try { // 这里记录这次then的值同时要被try包裹 // 主要原因是 then 可能是一个getter, 也也就是说 // 1. value.then可能报错 // 2. value.then可能产生副作用(例如多次执行可能结果不同) var then = value.then
// 另一方面, 由于无法保证 then 确实会像预期的那样只调用一个onFullfilled / onRejected // 所以增加了一个flag来防止resolveOrReject被多次调用 var thenAlreadyCalledOrThrow = false if (typeof then === 'function') { // 是thenable 那么尝试展开 // 并且在该thenable状态改变之前this对象的状态不变 then.bind(value)( // onFullfilled function (value2) { if (thenAlreadyCalledOrThrow) return thenAlreadyCalledOrThrow = true tryToResolve.bind(this, value2)() }.bind(this),
// onRejected function (reason2) { if (thenAlreadyCalledOrThrow) return thenAlreadyCalledOrThrow = true resolveOrReject.bind(this, 'rejected', reason2)() }.bind(this) ) } else { // 拥有then 但是then不是一个函数 所以也不是thenable resolveOrReject.bind(this, 'resolved', value)() } } catch (e) { if (thenAlreadyCalledOrThrow) return thenAlreadyCalledOrThrow = true resolveOrReject.bind(this, 'rejected', e)() } } else { // 基本类型 直接返回 resolveOrReject.bind(this, 'resolved', value)() } }
function resolveOrReject (status, data) { if (this.status !== 'pending') return this.status = status this.data = data if (status === 'resolved') { for (var i = 0; i < this.resolveList.length; ++i) { this.resolveList[i]() } } else { for (i = 0; i < this.rejectList.length; ++i) { this.rejectList[i]() } } }
function Promise (executor) { if (!(this instanceof Promise)) { throw Error('Promise can not be called without new !') }
if (typeof executor !== 'function') { // 非标准 但与Chrome谷歌保持一致 throw TypeError('Promise resolver ' + executor + ' is not a function') }
this.status = 'pending' this.resolveList = [] this.rejectList = []
try { executor(tryToResolve.bind(this), resolveOrReject.bind(this, 'rejected')) } catch (e) { resolveOrReject.bind(this, 'rejected', e)() } }
Promise.prototype.then = function (onFullfilled, onRejected) { // 返回值穿透以及错误穿透, 注意错误穿透用的是throw而不是return，否则的话 // 这个then返回的promise状态将变成resolved即接下来的then中的onFullfilled // 会被调用, 然而我们想要调用的是onRejected if (typeof onFullfilled !== 'function') { onFullfilled = function (data) { return data } } if (typeof onRejected !== 'function') { onRejected = function (reason) { throw reason } }
var executor = function (resolve, reject) { setTimeout(function () { try { // 拿到对应的handle函数处理this.data // 并以此为依据解析这个新的Promise var value = this.status === 'resolved' ? onFullfilled(this.data) : onRejected(this.data) resolve(value) } catch (e) { reject(e) } }.bind(this)) }
// then 接受两个函数返回一个新的Promise // then 自身的执行永远异步与onFullfilled/onRejected的执行 if (this.status !== 'pending') { return new Promise(executor.bind(this)) } else { // pending return new Promise(function (resolve, reject) { this.resolveList.push(executor.bind(this, resolve, reject)) this.rejectList.push(executor.bind(this, resolve, reject)) }.bind(this)) } }
// for prmise A+ test Promise.deferred = Promise.defer = function () { var dfd = {} dfd.promise = new Promise(function (resolve, reject) { dfd.resolve = resolve dfd.reject = reject }) return dfd }
// for prmise A+ test if (typeof module !== 'undefined') { module.exports = Promise }
return Promise})()
PromisePolyfill.all = function (promises) { return new Promise((resolve, reject) => { const result = [] let cnt = 0 for (let i = 0; i < promises.length; ++i) { promises[i].then(value => { cnt++ result[i] = value if (cnt === promises.length) resolve(result) }, reject) } })}
PromisePolyfill.race = function (promises) { return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; ++i) { promises[i].then(resolve, reject) } })}
复制代码
图片懒加载
可以给 img 标签统一自定义属性data-src='default.png'，当检测到图片出现在窗口之后再补充 src 属性，此时才会进行图片资源加载。
function lazyload() { const imgs = document.getElementsByTagName('img'); const len = imgs.length; // 视口的高度 const viewHeight = document.documentElement.clientHeight; // 滚动条高度 const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < len; i++) { const offsetHeight = imgs[i].offsetTop; if (offsetHeight < viewHeight + scrollHeight) { const src = imgs[i].dataset.src; imgs[i].src = src; } }}
// 可以使用节流优化一下window.addEventListener('scroll', lazyload);
复制代码
基于 Promise.all 实现 Ajax 的串行和并行
基于 Promise.all 实现 Ajax 的串行和并行
串行：请求是异步的，需要等待上一个请求成功，才能执行下一个请求
并行：同时发送多个请求「
HTTP请求可以同时进行，但是 JS 的操作都是一步步的来的，因为 JS 是单线程」,等待所有请求都成功，我们再去做什么事情?
Promise.all([ axios.get('/user/list'), axios.get('/user/list'), axios.get('/user/list')]).then(results => { console.log(results);}).catch(reason => {
});
复制代码
Promise.all 并发限制及 async-pool 的应用
并发限制指的是，每个时刻并发执行的 promise 数量是固定的，最终的执行结果还是保持与原来的
const delay = function delay(interval) { return new Promise((resolve, reject) => { setTimeout(() => { // if (interval === 1003) reject('xxx'); resolve(interval); }, interval); });};let tasks = [() => { return delay(1000);}, () => { return delay(1003);}, () => { return delay(1005);}, () => { return delay(1002);}, () => { return delay(1004);}, () => { return delay(1006);}];
/* Promise.all(tasks.map(task => task())).then(results => { console.log(results);}); */
let results = [];asyncPool(2, tasks, (task, next) => { task().then(result => { results.push(result); next(); });}, () => { console.log(results);});
复制代码
const delay = function delay(interval) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(interval); }, interval); });};let tasks = [() => { return delay(1000);}, () => { return delay(1003);}, () => { return delay(1005);}, () => { return delay(1002);}, () => { return delay(1004);}, () => { return delay(1006);}];
复制代码
JS 实现 Ajax 并发请求控制的两大解决方案
tasks：数组，数组包含很多方法，每一个方法执行就是发送一个请求「基于Promise管理」
function createRequest(tasks, pool) { pool = pool || 5; let results = [], together = new Array(pool).fill(null), index = 0; together = together.map(() => { return new Promise((resolve, reject) => { const run = function run() { if (index >= tasks.length) { resolve(); return; }; let old_index = index, task = tasks[index++]; task().then(result => { results[old_index] = result; run(); }).catch(reason => { reject(reason); }); }; run(); }); }); return Promise.all(together).then(() => results);}
/* createRequest(tasks, 2).then(results => { // 都成功，整体才是成功，按顺序存储结果 console.log('成功-->', results);}).catch(reason => { // 只要有也给失败，整体就是失败 console.log('失败-->', reason);}); */
复制代码
function createRequest(tasks, pool, callback) { if (typeof pool === "function") { callback = pool; pool = 5; } if (typeof pool !== "number") pool = 5; if (typeof callback !== "function") callback = function () {}; //------ class TaskQueue { running = 0; queue = []; results = []; pushTask(task) { let self = this; self.queue.push(task); self.next(); } next() { let self = this; while (self.running < pool && self.queue.length) { self.running++; let task = self.queue.shift(); task().then(result => { self.results.push(result); }).finally(() => { self.running--; self.next(); }); } if (self.running === 0) callback(self.results); } } let TQ = new TaskQueue; tasks.forEach(task => TQ.pushTask(task));}createRequest(tasks, 2, results => { console.log(results);});
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 4
还未添加个人签名 2022.07.31 加入
还未添加个人简介
评论