几道前端面试题小记

2019年8月31日 107次阅读 来源: 风满楼

近来面试了不少家，苦于前端履历柔弱，被种种血虐。做了不少家面试题，把种种不会的返来再做一遍，作为履历总结吧。

1.怎样最优性能去重一个数组？

要领有很多，比方新建一个数组，原数组的内容顺次往里放，若该数组元素已存在，则跳过；又或许先排序，顺次比较前后两个元素是不是相称，若相称，则去掉删除后一个元素。面试官有提到运用 filter 的要领,然则就地没想到，发明这个要领实在属于相称不错的，这类函数式的头脑在某些处所相称有用。

var arr = [3,5,2,6,2,3,5,8,6]

function distinct(arr) {
    return arr.filter(function (elem,index,arr){
        return arr.indexOf(elem,index+1) === -1;
    });
}

console.log(distinct(arr));

思绪扩大
比方说存在一个数组，个中元素为对象，依据对象某个属性举行排序。比方将以下data数组按age正序分列，通例的方法多是经由过程比较age大小，操纵对象来举行排序，如许代码会比较复杂。而更优的要领则是经由过程 sort 要领。

var data = [
{name:'xiaoming',age:18},
{name:'xiaohua',age:20},
{name:'xiaoli',age:25},
{name:'xiaozheng',age:16}];

查阅 MDN 关于 sort 要领，此要领显著代码量更少，寄义越发清楚。

function asc_order(data){
    return data.sort(function (a,b){
        return a.age- b.age;
    })
}

2.变量声明和函数声明提拔

function fn(a){
    console.log(a);
    var a=2;
    function a(){}
    console.log(a);
}
fn(1);

以上代码输出内容？
此前看书时有相识到变量声明会提拔到作用域顶部，但忘记了变量赋值保持在原处，同时变量声明和函数声明的前后关联不确定，所以此题对我来讲比较难，只能瞎蒙答案。

function  fn(a){
    var a;
    function a(){}
    console.log(a);
    a = 2;
    console.log(a);
}

fn(1);

  1. 一切全局变量都是window或Global的属性

  2. 函数声明会被提到局限作用域的顶端

  3. 变量声明被提到局限作用域的顶端

  4. 变量声明比函数声明优先级高，变量声明优于函数声明，假如二者同时存在，后被提拔的函数声明会掩盖被提拔的变量声明

  5. 变量赋值不会被提拔，到实行行代码才最先赋值

参考博客地址，依据以上五点共鸣，可将代码翻译如上所示。

深切思索
为何JavaScript相比较别的言语会存在声明提拔？变量声明时编译器做了什么？变量赋值时编译器又做什么了？

3.作用域和 this

var a = 10;
function test(){
    a = 100;
    console.log(a);
    console.log(this.a);
    var a;
    console.log(a);
}
test();
var a = 100;function test(){
    console.log(a);
    var a = 10;
    console.log(a);
}
test();
var a = 100;function test(){
    console.log(a);
    a = 10;
    console.log(a);
}

test();
console.log(a);

在非严厉环境下，以上三个代码离别输出什么？遇到这类题目我也是头晕眼花，稍有不慎就掉坑了。固然现实营业中不会涌现如许的代码，但照样相称有必要以如许的代码来检核对 JavaScript 明白的水平。
this 的用法参照阮一峰先生的博客，重要分为三种状况,但总的原则是指向挪用函数的谁人对象。

  • 全局环境:挪用函数的对象现实为 window ，所以函数内的 this 指向 window ;

  • 组织函数:经由过程组织函造函数生成了一个新对象，this 指向这个新对象。

  • 对象的要领：函数作为对象的某个要领挪用， this 就指向这个上级对象。

故第一道题中属于全局环境， this 指向 window ，所以输出效果为：100，10，100；
第二道题输出效果为：undefined，10；第三道题输出效果为：100，10，10；

4.setTimeout 深切分析其机制

for (var i = 0;i<=3;i++){
    setTimeout(function (){
        console.log(i);
    },0);
}

此题输出内容是什么？

setTimeout 为 Window 对象要领，用来注册在指定的事宜今后单次或反复挪用的函数。

setTimeout的作用是将代码推晚到指定时候实行，假如指定时候为0，即setTimeout(f,0)，那末会马上实行吗？

答案是不会。由于上一段说过，必需要比及当前剧本的同步使命和“使命行列”中已有的事宜，悉数处理完今后，才会实行setTimeout指定的使命。也就是说，setTimeout的真正作用是，在“音讯行列”的现有音讯的背面再增加一个音讯，规定在指定时候实行某段代码。setTimeout增加的事宜，会在下一次EventLoop实行。

setTimeout(f,0)将第二个参数设为0，作用是让f在现有的使命（剧本的同步使命和“音讯行列”指定的使命）一完毕就马上实行。也就是说，setTimeout(f,0)的作用是，尽量早地实行指定的使命。而并非会马上就实行这个使命。

所以终究的效果是当前的函数实行完毕今后，再去实行 setTimeout 定义的内容。

5.class属性掩盖题目

<style>
    .B {color:  red}
    .A {color: blue}

</style>

<body>
<p class="A B">XXXXXXXXXX</p>
</body>

末了现实的题目是什么色彩？
存在多个类名时，类名的位置不会对属性的衬着产生影响。只要在style中定义的位置才会有影响，统一条属性，背面定义的会掩盖前面定义的属性。

6.完成相似 jquery 的 one 要领

即对一个元素绑定一个事宜，操纵一次后绑定事宜失效。

HTML部份：

<body>
<p id="target">XXXXXXXXXX</p>
</body>

JS部份：

window.onload = function(){
    var target = document.getElementById('target');
    function fn(e){
        alert('hello');
        target.removeEventListener('click',fn);
    };
    target.addEventListener('click',fn);
}

此代码虽可行，但没有举行封装，不便于运用。

正统封装后的JS代码，运用 arguments.callee 示意当前 function ，同时需对 event 上的属性有所相识。

function oneTime(node,type,callback){
    node.addEventListener(type,function (e){
        e.target.removeEventListener(e.type,arguments.callee);
        return callback(e);
    });
}
function handle(e){
    alert('hello!');
}
oneTime(p,'click',handle);

进修前端一个月，上一周面试了也许10多家，收成的 offer 倒是寥寥。
为了效力，前端各方面的内容都有浏览，深度却相称不足，面试时暴露种种题目。
照样需深切思索，欲速则不达啊！

也许是要到场大鱼或许小悟，今后事情好好勤奋吧！

    原文作者：风满楼
    原文地址: https://segmentfault.com/a/1190000007001038
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞