从面试官角度看一次前端面试经历

卡尔 等级 429 0 0

今天被抓差给候选者进行初面。在这里记录一下面试中涉及的几个知识点。

每次面试我都会递给候选者一瓶水,这样可以让候选者没那么紧张,有更好的状态进行面试,毕竟面试是双向选择,公司也需要尽快找到合适的人,没那么多网上说的心理战。

这里我还想吐槽一下面试造火箭工作拧螺丝,尤其是开发行业,很多面试官针对自己擅长的方向大问特问,完全忽略了候选人的优势,从而给候选人带来一个极差的面试体验。面试最好还是要通过候选人身上的优点来判断对方是否适合加入你的团队。

正常的面试应该是按照候选人简历中涉及的技术点发问,不然面试时给你一份简历干嘛,至于简历中未涉及的知识点有没有必要问,我觉得没什么必要的,因为很多人在写简历的时候都是力求全面,恨不得听说过的知识点都写上熟悉。所以按照简历提问就可以了。除此之外再问一些最近流行的技术,主要考察的是候选人对新技术的敏感性和对新事物的接受能力。

如果其中涉及到候选人回答不上的问题也需要给候选人做一番解答,毕竟人家那么远来你这面试,总要有所收获不是。

最后在简历中挑选一个候选人比较擅长的点深入来问,这个环节我一般称为定级,前面的问题如果回答的不错,这个人基本就通过了,到最后就要给人定级。如果前面问题回答的不理想基本也到不了这个环节。

Proxy

在2020年来看Proxy早已经不是一个陌生的词了,他能做的是有很多,尤其在Vue3.0通过Proxy来重构之后,很多面试官喜欢问这个Proxy以及和Object.defineProperty的对比。

Proxy是专门为对象设置访问代理器的,通过Proxy可以轻松监视到对象的读写过程,相比于defineProperty,Proxy他的功能要更为强大甚至使用起来也更为方便。

这里我们定义一个person对象,我们通过new Proxy的方式来去为我们的person来创建一个代理对象。

Proxy构造函数的第一个参数就是我们需要代理的对象,这里是person,第二个参数也是一个对象,我们可以把这个对象称之为代理的处理对象,这个对象中可以通过get方法来去监视属性的访问,通过set方法来去介绍对象当中设置属性这样的一个过程。

const person = {
    name: 'yd',
    age: 18
}

const personProxy = new Proxy(person, {
    get() {},
    set() {}
}) 

先来看get方法,这个方法最简单可以接收两个参数,第一个就是所代理的目标对象,第二个就是外部所访问的这个属性的属性名。这个方法的返回值将会作为外部去访问这个属性得到的结果。

{
    get(target, property) {
        console.log(target, property);
        return property in target ? target[property] : undefined;
    }
} 

再来看下set方法,这个方法默认接收三个参数, 分别是代理目标对象,以及我们要写入的属性名称还有最后我们要写入的属性值。 我们可以做一些校验,比如说如果设置的是age,他的值就必须是整数,否则就抛错。

{
    set(target, property, value) {
        console.log(target, property, value);
        if (property === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError(``${value} must be a integer);
            }
        }
        target[property] = value;
    }
} 

相比于Object.defineProperty, Proxy到底有哪些优势。

首先最明显的优势就是在于Proxy要更为强大一些,那这个强大具体体现在Object.defineProperty只能监听到对象属性的读取或者是写入,而Proxy除读写外还可以监听对象中属性的删除,对对象当中方法的调用等等。

第二点优势就是对于数组对象进行监视,通常我们想要监视数组的变化,基本要依靠重写数组方法,这也是Vue的实现方式,proxy可以直接监视数组的变化。以往我们想要通过Object.defineProperty去监视数组的操作最常见的方式是重写数组的操作方法,这也是Vue.js中所使用的方式,大体的方式就是通过自定义的方法去覆盖掉数组原型对象上的push,shift之类的方法,以此来劫持对应的方法调用的过程。

对象的键支持什么类型

这个问题考察的是候选人的基础知识是否扎实。

很多人都会认为对象的键是字符串类型,如果在以前确实没错,但是ES2015版本中对象的键类型还可以是Symbol。

const person = {
       name: 'yd',
    [Symbol()]: 18
} 

这也是引出下面的Symbol。

Symbol

在ECMAScript2015之前,对象的属性名都是字符串,而字符串是有可能会重复的。如果重复的话就会产生冲突。

以前解决这种问题最好的方式就是约定,但是约定的方式只是规避了问题并不是彻底解决了这个问题。如果在这个过程中有人不遵守约定那这个问题仍然会存在。

ES2015为了解决这个问题提供了一种全新的原始数据类型Symbol,翻译过来的意思叫做符号,翻译过来就是表示一个独一无二的值。 通过Symbol函数就可以创建一个Symbol类型的数据,而且这种类型的数据typeof的结果就是symbol,那这也就表示他确实是一个全新的类型。

const s = Symbol();
typeof s; // symbol类型 

这种类型最大的特点就是独一无二,也就是说我们通过Symbol函数创建的每一个值都是唯一的。他永远不会重复。

Symbol() === Symbol(); // false 

考虑到在开发过程中的调试Symbol创建时允许接收一个字符串,作为这个值的描述文本, 对于我们多次使用Symbol时就可以区分出是哪一个Symbol,但这个参数也仅是描述作用,相同的描述字段生成的值仍是不同的。

const s1 = Symbol('foo');
const s2 = Symbol('foo');

s1 === s2; // false 

从ES2015开始,对象就已经允许使用Symbol作为属性名。那也就是说现在对象的属性名可以是两种类型,字符串和Symbol。

const person = {
    [Symbol()]: 123,
    [Symbol()]: 456
} 

如果我们需要在全局去复用一个相同的Symbol值,我们可以使用全局变量的方式去实现,或者是使用Symbol类型提供的一个静态方法去实现。具体就是Symbol的静态方法for,这个方法接收一个字符串作为参数,相同的参数一定对应相同的值。

const s1 = Symbol.for('foo');
const s2 = Symbol.for('foo');

s1 === s2; // true 

这个方法维护了一个全局的注册表,为字符串和Symbol提供了一个对应关系。需要注意的是,在内部维护的是字符串和Symbol的关系,那也就是说如参数不是字符串,会转换为字符串。

const s1 = Symbol.for('true');
const s2 = Symbol.for(true);

s1 === s2; // true 

JSONP

很多人对jsonp的理解都停留在概念上,没有真正理解过他的原理,他为什么可以跨域,当然不仅仅是script标签不受同源策略影响,实际上jsonp是一种前后端约定的解决方案。

不过现在基本已经很少用到了。因为现在已经有了更流行的CORS方案,相对来说也会更安全,不过jsonp还是有其自身的优势的。

很多人都知道浏览器的同源策略,就是发送请求的页面地址和被请求的接口地址的域名,协议,端口三者必须一致,否则浏览器就会拦截这种请求。浏览器拦截的意思不是说请求发布出去,请求还是可以正常触达服务器的,如果服务器正常返回了浏览器也会接收的到,只是不会交给我们所在的页面。这一点查看network是可以看到的。

jsonp一般是利用script标签的src属性,对于服务器来说只有请求和响应两种操作,请求来了就会响应,无论响应的是什么。请求的类型实在太多了。

浏览器输入一个url是一个请求,ajax调用一个接口也是一个请求,img和script的src也是请求。这些地址都会触达服务器。那为什么jsonp一般会选用script标签呢,首先大家都知道script加载的js是没有跨域限制的,因为加载的是一个脚本,不是一个ajax请求。 你可以理解为浏览器限制的是XMLHttpRequest这个对象,而script是不使用这个对象的。

仅仅没有限制还不够,还有一个更重要的点因为script是执行js脚本的标签,他所请求到的内容会直接当做js来执行。

这也可以看出,jsonp和ajax对返回参数的要求是不同的,jsonp需要服务返回一段js脚本,ajax需要返回的是数据。

因此这就要求服务器单独来处理jsonp这中请求,一般服务器接口会把响应的数据通过函数调用的方式返回,比如说返回的内容是'yd',那就要返回成cb('yd')

cb('yd') 

这是一段函数调用的脚本,通过script标签加载之后会立即执行的,如果我们在全局定义一个cb函数。那么这段脚本执行的时候就会调用到我们定义的那个函数,函数中的参数就是服务返回的值了。前端也就可以在这个函数中获取到了。

function cb (data) {
    console.log(data);
} 

所以说jsonp是前后端共同约定的一种结果。

CORS

浏览器通过同源策略来限制前后端的跨域问题,但同时也给了相应的解决方案。

服务器在返回相应的时候可以通过设置响应头来允许哪些网址跨域请求,这样前端就可以成功拿到响应的结果了。所以这也证实了,前端拿不到结果不是服务器不返回,而是浏览器没有给到前端。

Access-Control-Allow-Origin: www.xxxx.com 

webpack的proxy是如何解决跨域的?

前面说了,跨域是因为浏览器的同源策略限制,问题发生在浏览器身上,那我们是不是可以避过浏览器呢,前面我写过一篇前端应该知道的nginx,里面介绍了反向代理和负载均衡,其实这就像是反向代理一样。

我们在使用webpack开发项目的时候,webpack的dev-server模块会启动一个服务器,这个服务器不止帮我们做了自动更新,同时也可以做到反向代理。

就是我们把请求发送给webpack-dev-server, 然后webpack-dev-server再去请求后端服务器,服务之间的请求是没有跨域问题的,只要后端返回了webpack-dev-server就能拿到,然后再返回给前端。

好了基本上就问了这几个问题,老板说面试时间控制在20分钟左右。

面试技巧

最后总结一些面试技巧提供给大家。2021-2-21【新增】

简历要简洁明了,突出个人技能和项目经验,一般简历写个两页纸就可以了,太多也没人看,太少单薄,我一般面试的时候就只看前两页。

简历中个人技能要写在前面,项目经验写在后面,不要弄反了,项目经验中要描述清楚技术栈。个人介绍,工作经历,教育经历简单就好。

如果个人博客和开源作品质量都不错,可以写在简历中,如果没有或者质量一般最后不要放。

简历要保证能力的真实性,不要造价,水份不要过大,切忌不要写精通,也没几个人能真的做到精通。

如何看待加班?这个还是要看个人,我一般是不推荐加班的,就像借钱,救急不救穷,要说明白怎么看待加班,什么样的加班接受什么样的加班不接受。项目特别急并且价值特别大加加班也是没什么的,常态的加班肯定是不可取的。长时间的加班带来的结果必定的虚假繁荣,生产力的低下。

面试中最好不要挑战面试官,如果面试官说的不对可以低调的或者委婉的转变一下说辞,离开也可以不要和面试官争辩,即使你不想要这份工作。

要给面试官惊喜,证明你可以做的更好知道的更多,一个问题如果你能回答及格就要考虑怎么回答到优秀,但是要做到更好不是更多,别说太多废话,也不要说起没完。比如说这个问题还有一个更好的解决办法等等。

遇到不会的问题说出你知道的部分即可,但别岔开话题,给人心虚的感觉,而且面试的过程中你也基本很难岔开话题,这会让面试官很反感。

对于自己的缺点可以换一种话术,委婉一些的表述,人都有缺点这没什么,你可以说你知道自己哪部分知识薄弱最近也正在学习,这样就化缺点为优点了。


欢迎关注,更多内容持续更新

本文转自 https://juejin.cn/post/6907146147065856013,如有侵权,请联系删除。

收藏
评论区

相关推荐

swift学习笔记-OC与swift区别,从OC到swift你可以看看这个
创建对象 OC:alloc initWith Swift:(XXX:) 调用方法 OC:uicolor redcolor Swift:uicolor.redcolor() 枚举 OC:UIButtonTypeContactAdd Swift:UIButtonType.ContactAdd 输出 OC:NSLog(@"Hello
面试官:Mysql 中主库跑太快,从库追不上怎么整?
写这篇文章是因为之前有一次删库操作,需要进行批量删除数据,当时没有控制好删除速度,导致产生了主从延迟,出现了一点小事故。 今天我们就来看看为什么会产生主从延迟以及主从延迟如何处理等相关问题。 坐好了,准备发车! (https://imghelloworld.osscnbeijing.aliyuncs.com/4ed72bf8b1fc67
从中断机制看 React Fiber 技术
带你了解计算机的中断机制(操作系统心脏)是如何提在 React Fiber 中应用及提高了页面渲染性能和用户体验。 前言 React 16 开始,采用了 Fiber 机制替代了原有的同步渲染 VDOM 的方案,提高了页面渲染性能和用户体验。Fiber 究竟是什么,网上也有很多优秀的技术揭秘文章,本篇主要想从计算机的中断机制来聊聊 React Fiber 技术
天猫双11数据过于完美?我们用python来看看
↑关注置顶 有趣的不像个技术号 是否真的完美? 双11结束了,大家已经无手可剁 。 天猫官方公布了今年的双11成交额为2684亿元,成
拼多多是怎么一步步把人逼死的
我翻开拼多多的公司规章制度,歪歪斜斜的每页上都写着“努力奋斗”四个字。 仔细看了半夜,才从字缝里看出字来,满本都写着“吃人”二字。 (https://imghelloworld.osscnbeijing.aliyuncs.com/56ea589ef85d1b42786d1c02d91269a2.jpeg) 一波接一波的事件 拼多
mac端口被占用问题
目录1. 查找被占用的端口2. 干掉占用的服务或应用正文本文主要介绍一下mac系统,端口被占用的一般处理方法。 1. 查找被占用的端口本次遇到的是8081端口被占用了,系统一直提示端口被占用,于是用如下命令查看: lsof i:8081这个命令感觉比docker(linux)要简要一些,如果需要查看docker端口占用的处理方法,可以点击参考链接。
MySQL 8 复制(二)——半同步复制
目录 一、简介 直到目前的最新版本为止,MySQL缺省依然使用异步复制策略。简单说所谓异步复制,指的是主库写二进制日志、从库的I/O线程读主库的二进制日志写本地中继日志、从库的SQL线程重放中继日志,这三步操作都是异步进行的。如此选择的主要理由是出于性能考虑,与同步复制相比,异步复制显然更快,同时能承载更高的吞吐量。但异
从面试官角度看一次前端面试经历
今天被抓差给候选者进行初面。在这里记录一下面试中涉及的几个知识点。每次面试我都会递给候选者一瓶水,这样可以让候选者没那么紧张,有更好的状态进行面试,毕竟面试是双向选择,公司也需要尽快找到合适的人,没那么多网上说的心理战。这里我还想吐槽一下面试造火箭工作拧螺丝,尤其是开发行业,很多面试官针对自己擅长的方向大问特问,完全忽略了候选人的优势,从而给候选人带来一个极
OkHttp 源码分析 - Okhttp同步请求、异步请求过程
RxJava源码的基础部分分析的差不多,后续如果有新的内容话,会继续的补充。从今天开始,我们来看看OkHttp的相关源码。OkHttp的源码过于复杂,涉及到的方面非常的多,本系列文章目的是打通Okhttp的整个执行流程,不对某一个细节重点分析。   本篇文章是本系列文章的第一篇,我们先从最简单的Okhttp使用入手,进而分析Okhttp两种请求方式的流程。
PaaS失败了吗?让我们看看Cloud Foundry的优势
软件团队常见的行为方式可以总结如下:1. 软件部署从Heroku或Firebase开始。2. 在应用程序需要快速扩展时,开始使用Docker进行容器化。3. 在遇到Docker困境的时候,考虑使用Kubernetes等容器编排工具。(https://cdn.thenewstack.io/media/2020/12/5105a24aimage011.
八佰:用Python看看知乎 vs 豆瓣的战斗
作者:朱小五来源:凹凸数据 hi,大家好,我是小五真的是好久好久没去电影院了,上周去看了《八佰》。作为今年疫情以来上映的第一部国产电影,看完之后觉得大体还可以,中规中矩的国产战争片。摄影、调度应该算得上是国内一流,可惜后面剧情太拉胯了,要我评价的话会打个7.5分。自己打完分,又习惯性去看看别人的评价。结果发现了一个非常有意思的事情:精英大本营与文艺小青年的
天猫双11数据过于完美?我们用python来看看
↑关注+置顶 有趣的不像个技术号 是否真的完美? 双11结束了,大家已经无手可剁 。 天猫官方公布了今年的双11成交额为2684亿元,成功刷新了自己创下的商业纪录。按理说大家已经习惯了逐年增长,没想到 由于过于完美,引发网友提出质疑。 滑动图片浏览 or 点击查看大图▼ 该微博在天猫公布2019年销售额后,引发大量讨论,成功登上热搜。 一
ES11来了,不进来看看嘛
前言ES2020 (ES11)是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。本文以简单的代码示例来介绍 ES2020新特性。这样,你可以很快理解这些新功能,而不需要多么复杂的解释,好了,废话不多说我们进入正文🔛 私有变量类的主要作用之一是将我们的代码包含在可重用的
python的学习难?你的方法不对罢了,看看我的。
1、选择Python版本对于使用python的人来说,python的版本就是我们的工作环境,因此,在学习之前需要考虑好学习哪个版本,python2和python3的版本不同,会存在一些差异,虽说不大,但直接学习python3 的话相对来说会好一点,而且跑一趟还能3相对来说对零基础的小白来说更加的友好,容易上手。2、学习Python基础知识Python 是一个
一篇文带你彻底解决mysql的主从复制延迟问题
前言​ 在之前我们已经讲解了一主一从,双主双从的mysql集群搭建,在单机应用的时候看起来没有问题,但是在企业的生产环境中,在很多情况下都会有复制延迟的问题。所以我来了!!!​ 主从复制的原理我们在此处就不再赘述了,之前已经讲过了,这是一个老生常谈的问题,原理性质的也几乎在面试中问烂了,这些原理性质的东西并不是很难,但是你需要注意了,主从复制的延迟问题会成为