2018年6月前端面试经历(上)

发表于 | 分类于 | 阅读次数

前言

坐标：杭州 。自己从事前端工作差不多2年，本人不是科班出身，算是一个小菜鸡到现在刚入门吧。2年前去面试，因为技术菜，其实公司并没有怎么去了解我的技术，主要还是看个人的态度和学习能力，所以很感谢前面的俩个老东家，把我这个小菜鸡带入门了。今年，在上一个东家做的项目差不多也成型了，发现自己也到了一个一个瓶颈期吧，所以出来闯闯看。
出去面试其实就是一个快捷径去认识到自己的不足，希望能给和我一样在面试的江湖人一点小小的抛砖引玉吧。

笔试题

1）js的继承是什么？原型链？

1
2
3
4
5
6
function super (){
        this.a = '1'
    }
    function sub (){  
        super.call(this)
    }

或者

1
2
3
function sub (){...}
sub.prototype = new super();
//直接在他的原型上new一个super的实例。

在new的过程中，发生了，改变this的指向，执行super里面的代码，返回一个新的函数。

es6的继承方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class sub extends super(){
    constructor(){
        //super()和super(props)的区别
        super() // cosole.log(this.props)  undifined
        super(props) // console.log(this.props) //打印出定义好的props
        
        // super() 它在这里表示父类的构造函数，用来新建父类的this对象。
        //子类必须调用这个方法，不然继承的话会报错。子类必须在constructor方法中调用super方法，否则新建实例时会报错。
        //这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
        //得到与父类同样的实例属性和方法，然后再对其进行加工，
        //加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
        }
        // constractor一定是必要的吗？
        // 答 是的，就算你不声明，也会隐式的把你声明好一个空的constractor。

2）ajax是什么？

异步的javascript+Xml

1
2
3
4
5
6
7
8
9
var xhr = new XmlHttpRequest() 或者  new ActiveXObject()
    xhr.onreadyChange = function(){
        if(xhr.readyState = 4){
        if(xhr.status == 200){
            var test = xhr.responseTest()
        }
    }
}
xhr.open("Get" , url ,false) //第三个参数，是否异步

3）如何对一个数组做去重？

（1）set方法

1
2
var arr = new Set (arr);
arr = Array.from(arr);

（2）还可以利用对象的key不能相同去做判断

（3）for循环

4）rem和em的区别？

rem是相对于 根元素 上的font-size的大小

em是相对于 父元素 的font-size的大小

这里对于em和rem的理解，不是很准确和深入，不想误导新的朋友～ 下面有同学推荐了一个网站
综合指南: 何时使用 Em 与 Rem

（更新于2018/07/03 22:51）

5）盒子模型

（1）普通盒子模型 boxsizing：content-box;
（2）怪异盒子模型 boxsizing：border-box;

6）http的状态码

200 304 500 404 415 都可以去了解一下

7）实现一个函数能做到 function add(1)(2)(3) //6，达到function add(1)(2)(3)…(n)

这里要引生出来俩个js内置的方法，valueOf和toString方法，在特定的情况下，这俩个方法都会自动调用，而且在用户定义了新的valueof和tostring的时候，会优先执行新的方法。

在做字符串拼接等需要调用tostring()方法的是有优先调用toString(),如果调用后还是不能返回原始类型的话会继续调用valueOf方法。

而在做类似number的运算的时候会优先调用valueOf().

而对于函数而言，add 和add()的返回是不一样的。add()会返回return的值。而add则会调用valueOf答应出来函数本身的代码.函数的转换类似于number。

解题

1
2
3
4
5
6
7
8
9
10
11
12
13
function add () {
    var args = [].slice.call(arguments);//这里也用到了闭包的概念对args的存储
    var fn = function () {
        var arg_fn = [].slice.call(arguments); //这里的递归是为了合并参数
        return add.apply(null, args.concat(arg_fn));
    }
    fn.valueOf = function() {
        return args.reduce((a, b) => a + b);//真正的输出是valueof
    }
    return fn;
}

8）执行循序 setTimout和promise
这里我们先要理解js是是单线程执行的。在内存中函数的执行是分同步和异步的。
同步任务会放在主线程中一一执行，而异步任务会先注册到事件队列里。等待主线程任务执行完毕，才会去异步队列里拿出任务放在主线程中去执行。

这里还有俩个概念要去理解，宏事件 微事件。

宏事件： script， setTimeout，setInterval

微事件：promise

这里还要多说一句promise是立即执行的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    setTimeout(function() {
        console.log(1)
    }, 0);
    new Promise(function(a, b) {
        console.log(2);
        for(var i = 0; i < 10; i++) {
                i == 9 && a();
            }
        console.log(3);
    }).then(function() {
        console.log(4)
    });
    console.log(5)
//输出:2,3,5,4,1

先执行宏事件，再执行微事件，然后再循环.

9）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Foo() {
    getName = function () { alert (1); };
    return this;
}
    Foo.getName = function () { alert (2);};
    Foo.prototype.getName = function () { alert (3);};
    var getName = function () { alert (4);};
    function getName() { alert (5);}
    //请写出以下输出结果：
    Foo.getName(); //2
    getName(); // 4
    Foo().getName(); // 1
    getName(); // 1
    new Foo.getName(); //2 相当于 new (Foo.getName)();
    new Foo().getName(); // 3 相当于 (new Foo()).getName()
    new new Foo().getName(); // 3 相当于 new ((new Foo()).getName)()

new Foo.getName(); 和 new Foo().getName(); 的区别在于

new Foo 结合属于 new 无参数列表的情况（17级）

new Foo() 结合属于 new 有参数列表的情况（18级）

后三个可以参考js的运算符优先级问题

10) Object.defineProperty()和 {} 出来的对象有什么区别

这个问题说实话，我还真不太确定是什么，我觉得可能是defineProperty定义出来的对象 还可以定义是否可枚举，可读写的属性吧

更新于2018／07/05

今天在枚举一个对象的时候，竟然发现defineProperty定义出来的对象,
如果不定义enumerable:true是不可以被枚举的，而{}这样声明出来的对象就可以直接被枚举！

11）http缓存有什么方法？ 强缓存，协商缓存，304

强缓存：carche-control ：max-age

协商缓存：利用304

12）call，apply的区别。这俩者和bind的区别。bind如何用原生实现出来。

call，apply的区别时后面的传参。call时一个一个传，apply时一个数组。

bind能时返回一个新的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    
Function.prototype.bind = function (context) {
    //判断调用此方法的是否是一个函数，不是函数就报错
    if (typeof this !== "function") {
        throw new Error(this + "is not a function");
    }
    var self = this;
    var args = [];
    //把参数循环出来
    for (var i = 1, len = arguments.length; i < len; i++) {
        args.push(arguments[i]);
    }
 
    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    fbound.prototype = Object.create(self.prototype);
    //返回的函数不仅要和 被调函数的函数体相同，也要继承人家的原型链
    return fbound;
}

13)一句话打乱一个数组?

1
arr.sort(function(){ return 0.5 - Math.random()})

14）箭头函数的this的指向问题

阮一峰博客写的很准确，推荐
箭头函数

15）浏览器渲染原理 略（要很详细的讲，可能要写一篇文章～，大家可以去开源社区找专门的文章去了解～）

16）右边固定，左边自适应。左边固定右边自适应。上面固定高度，下面自适应高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//左边自适应，右边固定
.float-box{
    display:flex;
    justify-content:end;
}
.left{
    width: 100%;
    border:1px solid #ddd;
}
.right{
    width:300px;
    border:1px solid #ddd;
}

17）水平居中？水平垂直居中？

水平居中

inline 元素用text-align: center;即可，如下

1
2
3
.container {
   text-align: center;
}

block 元素可使用margin: auto;，PC 时代的很多网站都这么搞。

1
2
3
4
5
6
7
.container {
    text-align: center; 
}
.item {
    width: 1000px;
    margin: auto; 
}

绝对定位元素可结合left和margin实现，但是必须知道宽度。

1
2
3
4
5
6
7
8
9
10
11
.container {
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

垂直居中

inline 元素可设置line-height的值等于height值，如单行文字垂直居中：

1
2
3
4
.container {
   height: 50px;
   line-height: 50px;
}

绝对定位元素，可结合left和margin实现，但是必须知道尺寸。

  • 优点：兼容性好
  • 缺点：需要提前知道尺寸
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

绝对定位可结合transform实现居中。

  • 优点：不需要提前知道尺寸
  • 缺点：兼容性不好
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .container {
        position: relative;
        height: 200px;
    }
    .item {
        width: 80px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: blue;
    }

绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

> 下节预告：算法题～～ 我已经在努力高产的像母猪了～

更新于 2018/7/03 11:38

当当当～ 新鲜出炉～ 2018年6月前端面试经历(中)