美团一面电话面试（web前端开发工程师）

人生中的第一次面试，就是来自美团的，怀着万分紧张的心情，今天上午十点钟，接了美团一面面试官的电话，面试官人挺好的，挺有耐心，恩，我自己也不是很紧张，问啥说啥，不会的问题就直接说不知道，我问的问题他也都给我讲了。
首先，面试官上来就问了我简历上写的关于计算机设计大赛的项目，做的是什么，我就简单的跟他讲了讲。
然后他给我发了一个图片，让我根据他发的要求写出代码,

要求如下：

使用 ajax 提交表单，直接使用假想的 doSomething() 方法（包含发送 ajax 和获取表单输入的逻辑）

点击复选框文字就能选中/反选复选框

在文本框回车会能提交表单

不用考虑表单校验

然后他让我进入一个网站，是可以两人同时在线查看代码的编程房间，我在那个网站写代码他也能看得到，我问他可不可以用我自己电脑的IDE写程序，他同意了，我就在我电脑上的PHPStorm里面写好后粘贴到那个网站上给他看。他觉得哪里不满足要求，我就继续改，大概改了三四次左右，就都差不多了，以下是我的最终代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.user_info{float: right;}</style>
</head>
<body>
<script>function doSomething() {//TODO}
</script>
<form action="" method="post"><table><tr><td class="user_info"> 名字：</td><td colspan="4"><input type="text" required></td></tr><tr><td class="user_info">您的爱好：</td><td><input type="checkbox" id="Vue" value="Vue" name="Vue"><label for="Vue">Vue</label></td><td><input type="checkbox" id="PHP" value="PHP" name="PHP"><label for="PHP">PHP</label></td><td><input type="checkbox" id="Docker" value="Docker" name="Docker"><label for="Docker">Docker</label></td><td><input type="checkbox" id="Jenkins" value="Jenkins" name="Jenkins"><label for="Jenkins">Jenkins</label></td></tr><tr><td colspan="5"><button type="submit" onclick="doSomething()">提交</button></td></tr></table>
</form>
</body>
</html>

写完这些后，时间大概过去了30多分钟，这时他就接着问我别的问题了。先问我html中id和class的区别，我就说id是唯一的，他问还有什么别的区别，我就不知道了，然后又问我css中id和class的区别，我就说了和html不是一样的么。。。他又问那你还知道两者之间别的区别吗，我说不知道。现在想想css中id和class中的区别应该指表现形式不同，id是以#开头，class是以.开头。

之后下一个问题，是问我跨域的问题，我就直接说我不知道了，因为我确实不知道啥是跨域。结束后去搜了一下：

什么是跨域:
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

接下来面试官就问了我一些JavaScript方面的问题了，
第一个问题是：
a.b()
(a.b)()
这两者有什么区别。我说第一个中b是对象a的一个函数属性。第二个没说出来。面试官说两者是一样的。

第二个问题是：JavaScript中哪些是传值哪些是传址。我说我不知道。事后百度了一下：

JS 传值传址
在JS中，有两种不同的方式可以操作数据的值，这两种技术分别叫做传值和传址。
传值：在赋值过程中，首先对值进行了一份拷贝，而后将这份拷贝存储到一个变量、对象属性或数组元素中。拷贝的值和原始的值是完全独立、互不影响的。当一份数据通过值传递给一个函数，实际上被传递的不是数据本身，而是数据的一份拷贝。因此，如果函数修改了这个值，影响到的只是数据的那份拷贝，而并不影响数据本身。
传址：在赋值过程中，变量实际上存储的是数据的地址（对数据的引用），而不是原始数据或者是数据的拷贝。如果值通过一个地址发生了改变，这个改变也会通过原始地址表现出来。
根据操作数据方式的不同，我们可以把数据类型分为两类：基础类型和引用类型。
基础类型主要有：数字(Number)、布尔类型(Boolean)、字符串(String);其操作方式为传值。
引用类型主要有：对象(Object) —— 数组(Array)、函数(Function);其操作方式为传址。

其实现在想想这个问题答不上来挺亏的，因为js的传址和传值和java中基本上是一样的，基本类型是传值，引用类型是传址，如果换成提问Java我一定能答得上来，但换成js居然就想不起来了，归根到底还是因为自己对js的不熟悉、不了解。

第三个问题：
使用 JavaScript，使一个列表发生如下转变：

var original = [{id: 0, name: 'root', parent: null},{id: 1, name: 'foo', parent: 4},{id: 2, name: 'bar', parent: 0},{id: 3, name: 'tom', parent: 2},{id: 4, name: 'jerry', parent: 0},{id: 5, name: 'dust', parent: null}
// , ...
]

var transformed = [{id: 0, name: 'root', parent: null, children: [{id: 2, name: 'bar', parent: 0, children: [{id: 3, name: 'tom', parent: 2, children: []}]},{id: 4, name: 'jerry', parent: 0, children: [{id: 1, name: 'foo', parent: 4, children: []}]}]},{id: 5, name: 'dust', parent: null, children: []}
]

对于这个问题，看一眼就觉得好麻烦啊，我就胡乱说了一堆，说再用一个辅助数组，循环遍历原数组，查找出每一个元素id对应的parent，存起来，，，。好吧，我自己说的都感觉不对，面试官貌似也没说什么，就又发来了下一个问题，让我解释一下下面代码的作用：

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {setTimeout(function() {window.alert('The index of this number is: ' + i);}, 3000);
}

我一看到这个代码就感觉挺简单的，我就说了这个代码是每隔3秒中网页弹出一个字符串加一个数字，共弹了四次。面试官又问我依次是什么数字，我说是0,1,2,3。我感觉这个题我应该是答对了。

之后就问了一些Linux的问题，问我了不了解Linux命令，平时有没有用过，我说我的电脑就是Ubuntu的，所以平时经常用。然后他又问我是什么时候开始用Ubuntu的，我说是今年上半年，大概用了好几个月了。然后又问我平时经常用到哪些命令，我说有更新、安装软件，还有查询修改删除，还有修改文件的权限chmod等。他问我知不知道文件权限是什么，我说是指文件的读和写；0644是什么意思，我说不知道，我平时只用777，他又问我知不知道777的第三位指什么，777有什么危害，我说我只知道文件权限为777时，可读可改，很方便，但所有用户都可以修改它并不安全，其他的危害我就不知道了。

之后又问了我http的传输方式，我说有get和post。他又问了两者的区别，我说get是明文传输，信息都在浏览器的地址栏，不安全，而post为安全传输，当需要传输密码或者是长的字符串时需要用post，因为浏览器的地址有长度限制，所以长的字符串也不能用get传输。

然后又问我知不知道HTTP状态码，这个问题我喜欢，刚好是我上个星期总结过存在手机便签里的，我赶紧打开便签说：

200服务器正确返回响应
404请求的资源不存在
403没有访问权限
500服务器内部错误

他又问我知不知道303，我说我不知道，这些我都是遇到一些就总结一下记下来，没遇到过的也就不知道。

这个时候差不多快十一点了，问题问得基本上也都差不多了，他问我有没有什么想问的，我就问了啥时候有一面的结果，他说7日之内。然后我又说我这是第一次面试，也不知道该准备什么，他说知道什么就说什么就好了，也不需要特地准备。
尬聊了一小时，我说了句拜拜，恩，，终于结束了，，，我也不知道我这次的表现算怎么样，不过毕竟是第一次面试，我也不是很紧张。恩，不过，还是希望有个好结果~

（我觉得我该刷刷前端的面试题了，要不然问啥啥不会）

美团一面电话面试（web前端开发工程师）相关推荐

牵引力人事主管告诉你：如何面试Web前端开发工程师
实际上参加面试工作的人都知道要想在一个较短的时间内(30min-1h)就对一个应聘者做出判断其实是很难的,因此我们不得不想尽办法去更加合理的去判断面试者.下面是牵引力人事主管理出的一个思路: 第一步, ...
如何才能成为一名合格的web前端开发工程师
如何才能成为一名合格的web前端开发工程师开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的. winter在他的<重学前端&g ...
深圳乐创互联科技有限公司 - (web前端开发工程师机试题)
web前端开发工程师机试题面试要求可查看上方链接效果图代码 css: * {margin: 0;padding: 0;list-style: none;text-decoration: none ...
Web前端开发工程师必读de设计博客
2019独角兽企业重金招聘Python工程师标准>>> Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具 ...
想成为一个Web前端开发工程师，需要掌握哪些知识？
前端工程师已经成为目前互联网企业极具竞争力的人才,为了招聘到优秀的Web前端开发工程师,企业不断的提升薪资水平.因此,有越来越多的人加入到了学习Web前端行列.那么,想成为一名web前端开发工程师需要 ...
想成为一个Web前端开发工程师，需要掌握的详细知识总结
前端工程师已经成为目前互联网企业极具竞争力的人才,企业不断提升薪资水平为了招聘到优秀的Web前端开发工程师.因此,越来越多的人想要学习Web前端.那么呢?Web前端的学习路线是什么? 想成为一个Web ...
Web前端开发工程师到底是干什么的？
Web前端开发工程师其实是查BUG,改BUG,写BUG.哈哈,以上内容纯属开玩笑.事实上,Web前端开发工程师简单地说,就是使用HTML.CSS.JavaScript等技术来实现客户端(手机和电脑)上 ...
如何学习才能成为优秀的Web前端开发工程师？
随着Web前端技术的广泛应用,Web前端开发工程师也成为了热门的岗位之一,并且吸引了很多人想要转行成为Web前端开发工程师.那么如何学习才能成为Web前端开发工程师呢? 如何学习才能成为优秀的Web前 ...
web前端开发工程师的竞争力体现在哪里？
web前端开发工程师的核心竞争力体现诸多方面.这个不可替代性我们可以理解为与其他计算机细分领域.应用场景相比,前端开发的核心优势体现在哪些方面?或者有哪些独特的属性? 直面用户,前端更擅长从用户视角出 ...
职业规划-Web前端开发工程师
Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及F ...

美团一面电话面试（web前端开发工程师）

美团一面电话面试（web前端开发工程师）相关推荐

最新文章

热门文章

美团一面 电话面试（web前端开发工程师）

美团一面 电话面试（web前端开发工程师）相关推荐

最新文章

热门文章

美团一面电话面试（web前端开发工程师）

美团一面电话面试（web前端开发工程师）相关推荐