前端校招面试题小汇总

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

前端笔试题一（年后）

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

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

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

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

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

4. 请写出foo.length的值
   var foo = [];
   foo.push(1);
   foo.push(2);
   答案
   //foo=[1,2] foo.length = 2

5. 请写出下面代码的执行结果
   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
    考查闭包和对象的引用
   

6. 请写出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

7. 请实现一个add函数，满足以下结果
   add(2,5) //7
   add(2)(5) //7
   解析：这个题用一个闭包就可以实现，具体代码如下
   function add(a){
   if (arguments.length > 1) {
   var sum = 0;
   for (var i = 0; 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;
            }
        }
    如此一来就可以实现我们的需求了
   

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

9. 请列举你知道的实现跨域通信的方法，这些跨域的方法分别有哪些特点，适合于哪种场景

10. 请分装一个为某一DOM元素绑定事件的方法，考虑浏览器兼容性

前端笔试题二（年前）

1. 如何实现多标签页之间的通讯

2. 简述什么事按需加载，然后实现一个图片按需加载的js

3. 简述下闭包，有什么好处和坏处

4. 什么事模块化开发，怎么实现一个模块开发

5. 如何实现一个多列等高布局

6. zoom是什么，有什么用

7. 怎么优化一个首屏的加载速度，可以从js和css等方面考虑

8. 简述下new一个对象后，this的变化。（new操作符的作用）

9. 怎么实现一个对象的继承

10. 简述下平时开发用到的技术栈

前端笔试题三

1. 常见的行内元素有些；块级元素有哪些；空元素有哪些；

2. 请简单介绍一下css的盒子模型

3. css选择符有哪些；哪些可以继承；优先级如何计算

4. 如何水平居中一个div

5. html5有哪些新特性

6. 使用iframe有哪些缺点

7. 移动端网站前端开发与PC端的不同点是什么

8. 列出display的值，说明他们的作用。position的值，relative与absolute的定位原点

9. css3有哪些新特性

10. 经常遇到的浏览器兼容性有哪些，原因以及解决办法是什么。常用的Hack技巧是什么

11. null与undefined的区别

12. javascript如何实现继承

13. 请简单说明你对this对象的理解

14. 什么事闭包；写一个栗子

15. js模块化可以怎么做

16. 经常使用库是什么；开发工具是什么

58同城面试题（口述）

css部分

1. margin和padding的区别（盒子模型）

2. 清除浮动的方式

3. :after和:before的用法

4. position的值，relative，absolute以及fixed的区别

5. css动画，如何实现一个持续旋转的动画（记太不清楚了~~·）

6. （想不起来了，主要问的css，因为一开始问我是css比较熟还是js比较熟，我说的是css。。。）

其他

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

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

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

2. ajax遇到过跨域吗，原因是什么，解决办法，原因

3. 前端安全，知道xss吗

4. webpack用过吗，gulp，git等

5. （想起来再加上）

现场上机题

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

阿里巴巴内推笔试

编程笔试题

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

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

开场

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

CSS

1. 怎么实现一个元素上下左右居中

2. margin-top:50%是相对于谁50%
   答案：百分比的margin和padding都是相对于父元素的宽度来进行计算的

JS

1. 你所了解的前端模块化，怎么去实现前端的模块化

2. 说一说什么是commonJS和AMD

3. 怎么实现一个ajax请求（原生方法）

4. 你在做过的项目中遇到的印象深刻的难点是什么

5. http2.0有没有了解

6. 你还有什么想问的（大哭。。。）

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

1. 如何实现一个元素垂直居中（貌似这题被问到的几率很高啊）

2. rem设为多少合适，设置成1px行吗，为什么

3. 如何实现一个气泡对话框

4. 对前端工程化感兴趣吗

5. 假如有一个列表，大概1000多条数据，每条数据都有一个同意或者反对按钮，并且这些数据要一次性显示出来，请问如何优化

其他相关

• 前端面试题合集
• Front-End-Interview-Points
• HTML+CSS前端面试常考--牛客网

持续更新中。。。