幾道前端面試題小記

時間 2019-11-07

標籤端面試題简体版

原文原文鏈接

最近面試了很多家，苦於前端經驗薄弱，被各類血虐。作了很多家面試題，把各類不會的回來再作一遍，做爲經驗總結吧。javascript

1.如何最優性能去重一個數組？

方法有好多，好比新建一個數組，原數組的內容依次往裏放，若該數組元素已存在，則跳過；又或者先排序，依次比較先後兩個元素是否相等，若相等，則去掉刪除後一個元素。面試官有提到使用 filter 的方法,可是當場沒想到，發現這個方法其實屬於至關不錯的，這種函數式的思惟在某些地方至關實用。html

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 方法，此方法明顯代碼量更少，含義更加清晰。java

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);

以上代碼輸出內容？
此前看書時有了解到變量聲明會提高到做用域頂部，但忘記了變量賦值保持在原處，同時變量聲明和函數聲明的前後關係不肯定，因此此題對我來講比較難，只能瞎蒙答案。node

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

fn(1);

全部全局變量都是window或Global的屬性jquery

函數聲明會被提到範圍做用域的頂端面試

變量聲明被提到範圍做用域的頂端數組

變量聲明比函數聲明優先級高，變量聲明優於函數聲明，若是二者同時存在，後被提高的函數聲明會覆蓋被提高的變量聲明函數

變量賦值不會被提高，到執行行代碼纔開始賦值oop

參考博客地址，根據以上五點共識，可將代碼翻譯如上所示。

深刻思考
爲何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 倒是寥寥。
爲了效率，前端各方面的內容都有涉獵，深度卻至關不足，面試時暴露各類問題。
仍是需深刻思考，欲速則不達啊！

大概是要加入大魚或者小悟，之後工做好好努力吧！