前端校招面试题小汇总

2017-03-14 本文已影响570人虾哔哔

前言：前段时间去面试了几家校招前端，感觉有些笔试题还是挺有难度的，这边记录下来，答案会慢慢更新。

前端笔试题一（年后）

请写出foo的值；var foo = 10 + ‘20’
//1020
此题考查数据类型转换。如果var foo = 10 + '20' - 10，那么foo的值应该是多少呢。

请写出下面语句执行的结果 "I'm a lasagna hog".split('').reverse().join('')

 //"goh angasal a m'I"
 split()方法用于将一个字符串划分为字符数组，如果是split('')的话，那么字符串的每个字符都会被切割，空格也算一个字符。
 recerse()方法用于颠倒数组元素的顺序，会改变原数组

请写出window.foo的值 (window.foo1 ||(window.foo1 = 'bar'))

 //bar
 foo1为全局变量，foo1有赋值则值为赋值，没有则默认为bar

请写出foo.length的值
var foo = [];
foo.push(1);
foo.push(2);
答案
//foo=[1,2] foo.length = 2
请写出下面代码的执行结果
var a = 0;
var b = 0;
function A(a){
A=function(b){
console.log(a+b++);
}
console.log(a++);
}
A(1);
A(2);
解析:关于这道题的详细解释可以看这里
```
 //1
 //4
 考查闭包和对象的引用
```
请写出foo.x的值
var foo = {n:1};
var bar = foo;
foo.x = foo = {n:2}
解析:这个题的解释在这里，比较难理解~~
bar = {
n:1,
x:{n:2}
}
foo = {n:2}
所以foo.x = undefined

请实现一个add函数，满足以下结果
add(2,5) //7
add(2)(5) //7
解析：这个题用一个闭包就可以实现，具体代码如下
function add(a){
if (arguments.length > 1) {
var sum = 0;
for (var i = 0; i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
} else{
return function(b){
return a+b;
}
}
}

 //代码还有很大的改动空间，如果我需要add(1)(2)(3)的值，那这个函数就没法实现了，可以稍作修改。
 
 function add(x) {
         if(arguments.length > 1) {
             var sum = 0;
             for(var i = 0; i < arguments.length; i++) {
                 sum += arguments[i];
             }
             return sum;
         } else {
             var sum = x;
             var tmp = function(y) {
                 sum = sum + y;
                 return tmp;
             };
             tmp.toString = function() {
                 return sum;
             };
             return tmp;
         }
     }
 如此一来就可以实现我们的需求了

请列举你知道的实现多列布局的方法，并写出示例代码；

请列举你知道的实现跨域通信的方法，这些跨域的方法分别有哪些特点，适合于哪种场景
请分装一个为某一DOM元素绑定事件的方法，考虑浏览器兼容性

前端笔试题二（年前）

如何实现多标签页之间的通讯
简述什么事按需加载，然后实现一个图片按需加载的js
简述下闭包，有什么好处和坏处
什么事模块化开发，怎么实现一个模块开发
如何实现一个多列等高布局
zoom是什么，有什么用
怎么优化一个首屏的加载速度，可以从js和css等方面考虑
简述下new一个对象后，this的变化。（new操作符的作用）
怎么实现一个对象的继承
简述下平时开发用到的技术栈

前端笔试题三

常见的行内元素有些；块级元素有哪些；空元素有哪些；
请简单介绍一下css的盒子模型
css选择符有哪些；哪些可以继承；优先级如何计算
如何水平居中一个div
html5有哪些新特性
使用iframe有哪些缺点
移动端网站前端开发与PC端的不同点是什么
列出display的值，说明他们的作用。position的值，relative与absolute的定位原点
css3有哪些新特性
经常遇到的浏览器兼容性有哪些，原因以及解决办法是什么。常用的Hack技巧是什么
null与undefined的区别
javascript如何实现继承
请简单说明你对this对象的理解
什么事闭包；写一个栗子
js模块化可以怎么做
经常使用库是什么；开发工具是什么

58同城面试题（口述）

css部分

margin和padding的区别（盒子模型）
清除浮动的方式
:after和:before的用法
position的值，relative，absolute以及fixed的区别
css动画，如何实现一个持续旋转的动画（记太不清楚了~~·）
（想不起来了，主要问的css，因为一开始问我是css比较熟还是js比较熟，我说的是css。。。）

其他

VUE中v-if和v-show的区别

简单来说，v-if的初始化较快，但切换代价高；v-show初始化慢，但切换成本低。具体解释如下：

v-show 渲染页面结构后，通过 display:none 控制元素状态。所以初始化时间较长。
v-if 是懒计算，如果条件为false，它什么也不做，加载速度较快。当条件为真时，v-if 才会真正编译渲染页面结构。因此，v-if 切换复杂组件的花销要比 v-show 大得多。
所以要根据实际场景决定使用哪个指令。

ajax遇到过跨域吗，原因是什么，解决办法，原因
前端安全，知道xss吗
webpack用过吗，gulp，git等
（想起来再加上）

现场上机题

使用js实现一个功能：向一个ul里面每隔1秒添加一个li，里面包含当前的时间，然后鼠标点击其中的li，在控制台输出被点击的li里面的内容。

阿里巴巴内推笔试

编程笔试题

页面上有两个矩形，请使用JavaScript完善 your code here 区域，实现一个视差滚动效果，滚动滚轮，矩形一以两倍的鼠标滚动距离滚动，矩形二以三倍的鼠标滚动距离滚动。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
</head>
<body style="height: 5000px" id="wrapper">
    <div style=" width: 300px; height: 100px; background:#000;" id="box1"></div>
    <div style=" width: 300px; height: 100px; background:red;" id="box2"></div>
    <script>
    // your code here
    </script>
</body>
</html>

阿里巴巴面试（电面）(已跪)

开场

首先介绍一下你自己吧（(^__) ）

CSS

怎么实现一个元素上下左右居中
margin-top:50%是相对于谁50%
答案：百分比的margin和padding都是相对于父元素的宽度来进行计算的

JS

你所了解的前端模块化，怎么去实现前端的模块化
说一说什么是commonJS和AMD
怎么实现一个ajax请求（原生方法）
你在做过的项目中遇到的印象深刻的难点是什么
http2.0有没有了解
你还有什么想问的（大哭。。。）

某公司校招面试题（电面）

如何实现一个元素垂直居中（貌似这题被问到的几率很高啊）
rem设为多少合适，设置成1px行吗，为什么
如何实现一个气泡对话框
对前端工程化感兴趣吗
假如有一个列表，大概1000多条数据，每条数据都有一个同意或者反对按钮，并且这些数据要一次性显示出来，请问如何优化

其他相关

持续更新中。。。