前端筆試題彙總

這些都是朋友和學生在面試中，公司的一些筆試題，分享出來，爲了查看起來更方便。

2019.05.27 北京 筆試題

一、web 開發中會話跟蹤的方法有哪些？ 

二、HTTP methods？ 

三、從瀏覽器地址輸入 url 到顯示頁面的步驟（以http爲例）？  

四、如何進行網站性能優化？ 

五、容器包含若干浮動元素時如何清理（包含）浮動？ 

六、css hack 原理及經常使用hack？ 

七、垂直居中的方法？ 

八、重繪和迴流（重排）是什麼，如何避免？ 

九、PNG，GIF，JPG的區別及如何選？ 

十、JavaScript 跨域通訊？ 

十一、對象到字符串的轉換步驟？ 

十二、函數內部的 arguments 變量有哪些特性，有哪些屬性，如何將他轉換爲數組？ 

1三、評價一下三種方法實現繼承的的優缺點，並改進。 

1四、focus/blur 與 focusin/focusout 的區別與聯繫。 

1五、sessionStorage ，localStorage， cookie 區別？ 

1六、JavaScript 有哪幾種方法定義函數？ 

1七、什麼是閉包，閉包有什麼用？ 

1八、let 與 var 的區別，以及 箭頭函數 與 function 的區別？  

1九、HTTP 狀態碼 10一、200、30一、30二、304的具體含義。  

20、什麼是防護性編程？與其相對的 let it crash 又是什麼？ 

 

筆試題2

一、請寫出判斷變量類型的幾種方法，並談談這幾種方法的差別或者侷限；  

二、請寫一下你記得的字符串操做方法，並說一下該方法的做用；  

三、請寫一下你記得的數組的操做方法，並簡明說明一下該方法的做用； 

四、[1, 2, 3, 4, 5, 2, 3, 4, 2, 3, 4, 2, 3, 4] 數組去重，只要是數組迭代方法，皆可去重，除了數組的迭代方法還有 ES6 的 set 數據結構； 

五、原生實現一個 ES5 的 bind( ) 

六、簡述一下 src 與 href 的區別； 

七、sessionStorage、localStorage 和 cookie 之間的區別； 

八、簡述 Ajax 工做原理； 

九、簡述一下瀏覽器的渲染流程；  

十、設想如下場景：公司有個項目，該項目須要作成單頁應用，此時在不使用其餘框架的狀況下，說一下你該如何實現這個單頁應用； 

十一、簡單說一下 vue 的雙向綁定原理； 

十二、簡單說一下對於 node 的瞭解，瞭解其中的哪些模塊，哪些方法，或是其餘； 

1三、繼承的方式； 

1四、經常使用跨域方式； 

1五、請寫出幾個經典的 this 使用場景 

1六、如何理解閉包？使用閉包時的注意點有哪些？ 

1七、談一談你所瞭解到的垃圾回收機制； 

1八、let、const、var 有什麼區別？ 

1九、怎樣添加，移除，移動，建立，複製，查找 DOM 節點？

筆試題3

一、輸出結果

console.log(Number(true))//1   
console.log(Number(null))//0      
console.log(Number(undefined))//NaN    
console.log(typeof NaN)//number
console.log(0.1 + 0.2 == 0.3, 0.5 + 0.1 == 0.6);//false true      
console.log(true == 1);//true      
console.log(true === 1);//false複製代碼

 二、寫出 JS 中的數據類型 

 三、請把如下對象變爲數組； var data = [a: 1, b: 2, c: 3] 

 四、請寫出如下結果 

fn (); //2
function fn () {
    console.log(1)
};
fn() //2
var fn = 10;
fn (); //Uncaught TypeError: fn is not a function 到這裏，程序終止，不往下執行了
function fn() {
    console.log(2)
};
fn(); 複製代碼

五、請自選一種方法來實現 fn(1)(2) == 3 的方法； 

六、請寫出下面的輸出結果，最好說明一下緣由； 

function Fn() {
    var num = 10;
    this.x =100;
    this.getx = function () {
        console.log(x)
    }
}
var f1 = new Fn;
console.log(f1.num);//undefined
console.log(num);//Uncaught ReferenceError: num is not defined，到這裏，程序終止，不往下執行了
console.log(f1.getx);複製代碼

七、請簡述一下 JS 綁定事件的方法，這些方法與 live 有什麼不一樣之處？ 

八、請寫出下面的結果，爲何？ 

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

答案：一共 5個5，瞬時出現一個5，而後1秒出現一個5，由於開始 i 爲 0
思考：
(function () {
    console.log(1);
    setTimeout(function () {
        console.log(2);
    }, 1000);
    setTimeout(function () {
        console.log(3)
    }, 0);
    console.log(4);
})()
console.log(5)
答案：結果爲1 4 5 3 2，其中1 4 5 3 時順時出來，2 是在1秒以後出來，緣由是 setTimeout( ) 是異步的，
執行的機制是 將指定的代碼移出本輪事件循環，等到下一輪事件循環，先執行 同步的任務 ； 複製代碼

 九、請簡單敘述你所知道的 ES6 新屬性； 

 十、下面的代碼將輸出什麼？ 

console.log(1 + "2"+"2");//122
console.log(1 + +"2" +"2");//32
console.log(1 + -"1" + "2");//02
console.log(+ "1" + "1" + "2");//112
console.log("A" - "B" + "2");//NaN2
console.log("A" - "B" + 2);//NaN
console.log("0||1=" +(0||1));//0||1=1
console.log("0||1=" +(1||2));//0||1=1
console.log("0&&1=" +(1&&2));//0&&1=2
console.log("0&&1=" +(1&&2))//0&&1=2複製代碼

十一、數組去重：請用你所知道的實現下面的數組去重；

fn([0, 1, 2, '1', '1', 3, '3']) =>[0, 1, 2, '1',, 3, '3'] 複製代碼

十二、如下代碼將輸出什麼？ 

var a = {},
b = {key: "b"},
c = {key: "c"};
a[b] = 123;
a[c] = 456;
console.log(a[b]);//456複製代碼

面試題4

一、說說Vue雙向綁定的原理/MVVM的理解 *n 

二、 Vue與React的區別 *n 

三、 談談你對閉包的理解 *n 

四、 你項目中遇到最困難的問題是什麼 *n 

五、 你以爲你拿得出手的東西 *n 

六、 Promise 核心原理/工做機制 *3 

七、有封裝過哪些組件，有什麼心得？ *3 

8 、vue路由生命週期都有哪些，銷燬鉤子函數裏你一般會作些什麼 *2 

九、 Webpack、Gulp打包的原理是什麼、有什麼不一樣 *2 

十、談談類的繼承 

十一、原型鏈和做用域鏈 

十二、經常使用的僞類僞元素 

1三、vuex 爲何要用 action去調用 metation 

1四、談談你所熟悉的設計模式 

1五、談談你對虛擬DOM的理解 

1六、談談你對NodeJS的瞭解 

1七、談談你對匿名函數的瞭解