平時遇到的前端筆試題和面試題

我最近一個多月都在忙著找工作，這些是在面試過程中遇到的一些筆試題和面試題。

1、10 + 20 = ? 再加 20 呢？

10 + 20 = 1020 1020 + 20 = 102020

2、請寫出 Ajax 請求中用到的函數

var xhr = new XMLHttpRequest();xhr.open(GET/POST, http://localhost:8080?username=meishadevs, true);xhr.onreadystatechange = function() {};xhr.send();

3、使用正則表達式提取出url值為 https://map.baidu.com/x/y/z 中的 http://map.baidu.com

/https://([^/]+)/.exec(https://map.baidu.com/x/y/z)[1]https://map.baidu.com/x/y/z.match(/https://([^/]+)/)[1]

執行結果

4、使用ES6的方法實現數組去重

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];let set = new Set(array);let arr = Array.from(set);

5、設計一個函數實現add(3)(4)

function add(a) { return function(b) { return a + b; }}add(3)(4)

ES6的寫法

add = a => b => a + badd(3)(4)

對ES6寫法做一個變形

add = a => (b => a + b)

再變

add = function (a) { return (b => a + b)}

再變

add = function (a) { return function (b) { return a + b; }}

6、使用Ajax實現一個表單提交功能，並跳轉到提交的地址，（可以使用 jQuery 或 Zepto）

7、在完成第6題後使用 Promise 再實現一遍

8、JavaScript中的基本數據類型

Number、String、Boolean、Null、Undefined

9、一道響應式布局的題目

10、call、apply的作用與區別

call 和 apply 都是為了改變函數體內部 this 的指向，它們的第一個參數都是調用函數的對象，call方法接收由若干個參數組成的參數列表，apply方法接收的是一個包含多個參數的數組

例如使用call獲取一組數字中的最大值

Math.max.call(null, 1, 3, 5, 8, 2)

例如使用apply獲取一組數字中的最大值

Math.max.apply(null, [1, 3, 5, 8, 2])

11、標準盒模型和怪異盒模型的區別

標準盒模型的 box-sizing 屬性的值為 content-box

怪異盒模型的 box-sizing 屬性的值為 border-box

標準盒模型中 width = 內容的寬度

怪異盒模型中 width = 內容的寬度 + padding + border

12、em 與 rem 的區別

rem 表示根節點(html標籤)的字體大小的倍數

當 em 作為 font-size 的單位時，表示相對於父元素的 font-size 值的倍數

當 em作為其他屬性單位時，代表自身字體大小的倍數

13、localStorage 與 sessionStorage 的區別

使用 localStorage 保存的數據，除非手動清除，否則會永久保存

使用 sessionStorage 保存的數據僅在當前會話下有效，關閉頁面或瀏覽器後會被清除

14、元素層疊

參考張鑫旭大神的文章：深入理解CSS中的層疊上下文和層疊順序

15、使用原型現繼承

使用 __proto__ 實現繼承

//創建animal對象var animal = { name: "animal", eat: function () { console.log(this.name + " is eating"); }};//創建dog對象var dog = { name: "dog", //指向animal對象（dog繼承自animal） __proto__: animal};//創建cat對象var cat = { name: "cat", //指向animal對象(cat繼承自animal) __proto__: animal};dog.eat();cat.eat();

使用 prototype 實現繼承

//創建animal對象var animal = { name: "animal", eat: function () { console.log(this.name + " is eating"); }};//創建構造函數Dogfunction Dog() { this.name = "dog";}//創建構造函數Catfunction Cat() { this.name = "cat";}//設置Dog的原型為animal(Dog繼承自animal)Dog.prototype = animal;//設置Cat的原型為animal(Cat繼承自animal)Cat.prototype = animal;//創建dog對象var dog = new Dog();//創建cat對象var cat = new Cat();dog.eat();cat.eat();

16、JavaScript 中事件綁定的方式

button.onclick = function() {}button.addEventListener("click", function () {});

17、設計一個函數實現判斷一個數據的數據類型是不是數組

function isArray(num) { return num instanceof Array;}

18、什麼是瀏覽器的同源策略？

協議相同、域名相同、埠號相同

19、什麼是瀏覽器的標準模式和怪異模式？

參考MDN上的一篇文章：怪異模式和標準模式

20、預處理CSS有什麼優點和缺點？

優點：可以實現重用、自動加前綴等

缺點：不能直接識別，需要轉換成CSS

21、Web性能優化的手段有哪些？

1、減少HTTP請求數

2、使用CDN

3、給HTTP頭部添加過期時間

4、使用Gzip壓縮

5、樣式表置於頁面最前面

6、把JavaScript腳本放在最後面

7、使用外部的JavaScript和CSS

8、壓縮JavaScript和CSS

9、如果使用小圖標，可以將小圖標製成一張雪碧圖

22、常見的HTTP狀態碼有哪些？

參考我網上找到的一篇文章：HTTP常見狀態碼 200 301 302 404 500 - starof - 博客園

23、下面代碼的執行結果

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

輸出的結果是 undefined, 2

因為這裡存在變數提升，所以上面的代碼可以寫成下面的形式

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

24、下面代碼的輸出結果

var User = { count: 1, getCount: function () { return this.count; }};var func = User.getCount;console.log(User.getCount());console.log(func());

輸出的結果是 1, undefined，因為第一個console輸出中this指向的是User對象，count是User對象的屬性，第二個console輸出中this指向的是window對象，window對象中沒有count屬性，所以輸出 undefined

25、如何理解this

1、構造函數中的this指向新創建的實例對象

function Person(name, age) { this.name = name; this.age = age; this.printThis = function () { console.log(this); }}var person = new Person("meishadevs", 24);person.printThis();

執行結果

2、普通函數中的this指向函數的調用者

function printThis() { console.log(this);}printThis();

執行結果

3、自執行函數中的this指向window對象

(function () { console.log(this);})();

執行結果

4、箭頭函數中的this指向函數定義時所在的對象

26、寫出以字母開頭，可以包含字母或數字的4—10位的用戶密碼的正則表達式

/^[a-zA-Z][a-zA-Z0-9]{3,9}$/.test(password);

27、parent為父級div元素的類名，child為子級div元素的類名，parent和child都不定寬高且parent的寬高都大於child，請寫出讓child垂直水平居中的CSS

方法一：position + transform

.parent { position: relative;}.child { transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%;}

方法二：使用flex布局

.parent { display: flex; justify-content: center; align-items: center;}

28、DOM事件流包括那三個階段

第一階段：從window對象傳導到目標節點，稱為「捕獲階段」（capture phase）

第二階段：在目標節點上觸發，稱為「目標階段」（target phase）

第三階段：從目標節點傳導回window對象，稱為「冒泡階段」（bubbling phase）

29、寫出js代碼合併下列兩個數組，並去重

let arr1 = [2, 6, 1, 3, 8];let arr2 = [5, 2, 7, 6, 4];

實現代碼

let arr1 = [2, 6, 1, 3, 8];let arr2 = [5, 2, 7, 6, 4];let arr3 = arr1.concat(arr2);let set = new Set(arr3);let arr4 = Array.from(set);console.log(arr4);

30、下面這段代碼的輸出結果是，如何使它輸出1、2、3、4

for (var i = 1; i < 5; i++) { setTimeout(function () { console.log(i); });}

輸出4個5，使用兩種方法可以輸出1、2、3、4

方法1：使用自執行函數

for (var i = 1; i < 5; i++) { (function (num) { setTimeout(function () { console.log(num); }); })(i);}

方法2：將var改成let，因為使用var聲明的變數沒有局部作用域，為了解決這個問題才在ES6中引入了let

for (let i = 1; i < 5; i++) { setTimeout(function () { console.log(i); });}

31、4，4，10，10，加減乘除，怎麼出24點？四個數字分別只能用一次

(10 * 10 - 4) / 4

32、如果你有無窮多的水，一個容積為3L的和5L的提桶，你如何準確稱出4L的水

第一步：將裝5L水的水桶裝滿 裝5L水的水桶中裝了5L水 裝3L水的水桶沒有裝水第二步：將裝5L水的水桶中的水倒入只能裝3L水的水桶中，並倒滿只能轉3L水的水桶 裝5L水的水桶中裝了2L水裝3L水的水桶中裝了3L水第三步：將裝3L水的水桶中的水倒掉 裝5L水的水桶中裝了2L水 裝3L水的水桶為空第四步：將裝5L水的水桶中的2L水倒入裝3L水的水桶中 裝5L水的水桶為空 裝3L水的水桶中裝了2L水第五步：將裝5L水的水桶裝滿 裝5L水的水桶中裝了5L水裝3L水的水桶中裝了2L水第六步：將裝滿5L水的水桶中的水倒入裝3L水的水桶中，並倒滿只能裝3L水的水桶 裝5L水的水桶中裝了4L水 裝3L水的水桶中裝了3L水

參考鏈接

• 深入理解CSS中的層疊上下文和層疊順序
• Javascript：一個屌絲的逆襲
• javascript王國的一次旅行，一個沒有類的世界怎麼玩轉面向對象？
• javascript王國之函數教主
• 怪異模式和標準模式
• HTTP常見狀態碼 200 301 302 404 500 - starof - 博客園

meishadevs歡迎任何形式的轉載，但請務必註明出處，尊重他人勞動成果。

轉載請註明： 【文章轉載自meishadevs：平時遇到的前端筆試題和面試題】

推薦閱讀：