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

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

获得面试机会

该从哪里讲起呢，就从看到那个公司的招聘信息讲起吧，当我还在江西老家的时候就打算年后来深圳找工作，所以我在来深圳之前就通过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;
}

总结

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

参考链接

• 深入理解CSS中的层叠上下文和层叠顺序
• Javascript：一个屌丝的逆袭
• javascript王国的一次旅行，一个没有类的世界怎么玩转面向对象？
• javascript王国之函数教主
• 怪异模式和标准模式
• HTTP常见状态码 200 301 302 404 500 - starof - 博客园

meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明： 【文章转载自meishadevs：一次有意义的前端面试总结】

上一篇：平时遇到的前端面试题

下一篇：常用的正则表达式