快手：看见每一种生活（一面凉经）
第一次面试，很幸运的遇见了快手
开局两道题，直接整懵
一：Javascript实现字符串反转
//方法一：
function strReverse(str) {
return str.split("").reverse().join("")
}
//方法二：
function strReverse(str) {
var i=str.length;
var nstr = "";
i=i-1;
for (var x = i; x >=0; x--) {
nstr+=str.charAt(x)
}
return nstr
}
//方法三：
function strReverse(str) {
if(str.length == 0)return null;
var i = str.length;
var dstr = "";
while(--i >= 0)
{
dstr += str.charAt(i);
}
return dstr;
}
//方法四：
function strReverse(str) {
return str.split('').reduce((prev, next) => next + prev);
}
//方法五：
function strReverse(str) {
var newstr="";
for(var i=0;i<str.length;i++){
newstr=str.charAt(i)+newstr;
}
return newstr
}
//方法六：
function strReverse(str) {
if(str.length===1){
return str
}
return str.slice(-1)+strReverse(str.slice(0,-1));
}
二：穷举字符串的所有大小写组合
例：输入’kwai’
输出’Kwai,kWai…'一共十六种
这道题没做出来-附网络代码
//方法一：
var a1 = ['s','S'];
var a2 = ['w','W'];
var a3 = ['z','Z'];
var a4 = ['s','S'];
var a5 = ['w','W'];
var a6 = ['z','Z'];
var b1 = '';
var b2 = '';
var b3 = '';
var b4 = '';
var b5 = '';
var b6 = '';
var re = '';
var r = [];
for(var i=0;i<=1;i++){
b1 = a1[i];//b1=s
for(var j=0;j<=1;j++){
b2 = a2[j];//b2=w
for(var k=0;k<=1;k++){
b3 = a3[k];
for(var l=0;l<=1;l++){
b4 = a4[l];
for(var m=0;m<=1;m++){
b5 = a5[m];
for(var n=0;n<=1;n++){
b6 = a6[n];
re = b1 + b2 + b3 + b4 + b5 + b6;
r.push(re);
document.write(re+'<br/>');
}
}
}
}
}
}
//在网上没多大找到关于js解决穷举算法的示例，建议可以多了解大小写转换
三：前端实现水平垂直居中
1.绝对定位元素的居中实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位元素的居中实现margin</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*高度的一半*/
margin-left: -50px; /宽度的一半*/
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
2.margin: auto;实现绝对定位元素的居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin:auto实现绝对定位元素的居中</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
3.CSS3.0弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中==弹性布局</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;/*定义body的元素垂直居中*/
justify-content: center;/*定义body的元素水平居中*/
}
.content{
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
4.vertical-align:middle;垂直方向居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vertical-align:middle;</title>
<style>
.big-box{
width: 500px;
height: 400px;
background: green;
text-align: center;
}
.box{
line-height: 400px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="big-box">
<span class="box">
<img src="ermao.jpg"/>
</span>
</div>
</body>
</html>
5.display:table实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display: table-cell;</title>
<style>
.parent{
width: 300px;
height: 300px;
background: orange;
text-align: center;
display: table;
}
.son{
display: table-cell;
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">nihaosssss</div>
</div>
</body>
</html>
6.相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现水平垂直居中==相对定位实现</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content{
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;/*水平居中*/
position: relative;/*设置position*/
top: 50%; /*偏移*/
/*margin-top: -150px;*/ /*第一种：margin-top*/
transform: translateY(-50%);/*第二种：transform：转换*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
四：Event Loop
Event Loop 是一个很重要的概念，指的是计算机系统的一种运行机制。
JavaScript语言就采用这种机制，来解决单线程运行带来的一些问题。
如果有很多任务需要执行，不外乎三种解决方法。
（1）排队。因为一个进程一次只能执行一个任务，只好等前面的任务执行完了，再执行后面的任务。
（2）新建进程。使用fork命令，为每个任务新建一个进程。
（3）新建线程。因为进程太耗费资源，所以如今的程序往往允许一个进程包含多个线程，由线程去完成任务。
五：操作系统：线程和进程的区别
这里再次小懵，前端突如其来的操作系统问题
概念：
1.进程：在操作系统中，能够独立运行，并且作为资源分配的基本单位。它表示运行中的程序。
2.线程：是进程中的一个实例，作为系统调度和分派的基本单位。是进程中的一段序列，能够完成进程中的一个功能。
两者的区别和联系
1.同一个进程可以包含多个线程，一个进程中至少包含一个线程，一个线程只能存在于一个进程中。
2.同一个进程下的所有线程能够共享该进程下的资源
3.进程结束后，该进程下的所有线程将销毁，而一个线程的结束不会影响同一进程下的其他线程
4.线程是轻量级的进程，它的创建和销毁所需要的时间比进程小得多，所有操作系统的执行功能都是通过创建线程去完成的
5.线程在执行时是同步和互斥的，因为他们共享同一个进程下的资源。
6.在操作系统中，进程是拥有系统资源的独立单元，它可以拥有自己的资源。一般而言，线程不能拥有自己的资源，但是它能够访问其隶属进程的资源
总结：
作为2021届的毕业生，很幸运，在找实习的过程中收获的第一份面试邀请是来自快手的。幸运中带着一丝不幸，幸运是能有与大厂大牛交流的机会，不幸是因为自己的技术不太扎实，回答的很紧张。在接下来的时间需要多刷刷面试题，学习过程中需要了解技术底层的东西。真正的大厂并不需要你对框架的了解有多少，他们更看重算法更看重思路，更看重你对JavaScript原生的理解。多了解了解理论，不能局限于应用级开发！
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
