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

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

获得面试机会

该从哪里讲起呢，就从看到那个公司的招聘信息讲起吧，当我还在江西老家的时候就打算年后来深圳找工作，所以我在来深圳之前就通过 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、不管是面试还是笔试不知道的就说不知道，不清楚的地方要多问

参考链接

• 深入理解 CSS 中的层叠上下文和层叠顺序
• Javascript：一个屌丝的逆袭
• javascript 王国的一次旅行，一个没有类的世界怎么玩转面向对象？
• javascript 王国之函数教主