- 作者：老汪软件技巧
- 发表时间：2024-08-25 07:02
- 浏览量：
前言
秋招已经差不多开始了，小编我呀前段时间也是陆陆续续的面了许多家的中小公司，投了许多简历今天也是终于约到了一份大厂小米的前端实习面试，这不刚面完就来记录下这次的的面试经历。
一、自我介绍
面试刚开始也是和正常的公司一样，面试官让你简单的做个自我介绍，于是我就框框框的对着面试官一顿输出，相信正在秋招的友友们也已经说过n遍了，已经烂熟于心了吧。这里我就不在叙述了。
二、手写promise
自我介绍完后，面试官也是点头回应了一句后就直接来上一句，那你先手写一下promise吧，果然大厂的面试就是不一样，上来就要我手写，用promise实现让b函数在异步代码a函数执行1000毫秒后执行，我以为他是要我实现一个定时器用promise写，于是我就框框框就是一顿敲
function a() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("a is ok");
resolve(1)
//reject(1)
}, 1000);
});
}
function b() {
console.log("b is ok");
}
a().then(
(res) => {
//console.log(res, "+++");
b();
},
(err) => {
console.log(err, "---");
}
);
我敲完之后他看了看说嗯，还可以，结果来一句，那你直到promise的源码吗，可以手写一下吗？
我：......顿了半天，跟他说嗯，了解过，我试试写写，写了一会也是直接就把promise的源码写了一下，后面的.then的源码倒是没有继续写下去了，面试官看完写完promise的源码后也是没有继续为难我，就说好了，差不多可以，就这样吧，就继续问我下一题了.
关于promise和.then的源码大家可以看看我的这篇文章
面试官：手写下promise和then的源码前言 promise在我们学习javaScript的过程中也是一个非常重要的 - 掘金 ()
三、手画一个三角形
这里面试官是让我用css实现一个三角形，可能没有了解看过这种的题目的小伙伴会无从下手，但是其实用css是可以实现一些简单的像圆和三角形这些几何图形的，实现三角形的方法有很多种，我这里想到的是通过边框来实现三角形。
.box{
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #333;
width:0;
height:0;
}
这样一个三角形也就画出来了。
三角形可以用border画出来，首先一个有四个border的div应该是正方形，设置宽高和四个边框如border-left:50px solid #000;
<style>
.box{
border-left:50px solid #000;
border-right:50px solid #333;
border-top:50px solid #666;
border-bottom:50px solid #999;
width:100px;
height:100px;
background-color: #ccc;
}
style>
head>
<body>
<div class="box">div>
body>
然后我们把它的高度和宽度去掉，剩下四个border.如下图：
.box{
border-left:50px solid #000;
border-right:50px solid #333;
border-top:50px solid #666;
border-bottom:50px solid #999;
width:0;
height:0;
}
再把border-top去掉，这样就把上面的区域给裁掉了。
.box{
border-left:50px solid #000;
border-right:50px solid #333;
border-bottom:50px solid #999;
width:0;
height:0;
}
接下来，再让左右两边的border透明，就得到了三角形
.box{
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #333;
width:0;
height:0;
}
当然，也还有其他方式也可以实现画一个三角形，像还可以通过使用clip-path,还有使用：before伪元素和使用::after伪元素等，方法还有很多，大家可以自行去了解一下。
四、事件循环机制题目
接下来面试官就给了我一道关于判断事件循环机制的题目让我做，小编对这个也是心有成竹，也是把它做出来了，事件循环机制在面试中是一个非常被容易问到的一个知识点，这里我就不具体跟大家叙述了，大家有不懂的可以看看我之前写的这篇文章。
三道面试题带你了解js事件循环机制前言： 什么是js的事件循环机制呢？JavaScript的事件循环机制（Event L - 掘金 ()
五、手写实现三种水平垂直居中的方法
然后面试官也是问了我一些css布局相关的问题，让我手写出三种实现水平居中的方法。小编我也是立马就写了三种出来
方法一：弹性flex
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(28, 101, 164);
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
width: 200px;
height: 200px;
background-color: green;
}
style>
head>
<body>
<div class="box">
<div class="wrap">div>
div>
body>
justify-content: center是主轴居中，align-item: center是交叉轴居中
方法二：定位absolute+translate
给top和left分别一个50%，然后自身再top和left负50%
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(28, 101, 164);
position: relative;
}
.wrap {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin-top: -100px; */
/* margin-left: -100px; */
}
style>
head>
<body>
<div class="box">
<div class="wrap">div>
div>
body>
html>html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(28, 101, 164);
position: relative;
}
.wrap {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin-top: -100px; */
/* margin-left: -100px; */
}
style>
head>
<body>
<div class="box">
<div class="wrap">div>
div>
body>
html>
如果已知宽高的时候也可以不用translate,直接写成margin-left:-100px和margin-top:-100px.
方法三：定位+margin auto
<style>
.father{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.son{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
style>
<div class="father">
<div class="son">div>
父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高
这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin:auto它就可以上下左右都居中了。
六、问了一些简单的js和vue的基础题目
然后就是接着聊了聊一些js和vue的一些知识，具体问的啥我可能也不太记得了，但是都是挺基础的。
七、算法题
最后就是算法题了，我就知道大厂的面试一定少不了算法，果然，问了我一道关于合并重叠的子数组的问题，题目大概意思如下：
合并重叠的子数组，有一个数组包含多个子数组，每个子数组都由不同的时间段[starti,endi]组成，要求合并所有重叠的时间段，返回一个新的二维数组。
输入intervals：一个二维数组，其中每个元素也是一个数组 [start, end] 表示一个时间段，start 和 end 均为整数，且满足 start
