校招 未知部门 / 前端 / 一面/二面/三面
[面试日期] 2024-11-19 [面试时长] 未知
[学校背景] 河海大学 | 211 [学历背景] 未知
[发布人] 面试之星官方收录
<h2>滴滴正式批前端一二三面</h2>
<h5>9/13，一面</h5>
<p>40min</p>
<p>自我介绍</p>
<p>JS判断类型</p>
<p>说说call和bind</p>
<p>new做了什么</p>
<p>Object.create做了什么</p>
<p>看输出 两题：</p>
<pre><code>var name = 'Tom';
(function () {
if (typeof name == 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
</code></pre>
<pre><code>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');
</code></pre>
<p>CSS模块化有哪些规范</p>
<p>JS模块化规范</p>
<p>npm install做了哪些事情</p>
<p>两种路由模式的区别</p>
<p>nodejs进程守护</p>
<p>知道哪些设计模式</p>
<p>观察者模式和发布订阅模式区别</p>
<p>单例模式的应用</p>
<p>浏览器缓存</p>
<p>babel转换过程</p>
<p>虚拟列表</p>
<p>内存泄漏场景，怎么定位</p>
<p>冒泡，快排，归并复杂度</p>
<p>写一个归并</p>
<p>最近在学什么</p>
<p>未来规划</p>
<p>学习方法路径</p>
<p>反问：流程：连续三面</p>
<h5>9/13，二面</h5>
<p>50min</p>
<p>自我介绍</p>
<p>项目</p>
<p>上来六个题</p>
<ol>
<li>一行代码实现拍平</li>
</ol>
<pre><code>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]
</code></pre>
<ol>
<li>
<p>实现一个new</p>
</li>
<li>
<p>说输出：</p>
</li>
</ol>
<pre><code>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);
</code></pre>
<pre><code>function Person() {
this.name = 'Jack';
return 'Tom';
}
var p = new Person();
console.log(p);
console.log(p.name);
</code></pre>
<pre><code>function Person() {
this.name = 'Jack';
return { age: 18 };
}
var p = new Person();
console.log(p);
console.log(p.name);
console.log(p.age);
</code></pre>
<ol>
<li>说输出：</li>
</ol>
<pre><code>const promise = new Promise((resolve, reject) => {
console.log(1);
console.log(2);
});
promise.then(() => {
console.log(3);
});
console.log(4);
</code></pre>
<ol>
<li>如何改进fn：</li>
</ol>
<pre><code>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);
});
});
}
</code></pre>
<ol>
<li>实现Promise.race</li>
</ol>
<p>组合式api和选项式api</p>
<p>computed和watch</p>
<p>vue为什么this.foo可以访问this.data.foo</p>
<p>vue依赖收集</p>
<p>watch深层响应式变量，怎么优化</p>
<p>排查内存泄漏</p>
<p>说说webpack，给几个关键词把他们串起来：loader plugin chunk module bundle</p>
<p>pnpm和npm</p>
<p>写CSS，水平垂直居中，能写的都写上</p>
<p>写一个组件库之前会做什么准备工作</p>
<p>反问：</p>
<p>评价：前半段还挺优秀，了解的都挺深入，后半段对于工程化相关了解不多</p>
<h5>9/13，三面</h5>
<p>53min</p>
<p>自我介绍</p>
<p>为什么选前端</p>
<p>学习方法</p>
<p>封装的组件和正常写的组件的设计区别</p>
<p>pinia的使用场景，怎么决定用不用</p>
<p>虚拟列表</p>
<p>写题：</p>
<p>封装一个fetch，有最大并发限制10，每个请求可以有优先级，根据优先级发请求，优先级大于等于0，越大优先级越高
如 myFetch(url, options={}, priority=0)</p>
<pre><code>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()
})
}
}
}
</code></pre>
<p>压缩CSS类名</p>
<pre><code>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()
</code></pre>
<p>反问：</p>
<p>评价：结合前面一面二面的情况感觉前端基础这块还是不错的，个人建议多点实践、多总结，前端相关还是要系统性学习；代码方面思路没问题，细节要注意（最后一个题的index2string没写好，连着三面脑子不太清楚；写面经的时候用ai完善下补前面了……</p>
<p>后续：会统一告诉大家结果，不会很久</p>
<br>
<p><a href="https://gw-c.nowcoder.com/api/sparta/jump/link?link=https%3A%2F%2Fwww.nowcoder.com%2Fdiscuss%2F687051855494500352">面经合集</a></p>
<br><a>#前端#</a><a>#面经#</a><a>#滴滴#</a><a>#软件开发笔面经#</a>
AI 推荐面试题