【2020春招美团前端面试的尴尬】日常尴尬的菜鸡时刻，面试官辛苦了。。。

碎碎念

投了个前端岗，至于为啥，我……emmm，就随缘乱投的，也没好好想，因为觉得可能笔试就gg了，考完研以来一直在咸鱼，就想着锻炼一下自己，根本没有看算法，觉得肯定过不了笔试，结果收到了美团的面试电话，说次日面试。
我很珍惜每次面试锻炼自己的机会，于是预先网上搜了题，做了一百多个，但是，js和css不是一夜之间能速成的，另外一年前的开发项目，到现在确实也记不得多少了。。。所以就导致了异常尴尬的面试。
我也尴尬，面试官也尴尬。。

切入尴尬画面

1. 先问下自我介绍，

我已经自我介绍快30遍了，感觉介绍得快吐了，同时听到自我介绍就觉得扑面而来的尴尬。

2. 然后是css的题目：

1.绝对位置和固定位置：绝对定位基本是与父级元素进行偏移定位的。那么fixed固定定位按照描述应该就直接是基于body进行偏移定位的
参考网址：https://www.jianshu.com/p/234c14df8c52
可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
inherit 从父元素继承 position 属性的值。
2.如何实现垂直居中？有几种方式？
参考网址：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/
人家能想出五个方案，我就想了2个，还想的有问题。。无语
3.css animation是什么，举一些例子，实现？什么是屏幕刷新，为什么要解决这个问题？用什么控制刷新间隔？
参考网址：https://blog.csdn.net/u013243347/article/details/79976352
我其实不知道这个，做题遇到过,看文档的时候看到过canvas()，requestAnimationFrame，但是都不是css的而是js的，于是被面试官纠正了，不过他人太好了，完全没有不耐烦（已经感动到流泪了）
requestAnimationFrame可以实现更为经济、更加准确的控制动画，以往在web动画、app动画中，我们经常通过setInterval或setTimeout定时修改DOM、CSS实现动画，不过如此动画的方式极为耗费资源，经常是这样的结果，刚开始比较流畅，5分钟之后动画就卡住了，于是“大家”都看不下去了，开始想这种办法。
requestAnimationFrame的方式的优势如下：
1.经过浏览器优化，动画更流畅
2.窗口没激活时，动画将停止，省计算资源
3.更省电，尤其是对移动终端
4.如果要实现类似微信聊天的界面，发送按钮限制长度，然后聊天框不限制长度，要怎么做呢？flex中的1属性是什么？
参考网址：https://www.cnblogs.com/yiyistar/p/6537026.html
其实这个问题就在考应用了，送分题我也没答对，流泪。
我用flex布局比较多，flex有个flex-grow属性，如果设置全部都是为1，则按照同样的大小撑满整个布局。我知道这个，但是不知道这个叫啥。。。我就瞎说叫栏目，不过不是的，这个就是定义项目的放大的比例，默认为0不放大，即使空间有空余。也好、不会撑开，1就会撑满。按钮直接设置px就行。
5.微信小程序的单位是哪些？px和rpx单位区别？
1rpx=0.5px=1物理像素
rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。
所以在微信小程序中1rem=750/20rpx。
这个其实相当细节了。
参考网址：https://www.jianshu.com/p/f4c71a682016
6.div css float浮动用法(left right)
这个我完全不知道
参考网址：https://www.runoob.com/css/css-float.html
浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制

4. js的题目：

1.js的闭包？原型？继承？
我一问三不知，面试官说这些都是比较重要的核心内容，然而我确实不是很熟悉js，无论是析构还是一些=> $ this等 作用范围都不熟。
之后决定开一个系列博客看这个。
这里答案自己查吧。
2.js里slice,substr,substring的区别？
我开始胡诌……然后被面试官打断了。。。他们作用类似，但是有细小的区别： slice,substring,substr 都是用来截取字符串或数组的，然而数组只能使用slice，这三者如果不传参数，则都返回全部内容；参数为正数时，只有substring会自动调换顺序，slice在第一参数大于第二参数时会无效返回空，而substr无所谓，除非给定的第一参数超出了源数据长度才会返回空；参数为负数时，只有substring会永远无效，即不要给substring使用负值！slice可认为从尾部倒数，或者直接用源数据长度加上这个负值换算为正数，然后结论依然遵循第2条所述；而substr，则只适用第一参数为负数，换算方法同slice，其第二参数代表截取的个数，是不能为负数的；据w3cshool所提示 （链接： http://www.w3school.com.cn/jsref/jsref_substr.asp） ，“ECMAscript 没有substr方法进行标准化，因此反对使用它”。
参考网站：https://blog.csdn.net/qq_38047742/article/details/82144266
3.给了一个js代码，问返回结果，类似下面这个：

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var p = new Person();
console.log('p.a: '  p.a); // p.a: undefined
console.log('p.b: '  p.b); // p.b: b

然后问我什么依据，我完全不知道this的windows调用和对象调用，根本不懂。。然后就根据其他语言的规律猜了下，猜错了。。。尴天下之大尬
题目大概是：

const obj = {
    a: 'obj',
    foo: function() {
           console.log(this.a);
    }
}
obj.foo(); // 输出？ **应该是a**
const foo2 = obj.foo;
foo2(); // 输出？ **应该是undefined，因为是windows调用**

4.http相关的知识：

1.post和get的区别，
这个没答对主要的,回答了安全性相关的问题和不改变远程服务器的状态两个点。 1.Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。2.Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。”
知乎：https://www.zhihu.com/question/28586791
2.cookie是什么,有什么用，cookie可以上传吗？cookie和localstorage的区别?
用处就是追信息，http是无状态协议。
参考:https://www.jianshu.com/p/c352d4af4ed3
sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数
据，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie(<=4kb)要大很多。
2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

cookie的缺点主要集中于安全性和隐私保护
1.cookie可能被禁用。当用户非常注重隐私保护的时候，他会禁用cookie缓存
2.cookie可能会被删除，每个cookie都是硬盘上的一个文件，因此很容易被用户删除
3.cookie安全性不够高，cookie都是以纯文本形式记录在文件中，如果要保存用户名密码等信息的时候，最好事先经过加密处理

3.问了下了解什么前端框架，聊了下vue
问了vue的compute，答到了即时响应上。
还问了filter，不过完全不知道。

4.没问webpack和reactor那些了，
估计是觉得我已经瀑布汗很艰难了，就问了下我对他们的理解，但是我不知道，就跳过了。

5.写代码：

1.给一个数组，写出重复次数。
如：[1,2,2,3,3,4,4]
这个方法很多了，不赘述了，我写的简单的一种就是**散列到对应数组上，**例如[1，2，2，2]就表示1有1个，2，3，4分别有两个，如果增加就直接在数组对应位置做加法，当然，数组元素大小过于分散时就不要用这个了。
2.正则语言考察：
正则串匹配id=need的span括弧里的内容。

<span id="need">abczhdas汉字数字</span>
<span></span>

以前写的参考：
正则表达式
这个写过爬虫，有点印象，不过确实很久没做了，没写出来。
注意，下面是错误写法:

<span id="need">/w*/w</span>  
//里面含有文字和数字，不一定是\w字符类型，也可能有特殊符号
<span id="need">*</span>
//里面的*任意匹配，则会得到结果:
  <span id="need">abczhdas汉字数字</span>
<span></span>

正确写法：

<span id="need">(.*?)</span>
?	匹配前面的子表达式零次或一次
这样一来就不会重复匹配到下一个<span>的开头了。
匹配得到正确结果:
<span id="need">abczhdas汉字数字</span>
其中()表示捕获组，也就是获取了()里的内容作为输出结果。