快手：看见每一种生活（一面凉经）

技术2022-07-17 84

快手面试

快手：看见每一种生活（一面凉经）一：Javascript实现字符串反转二：穷举字符串的所有大小写组合三：前端实现水平垂直居中四：Event Loop五：操作系统：线程和进程的区别总结：

快手：看见每一种生活（一面凉经）

第一次面试，很幸运的遇见了快手

开局两道题，直接整懵

一：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原生的理解。多了解了解理论，不能局限于应用级开发！

Processed: 0.021, SQL: 9