「译」一篇非常不错的前端面试文章

2024-06-03 10:32

本文主要是介绍「译」一篇非常不错的前端面试文章,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自实验楼

作者先后在twitter,Stripe工作,期间会参加面试工作。实际上参加面试工作的人都知道要想在一个较短的时间内(30min-1h)就对一个应聘者做出判断其实是很难的,因此我们不得不想尽办法去更加合理的去判断面试者。下面是作者理出的一个思路:

如果对方有github账号,我们会尽可能的去了解TA在开源项目上的动态和他的开源项目。我们也会从中挑出一些切入点,通过交流他做这个项目的出发点也能够更好的了解面试者的设计思路,也可以初步的去判断该人是不是适合团队。如果双方交流顺畅,接下来会直接进行到代码等一些基础问题上来。

自己的面试会很实际,几乎全部都是coding,很少会提到算法和一些抽象的概念。自己提出的问题看似简单,但是每一点都涉及到JavaScript的一些知识领域。

面试的时候并不建议使用白板,通常希望面试者自己带上自己的笔记本,或者就使用自己的。我会将他们的代码运行,并告知结果。

1.Object prototype 

我起初会提出一个非常简单的问题就是定义一个函数spacify ,将一个字符串作为参数传入,然后返回一个字符串,不过该字符串相对原有传入参数的变化是字母与字母之间多了一个空格。

spacify('hello world') // => 'h e l l o  w o r l d'  

虽然问题很简单,但这却是一个很好的开始,我们接下来的问题便可以围绕此展开, 尤其对于那些声称自己了解javascript,但实际却连一个函数都不会写的面试者高下立判。

正确的答案如下,不过一些面试者或许会选择for循环,当然这并没有错

function spacify(str) {  return str.split('').join(' ');
}

接下来,我会继续问如何将这个函数直接作用在一个字符串对象上.

'hello world'.spacify();  

这个问题可以让我了解面试者对原型链的理解,这个问题可以让彼此展开一些有讨论,诸如直接在原型链上定义属性的危害等等.实际期待结果:

String.prototype.spacify = function(){  return this.split('').join(' ');
};

一般到这里我会让面试者讲讲函数声明和函数表达式的区别。

2.Arguments

接下来,我会去了解面试者对于 arguments的理解,我们会要求面试者定一个log函数。

log('hello world');  

函数类似实现一个简单的控制台输出,在控制台输出传入的字符串。一边面试者都会在定义的函数里直接写console.log,不过还是有更优秀的面试者会直接使用apply。

function log(msg){  console.log(msg);
}

接下来,我会继续问如果我传入多个参数依旧输出一个字符串 ,我会提示面试者传入的 参数是不固定的,我会暗示作者console.log实际上也接受多个参数。

log('hello', 'world');  

不过我还是希望您的面试者现在已经想起apply;面试者可能会在apply和 call上困惑,这个时候我会做点小提示,不过将console上下文传入也是非常重要的.

function log(){  console.log.apply(console, arguments);
};

接着我会继续追问,如果我希望在那个输出的字符串前统一加上(app) 这样的字符串,类似于这样:

'(app) hello world'  

这个问题明显会复杂很多,面试者应该知道arguments是一个伪数组,我们需要先将它转换成正常的数组,我们可以使用Array.prototype.slice,代码如下:

function log(){  var args = Array.prototype.slice.call(arguments);args.unshift('(app)');  console.log.apply(console, args);
};

3.Context

接下来我想了解面试者对于上下文以及this的理解,我会给出下边的代码,让面试者去解释count的值。

var User = {  count: 1,getCount: function() { return this.count;}
};

接下来我会给出下面的代码,让面试者去回答应该输出的正确答案。

console.log(User.getCount());
var func = User.getCount;  
console.log(func());  

上面的例子中正确输出1和undefined。实际上很多面试者都会在这里跌倒。func的上下文是 `window,因此已经失去了count属性。接下来我回继续追问面试者如何确保func的上下文始终都和User关联,这样可以使输出的答案是1。

正确答案是使用Function.prototype.bind,代码如下:

var func = User.getCount.bind(User);  
console.log(func());  

这个时候我会让面试者去进行完善,如果老的浏览器并不支持该方法,我们应该怎样去兼容。部分基础较差的面试者会比较纠结,但是个人认为任何一位前端工程师都应该对apply和call有着较为深刻的理解。

Function.prototype.bind = Function.prototype.bind || function(context) {  var self = this;return function(){ return self.apply(context,   arguments);};
}

Extra points if the candidate shims bind so that it uses the browser's native version if available. At this point, if the candidate is doing really well, I'll ask them to implement currying arguments.


4.一个弹窗库

面试的最后y一部分,我会要求面试者写点实际的东西。这个非常有用,足以了解前端的技术栈。如果前面的问题回答的较为理想,这个问题,我会非常迅速的展开最后一个问题的考察。

虽然最终效果取决于面试者的实现,但是这里依旧有足够的考察点。

最好不使用 position:absolute而是position:fixed,这个时候即使窗体有滚动,也可以很好的遮罩住全局。我会提示面试者这样使用,并且追问这两者的区别。

.overlay {position: fixed;left: 0;right: 0;  bottom: 0;  top: 0;  background: rgba(0,0,0,.8);
}

如何将里面的内容居中也是一个非常重要的考察点。一些面试者会使用绝对定位,而有的面试者则更擅长使用js。

.overlay article {position: absolute;  left: 50%;  top: 50%;  margin: -200px 0 0 -200px;  width: 400px;  height: 400px;
}

我会继续问,如何确保点击遮罩层时遮罩层是关闭的?这个问题可以将我们的讨论落脚到 冒泡中来。很多面试者都会直接将点击实践绑定到遮罩层上。

$('.overlay').click(closeOverlay);

这个接下来可以工作了,但是你会发现如果点击了遮罩层中的子元素,遮罩层也会关闭。解决方案是便是判断event target ,并且保证 这个时间不会冒泡。

$('.overlay').click(function(e){if (e.target == e.currentTarget)closeOverlay();
});

6.尾声

当然前面的知识点仅仅是前端的一部分,实际上你还可以问:性能,HTML5 APIs, AMD vs CommonJS modules,constructors,数据类型,以及盒子模型。我经常都会随着面试者的进行去选择相应的问题。

最后推荐大家都可以去看下:

  • Front-end-Developer-Interview-Questions(https://github.com/h5bp/Front-end-Developer-Interview-Questions)

  •  JavaScript Garden.(http://bonsaiden.github.io/JavaScript-Garden/zh/)

转载自:jackpu.com

文章地址:http://www.jackpu.com/-pian-fei-chang-bu-cuo-de-qian-duan-mian-shi-wen-zhang/

英文原文:http://blog.sourcing.io/interview-questions


这篇关于「译」一篇非常不错的前端面试文章的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1026729

相关文章

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法: public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM

vue, 左右布局宽,可拖动改变

1:建立一个draggableMixin.js  混入的方式使用 2:代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

React+TS前台项目实战(十七)-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装,可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 (1)通过position属性,可以控制下拉选项的位置 (2)通过传入width属性, 可以自定义下拉选项的宽度 (3)通过传入classN

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页:

vue+el国际化-东抄西鉴组合拳

vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585 说得比较详细。 另外做点补充,比如这里cn下的可以以项目模块加公共模块来细分。 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = {mess

vue同页面多路由懒加载-及可能存在问题的解决方式

先上图,再解释 图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在

vue+elementUI下拉框联动显示

<el-row><el-col :span="12"><el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"><el-select v-model="detailForm.partyAccountId" filterable placeholder="

vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决

解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时,抬起并不会再触发。而keyup.enter事件是在抬起时触发。 so,找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的//js中allKeyup(e