一次有意义的前端面试总结

2018-03-22 11:58:17 +08:00
 meishadevs

我今天去参加了位于深圳某公司的前端开发工程师岗位的面试,这是我来深圳后参加的第二次面试,感觉这次面试经历比较有趣,也通过这次面试学到了很多东西,所以决定以博客的形式记录下来。

获得面试机会

该从哪里讲起呢,就从看到那个公司的招聘信息讲起吧,当我还在江西老家的时候就打算年后来深圳找工作,所以我在来深圳之前就通过 Boss 直聘和一些技术社区查找深圳的前端开发工程师的招聘信息,并投递了部分简历,在某个技术论坛上看到这个公司招聘前端工程师,我便通过 Email 投了一份简历过去,几天后对方回复了我一份邮件,大意是问我何时有空去面试,我当时还在江西老家,告知对方我要在正月十五才会去深圳后,对方很爽快的表示我到深圳后再告知对方,再安排其他时间面试,我到了深圳后发 Email 告诉对方我来深圳了,在元宵节假期结束后的的第一天上班时,对方发来了回复邮件,让 HR 为我安排面试时间,下午 HR 便打电话给我,通知我去面试,并通过 Email 将面试的时间和地址发给了我,感觉比 Boss 直聘上的通知方式要正式的多,在 Boss 直聘上如果对方通知你去面试直接就说你过来面试吧,还要自己再问对方,对方才会告知你面试的地址。

满是陷阱的笔试

乘地铁到高新园站出来后便来到了那个公司的所在地,一栋非常高端的写字楼,那个公司就在这个写字楼里,进入公司后便开始笔试,感觉笔试题都很基础,但是里面有很多陷阱,比如第一题要求写出 10 + '20' 的值,然后将计算的结果再加 '20',这题主要考察数字与字符串之间的运算,在 JavaScript 中字符串加上数字,首先需要将数字转换成字符串,然后再进行相加运算,相加的结果仍能是字符串,所以 10 + '20' = '1020',结果再加上'20'为 '1020' + '20' = '102020'。还有一题要求写出 add(4)(5)的实现函数,看到这题后我一脸懵逼,函数不都是只有一个括号吗,这里怎么出现了两个括号,面试结束后我通过在一个前端交流群里问了这个问题,这题考察的是函数柯里化,还有一题要求使用 ES6 的语法实现数组去重等,通过这次面试我也发现了我的很多知识盲区。

糟糕的自我介绍

笔试结束后 HR 拿着我的简历和做的笔试题指引我来到了一个会议室,当我在会议室坐下后不久,会议室里进来了一位女士,她就是我今天面试的面试官,互相打了个招呼后,她首先让我做自我介绍,然后我便说道我叫 xxx,今年 xx 岁,来自江西,有一年工作经验,过来是应聘前端开发工程师职位,我说完后她让我再介绍一下之前的工作经历和做过的项目,我因为提前没准备好,说的吞吞吐吐,这次我学到了做自我介绍时要简要的介绍一下个人信息、工作经历和之前做过的项目

有意义的面试

自我介绍完成后她便拿着我的简历问我问题。
面试官:你知道盒模型吗?
我:盒模型是由 margin、border、padding、width 巴拉巴拉一大堆。
面试官:我是问你标准盒模型和怪异模型你了解吗?
我:标准盒模型 width=padding+border+(当时太紧张了,不知道如何回答了)。
面试官:你知道 JavaScript 中的事件绑定方式吗?
我:onclick。
面试官:onclick 不能算是事件绑定的方式。
我:addEventListener。
面试官:还有吗?
我:我知道的就这么多。
面试官:知道 rem 和 em 吗,他们两个有什么区别?
我:rem 表示的是相对于网页的根节点然后巴拉巴拉一大堆。
面试官:知道原型吗?
我:知道,在 JavaScript 中的继承就是通过原型实现的。
面试官:那你说说 JavaScript 中实现继承的方式有哪些?
我:巴拉巴拉一大堆。
面试官:知道数据的存储方式吗?
我:localStorage、seesionStorage、Cookie。
面试官:localStorage 和 sessionStorage 之间有什么区别?
我:localStorage 可以实现数据的永久保存,sessionStorage 存放的数据,当浏览器关闭后会自动丢失。
面试官: 知道元素层叠吗?
我:一脸懵逼,后来不知怎么回事就想起来了,我顺便问了一句是指两个元素,一个在上面一个在下面,两个元素的距离为那个 margin 值大的那个元素的 margin 值吗?
面试官:如何解决这个问题?
我:能用 padding 就尽量不要用 margin。
面试官:知道 call 和 apply 吗?
我:你能不能在纸上写一下(当时没听懂),两个都可以让对象调用函数,其中 apply 中的第一个参数为调用函数的对象,第二个参数为函数传递的数据,其中 apply 传递数据是数组,call 巴拉巴拉。
面试官:知道跨域吗?
我:知道。
面试官:如何解决跨域问题?
我:使用 JSONP 和在服务器端设置 CORS。
面试官:看你简历中还提到了你会组件化开发,那你介绍一下你的项目中哪里设使用了组件化开发?
我:header 组件用于头部、footer 组件用于脚部、banner 组件用于轮播图。
面试官:介绍一个组件,并说一个如何设计它的外部接口?
我:那就介绍 banner 组件吧。
面试官:好。
我:banner 组件可以设计一个 JSON 数组,数组中的对象可以设计 url 属性表示点击图片后跳转的链接,image 属性表示图片的地址巴拉巴拉。。。
面试官:好了你回去等通知吧。

最后附上我能想起来的笔试题和面试题

1、10 + '20' = ? 再加 '20' 呢?

10 + '20' = '1020' 
'1020' + '20' = '102020'

2、请写出 Ajax 请求中用到的函数

var xhr = new XMLHttpRequest();
xhr.open('GET/POST', 'http://localhost:8080?username=meishadevs', true);
xhr.onreadystatechange = function() {};
xhr.send();

3、使用正则表达式提取出 url 值为 https://map.baidu.com/x/y/z 中的 map.baidu.com

/https:\/\/([^\/]+)/.exec('https://map.baidu.com/x/y/z')[1]
'https://map.baidu.com/x/y/z'.match(/https:\/\/([^\/]+)/)[1]

执行结果

4、使用 ES6 的方法实现数组去重

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
let arr = Array.from(set);

5、设计一个函数实现 add(3)(4)

function add(a) {
	return function(b) {
		return a + b;
    }
}

add(3)(4)

ES6 的写法

add = a => b => a + b
add(3)(4)

对 ES6 写法做一个变形

add = a => (b => a + b)

再变

add = function (a) {
	return (b => a + b)
}

再变

add = function (a) {
	return function (b) {
		return a + b;
	}
}

6、使用 Ajax 实现一个表单提交功能,并跳转到提交的地址,(可以使用 jQuery 或 Zepto

7、在完成第 6 题后使用 Promise 再实现一遍

8、JavaScript 中的基本数据类型

Number、String、Boolean、Null、Undefined

9、一道响应式布局的题目

10、call、apply 的作用与区别
call 和 apply 都是为了改变函数体内部 this 的指向,它们的第一个参数都是调用函数的对象,call 方法接收由若干个参数组成的参数列表,apply 方法接收的是一个包含多个参数的数组

例如使用call获取一组数字中的最大值

Math.max.call(null, 1, 3, 5, 8, 2)

例如使用apply获取一组数字中的最大值

Math.max.apply(null, [1, 3, 5, 8, 2])

11、标准盒模型和怪异盒模型的区别
标准盒模型的 box-sizing 属性的值为 content-box
怪异盒模型的 box-sizing 属性的值为 border-box
标准盒模型中 width = 内容的宽度
怪异盒模型中 width = 内容的宽度 + padding + border

12、em 与 rem 的区别
rem 表示根节点(html 标签)的字体大小的倍数
当 em 作为 font-size 的单位时,表示相对于父元素的 font-size 值的倍数
当 em 作为其他属性单位时,代表自身字体大小的倍数

13、localStorage 与 sessionStorage 的区别
使用 localStorage 保存的数据,除非手动清除,否则会永久保存
使用 sessionStorage 保存的数据仅在当前会话下有效,关闭页面或浏览器后会被清除

14、元素层叠
参考张鑫旭大神的文章:深入理解 CSS 中的层叠上下文和层叠顺序

15、使用原型现继承

使用 __proto__ 实现继承

//创建 animal 对象
var animal = {
    name: "animal",
    
    eat: function () {
        console.log(this.name + " is eating");
    }
};

//创建 dog 对象
var dog = {
    name: "dog",

    //指向 animal 对象( dog 继承自 animal )
    __proto__: animal
};

//创建 cat 对象
var cat = {
    name: "cat",

    //指向 animal 对象(cat 继承自 animal)
    __proto__: animal
};

dog.eat();
cat.eat();

使用 prototype 实现继承

//创建 animal 对象
var animal = {
    name: "animal",

    eat: function () {
        console.log(this.name + " is eating");
    }
};

//创建构造函数 Dog
function Dog() {
    this.name = "dog";
}

//创建构造函数 Cat
function Cat() {
    this.name = "cat";
}

//设置 Dog 的原型为 animal(Dog 继承自 animal)
Dog.prototype = animal;

//设置 Cat 的原型为 animal(Cat 继承自 animal)
Cat.prototype = animal;

//创建 dog 对象
var dog = new Dog();

//创建 cat 对象
var cat = new Cat();

dog.eat();
cat.eat();

16、JavaScript 中事件绑定的方式

button.onclick = function() {}

button.addEventListener("click", function () {});

17、设计一个函数实现判断一个数据的数据类型是不是数组

function isArray(num) {
	return num instanceof Array;
}

总结

1、自我介绍没准备好,只介绍了我的个人信息,没有介绍工作经历和做过的项目,说话吞吞吐吐, 2、笔试和面试的问题大部分都是前端开发中的基础知识,只有少部分 ES6 和 jQuery 的内容,可见我前端基础掌握的不够好
3、没有提前计划好,导致块要超过约定的时间时才到面试地点 4、不管是面试还是笔试不知道的就说不知道,不清楚的地方要多问

参考链接

10231 次点击
所在节点    职场话题
39 条回复
8qwe24657913
2018-03-22 14:49:04 +08:00
meishadevs
2018-03-22 14:52:06 +08:00
@8qwe24657913 谢谢,学习中
attackonFourier
2018-03-22 15:15:28 +08:00
@8qwe24657913 你给 mdn 代码里有一句话
var shape = {};

// Set the object prototype.
// DEPRECATED. This is for example purposes only. DO NOT DO THIS in real code.
shape.__proto__ = circle;
g1165297373
2018-03-22 15:29:43 +08:00
@noe132 1-2 年的前端开发,这些是很好的面试题的,上来就是 react,vue 的,很多人这些并不一定答得上来
8qwe24657913
2018-03-22 15:39:17 +08:00
@attackonFourier 你那是因为动态修改[[Prototype]]会破坏优化(见最上面的 warning),像楼主一样在对象字面量里用是可以的 The __proto__ property can also be used in an object literal definition to set the object [[Prototype]] on creation, as an alternative to Object.create().
conanskyforce
2018-03-22 16:07:01 +08:00
我去,咋感觉像 3 年前的前端面试,不过楼主还是挺用心
simple11
2018-03-22 16:33:43 +08:00
赞排版 看完了
callmexiaobo
2018-03-22 18:35:00 +08:00
排版不错,看的很舒服,同为江西老表赞一个
sepld
2018-03-22 19:29:14 +08:00
新手虽然不怎么懂前端,但是看的很认真
LeungJZ
2018-03-22 19:29:52 +08:00
你不会是带了个录音笔去面试吧,记得这么清楚。
luohuanlhh
2018-03-23 01:45:35 +08:00
mark
dongliangnerd
2018-03-23 09:51:09 +08:00
@codermagefox 如果一年不是划水过来的,这个确实太简单了
codermagefox
2018-03-23 10:31:01 +08:00
@dongliangnerd #32 我一年,全都能做出来,但是我还是觉得这种程度就差不多了....一年你还真让人面试造火箭啊,我面试的时候就被问过一些很难的,人家开的薪资水平也相对的高很多,就一般来说这种难度差不多了。
dongliangnerd
2018-03-23 22:21:35 +08:00
@codermagefox 这个要求还是要看个人,自己怎么舒服怎么来呗。我还是想对自己以及以后一起长时间伙伴稍微提高一点标准,不管是从个人发展还是交流的舒适度和不加班的效率追求
TimCheng
2018-03-26 16:46:40 +08:00
我想邀请你来来掘金参加秋招求职面试征文活动,你感兴趣的话加我微信:cx923373725 活动链接👉🏼 https://juejin.im/post/5aaf2a95f265da239b413aa1
kaisinx
2018-04-26 10:28:16 +08:00
hey,是你啊!工作怎么样了?
meishadevs
2018-04-26 22:16:22 +08:00
@kaisinx 找到工作了
tianyao123
2019-03-25 17:43:00 +08:00
很基础的题目啊
aaronlam
2020-09-15 14:04:50 +08:00
使用 prototype 实现继承里的 Cat/Dog.prototype.constructor 要修改回对应的构造器把?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/440370

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX