滴滴正式批前端一二三面
9/13，一面
40min
自我介绍
JS判断类型
说说call和bind
new做了什么
Object.create做了什么
看输出 两题：
var name = 'Tom';
(function () {
if (typeof name == 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
CSS模块化有哪些规范
JS模块化规范
npm install做了哪些事情
两种路由模式的区别
nodejs进程守护
知道哪些设计模式
观察者模式和发布订阅模式区别
单例模式的应用
浏览器缓存
babel转换过程
虚拟列表
内存泄漏场景，怎么定位
冒泡，快排，归并复杂度
写一个归并
最近在学什么
未来规划
学习方法路径
反问：流程：连续三面
9/13，二面
50min
自我介绍
项目
上来六个题
- 一行代码实现拍平
const deps = {
'A': [1, 2, 3],
'B': [5, 8, 12, [6, 4, 6]],
'C': [5, 14, 79],
'D': [3, 64, 105]
}
// 要求输出：[1, 2, 3, 5, 8, 12, 6, 4, 6, 5, 14, 79, 3, 64, 105]
-
实现一个new
-
说输出：
function Person() {
this.name = 'Jack';
}
var p = new Person();
console.log(p.name);
var q = Person();
console.log(q);
console.log(name);
console.log(q.name);
function Person() {
this.name = 'Jack';
return 'Tom';
}
var p = new Person();
console.log(p);
console.log(p.name);
function Person() {
this.name = 'Jack';
return { age: 18 };
}
var p = new Person();
console.log(p);
console.log(p.name);
console.log(p.age);
- 说输出：
const promise = new Promise((resolve, reject) => {
console.log(1);
console.log(2);
});
promise.then(() => {
console.log(3);
});
console.log(4);
- 如何改进fn：
const fn1 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 300);
});
}
const fn2 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 600);
});
}
const fn = () => {
fn1().then(res1 => {
console.log(res1);
fn2().then(res2 => {
console.log(res2);
});
});
}
- 实现Promise.race
组合式api和选项式api
computed和watch
vue为什么this.foo可以访问this.data.foo
vue依赖收集
watch深层响应式变量，怎么优化
排查内存泄漏
说说webpack，给几个关键词把他们串起来：loader plugin chunk module bundle
pnpm和npm
写CSS，水平垂直居中，能写的都写上
写一个组件库之前会做什么准备工作
反问：
评价：前半段还挺优秀，了解的都挺深入，后半段对于工程化相关了解不多
9/13，三面
53min
自我介绍
为什么选前端
学习方法
封装的组件和正常写的组件的设计区别
pinia的使用场景，怎么决定用不用
虚拟列表
写题：
封装一个fetch，有最大并发限制10，每个请求可以有优先级，根据优先级发请求，优先级大于等于0，越大优先级越高 如 myFetch(url, options={}, priority=0)
class MyFetch {
constructor() {
this.queue = []
this.count = 0
this.maxCount = 5
}
fetch(url, options = {}, priority = 0) {
return new Promise((resolve, reject) => {
this.queue.push([priority, url, options, resolve, reject])
this._run()
})
}
_run() {
if (this.count >= this.maxCount || this.queue.length === 0) return
this.count++
while (this.queue.length) {
this.queue.sort((a, b) => a[0] - b[0])
const [_, url, options, resolve, reject] = this.queue.shift()
fetch(url, options).then(resolve).catch(reject).finally(() => {
this.count--
this._run()
})
}
}
}
压缩CSS类名
optim('class-a') // a
optim('class-aa') // b
optim('class-a') // a
optim('class-a class-aa class-b') // a b c
function optimizer() {
const map = new Map()
let index = 0
const index2string = (index) => {
let result = ''
while (index >= 26) {
result = String.fromCharCode(index % 26 + 97) + result
index = Math.floor(index / 26) - 1
}
return String.fromCharCode(index + 97) + result
}
return (className) => {
const arr = className.split(' ')
const result = new Set()
arr.forEach(name => {
if (map.has(name)) {
result.add(map.get(name))
} else {
map.set(name, index2string(index))
result.add(index2string(index))
++index
}
})
return [...result].join(' ')
}
}
optim = optimizer()
反问：
评价：结合前面一面二面的情况感觉前端基础这块还是不错的，个人建议多点实践、多总结，前端相关还是要系统性学习；代码方面思路没问题，细节要注意（最后一个题的index2string没写好，连着三面脑子不太清楚；写面经的时候用ai完善下补前面了……
后续：会统一告诉大家结果，不会很久
#前端##面经##滴滴##软件开发笔面经#
查看7道真题和解析