前端面试必考题
HTTP
HTTP狀態碼知道哪些？
200 請求已成功，請求所希望的響應頭或數據體將隨此響應返回。
400 請求參數有誤或者語義有誤，當前請求無法被服務器理解。
401 當前請求需要用戶驗證
404 請求失敗，請求所希望得到的資源未被在服務器上發現。
500 服務器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。
TCP
JavaScript
JS有哪些內置對象？
Array:
- concat: 合并
- join: 連接成字符串
- pop: 移除最后元素
- push: 添加元素
- shift: 移除第一個元素
- slice: 返回數組的一段
- sort: 排序
- reverse: 反轉
Date:
- get/setDate, get/setTime
- get/setFullYear, get/setYear, get/setMonth, get/setDay
- get/setHours, get/setMinutes, get/setSeconds
RegExp:
- g: 全文查找
- i: 忽略大小寫
- m: 多行查找
String:
- charAt: 返回指定索引位置的字符
- match: 使用正則進行查找，并返回查找結果
Math:
- ceil: 向上取整，floor: 向下取整
- round: 四舍五入
- random: 隨機數
判斷數據類型的方式
1.typeof 可以判斷的的類型有 undefined Boolean Number String Object
注意 使用typeof 判斷 Array 和 null結果均為 object
描述下Array中的split()和join()的區別
1.split()
將一個字符串分割為子字符串，將結果作為字符串數組返回，若字符串中存在多個分割符號，亦可分割。
形式：
stringObj.split([separator,[,limit]])
stringObj 必選項 string對象或者文字 該對象不會被split方法修改
separator 可選項 字符串或者正則表達式對象
limit 可選項 返回數組中的元素個數
把數組中的所有元素放入一個字符串中
形式：
arrayObj.join(separator);
separator 可選項 省略該參數，則使用逗號作為分割符
方法名 用途 改變原數組
pop 刪除最后一個并返回，改變原數組 是
push 向數組末尾添加元素，并返回新的長度 是
unshift 向數組開頭添加元素，并返回新的長度 是
reverse 顛倒數組順序 是
shift 將第一個元素刪除并且返回，空即為undefined 是
splice splice(start,length,item)新增刪除替換數組元素，返回被刪除數組，無刪除不返回 是
sort 對數組排序，改變原數組 是
concat 連接多個數組，返回新的數組 否
join 將數組中所有元素以參數作為分隔符放入一個字符串 否
slice slice(start,end)，返回選定元素 否
split 分割 （字符串操作） 否
什么是Ajax和JSON，它們的優缺點
使用JS寫個原生的Ajax過程
var xhr = new XMLHttpRequest();
Ajax中的get和post請求方式的區別
GET - 從指定的資源請求數據。
POST - 向指定的資源提交要被處理的數據
請求方式 緩存 請求是否保留在瀏覽器歷史記錄 是否可收藏為書簽 長度限制
GET 可被緩存 保留 可收藏 有長度限制
POST 不可被緩存 不保留 不可收藏 無長度限制
如何實現鼠標點擊頁面中的任意標簽，alert該標簽的名稱。注意兼容性
請寫出以下這段JS代碼的輸出結果，并解釋原因。
var num = 100;
var obj = {
num: 200,
inner: {
num: 300,
print: function () {
console.log(this.num);}
}
};
obj.inner.print(); // 300 隱式綁定 調用棧：obj -> inner -> print
var func = obj.inner.print;
func(); // 100 默認綁定 調用棧：window -> func
(obj.inner.print)(); // 300 隱式綁定 調用棧：window -> obj -> inner -> print
(obj.inner.print = obj.inner.print)(); // 100 隱式丟失
DOM事件流包括哪幾個階段？
捕獲階段：事件從document節點自上而下向目標節點傳播的階段
目標階段：真正的目標節點正在處理事件的階段
冒泡階段：事件從目標節點自上而下向Document節點傳播的階段
事件委托的實現原理是什么？有什么優缺點？
什么是原型鏈？什么是作用域鏈？分別有什么作用？
請使用原生JavaScript為以下li實現事件委托，點擊后打印其對應的node-type屬性值。
- 惠普金融
- 愛錢進
- 硅谷中心
已知構造函數A，請實現B函數，需要繼承A
var A = function(name) {
this.name = name;
};A.prototype = {
fun1: function() {},
fun2: function() {}
};請寫出以下這段JS代碼的輸出結果，并解釋原因。
var num = 100;
function print() {
console.log(num);
var num;
}print(); //undefined 閉包
請寫出以下這兩段JS代碼的輸出結果，并分別解釋原因。
// a.js
(function(num){
console.log(num);
var num = 10;
}(100)); // 100?
// b.js
(function(num){
console.log(num);
var num = 10;
function num(){}; // function num() { … } 代碼解析階段
}(100));// JavaScript 中，函數及變量的聲明都將被提升到函數的最頂部。
// JavaScript 中，變量可以在使用后聲明，也就是變量可以先使用再聲明。
// JavaScript 初始化不會提升
其實主要理解 js 的解析機制就行。遇到 script 標簽的話 js 就進行預解析，將變量 var 和 function 聲明提升但不會執行 function，然后就進入上下文執行，上下文執行還是執行預解析同樣操作直到沒有 var 和 function，就開始執行上下文。
什么是函數節流？它有什么作用？請寫一段函數節流的示范代碼？
JS基礎數據類型與引用數據類型有哪些？請根據提示完成以下getType的函數代碼。
Number、String 、Boolean、Null和Undefined。基本數據類型是按值訪問的，因為可以直接操作保存在變量中的實際值。
引用數據類型，也就是對象類型Object type，比如：Function、Object、Date、RegExp、Number、String、Boolean和自定義類等
/*
* 返回變量的具體類型名稱
* @param obj 待判定的變量
*/
function getType(value) {
}, error : function() {}
var a = Object.prototype.toString.call(value).split(" ")[1];
return a.substring(0,a.length-1)
}
編寫有返回的提交表單的AJAX方法？
$.ajax({
type: “POST”,//方法類型
dataType: “json”,//預期服務器返回的數據類型
url: url ,//url
data: data,
success: function (result) {});
請編寫一個JS函數parseQueryString，它的用途是把URL參數解析為一個對象，如：var url = “http://example.cn/index.html?key0=0&key1=1&key2=2”;
function parseQueryString(url) {
var params = {};
var urls = url.split("?");
var arr = urls[1].split("&");
for (var i = 0, l = arr.length; i < l; i++) {
var a = arr[i].split("=");
params[a[0]] = a[1];
}return params;
}
在一個方法中定義變量不寫var會導致什么結果？
Ajax同步和異步的區別？
async值為true （異步）
當ajax發送請求后，在等待server端返回的這個過程中，前臺會繼續 執行ajax塊后面的腳本，直到server端返回正確的結果才會去執行success，也就是說這時候執行的是兩個線程，ajax塊發出請求后一個線程 和ajax塊后面的腳本（另一個線程）async值為false （同步）
當執行當前AJAX的時候會停止執行后面的JS代碼，直到AJAX執行完畢后時，才能繼續執行后面的JS代碼。請寫出以下代碼運行結果：
var obj = {
fullName: “javascript”,
prop: {
getFullName: function () {
return this.fullName;
}
}
};console.log(obj.prop.getFullName()); // undefined
var test = obj.prop.getFullName;// undefined
console.log(test());
請寫出以下代碼運行結果
var name = “window”;
var Tom = {
name: “Tom”,
show: function() {
console.log(this.name);
},
wait: function() {
var fun = this.show;
fun();
}
};Tom.wait(); // undefined
在String對象上定義一個repeatify函數。這個函數接受一個整數參數，來明確字符串需要重復幾次。這個函數要求字符串重復指定的次數。比如：‘abc’.repeatify(3) // abcabcabc
var str = ‘helloworld’;
// 正則匹配輸出’hello[哈哈]world’
javaScript window.onload事件和jQuery ready函數有何不同| window.onload() | $(document).ready()
加載時機 必須等待網頁全部加載完畢（包括圖片等），然后再執行JS代碼 只需要等待網頁中的DOM結構加載完畢，就能執行JS代碼
執行次數 只能執行一次，如果第二次，那么第一次的執行會被覆蓋 可以執行多次，第N次都不會被上一次覆蓋
解釋一下JavaScript的同源策略。你所能了解到的Ajax跨越解決方案以及各種方案的優缺點。
[1,2,3] == [1,2,3] 和 [1,2,3] === [1,2,3]的結果？
寫出以下代碼運行結果var a = 8;
let r = 9;
// 分開考慮下面的結果
let a = r == 9 || 4;
console.log(a); // 標識符已經被聲明
let b = r == 9 || 4;
console.log(b) // true
29.寫出以下代碼運行結果
var data =[];
for (let k = 0; k < 3; k++) {
data[k] = function () {
console.log(k);
};
}data0; // 0
data1; // 1
data2; // 2 若上述for循環中換為var 則輸出為 3 3 3
var arr = [‘a’,‘b’,‘c’,‘d’]，分別寫出delete arr[1]和arr[1] = null操作之后的arr的結果和arr[1]的結果JS中不使用臨時變量將兩個變量的值進行交換。
// es 6 解構
let a = 1,
b = 2;
[a, b] = [b, a];
// 2 數組的特性
b = [a,a=b][0];
// 3 亦或
a ^= b;
b ^= a;
a ^= b;
完成confirmEnding函數，來判斷一個字符串(str)是否以指定的字符串(target)結尾function confirmEnding(str, target) {
}
找出“The quick brown fox jumped over the lazy dog"字符串中最長的單詞，返回該項的內容和長度。
寫出計算一個整數的階乘的方法（定義一個方法編寫）// 遞歸調用
function factorial(n){
return n > 1 ? n * factorial(n-1) : 1;
}factorial(5);//120
按要求進行數組的操作
let arr = [‘html’, ‘css’, ‘js’, ‘vue’, ‘angular’, ‘bootstrap’]
要求輸出結果為：
[‘js’, ‘css’, ‘vue’, ‘html’, ‘angular’, ‘bootstrap’]
談談你對模塊化的理解
寫出下面運行結果var bar = 0;
var obj = {
bar: 1,
foo: function() {
console.log(this.bar);
}
};var obj2 = {
bar: 2,
foo: obj.foo
};var obj3 = {
bar: 3,
foo: function() {
return obj.foo;
}
};var tempFoo = obj2.foo;
obj.foo(); // 1
obj2.foo(); // 2
obj3.foo(); // 0
tempFoo(); // 0
什么是作用域，如何改變作用域？
js只有兩種形式的作用域：全局作用域和函數作用域es6 新增塊級作用域
改變作用域方法：使用apply()方法：使用call()方法： 使用new關鍵字：
寫出下面程序的運行結果
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
});
}
// 輸出十個10 同時
什么是內存泄漏？
不再用到的內存，沒有及時釋放，就叫做內存泄漏
寫一個方法實現對數組進行隨機排序var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
return Math.random() - 0.5;
})console.log(arr);
// 數組去重
[…new Set([2,“12”,2,12,1,2,1,6,12,13,6])]
談一談ES6中的let和箭頭函數有哪些特點？
let 作用于談一談你對ES6的了解
寫一個倒計時程序，要求XXXX年XX月XX日XX時XX分XX秒（動態）
手寫判斷在數組中最大的值，然后讓數組的第一個數跟最大的數相乘，返回最后的結果
// 數組最大值var arr = [ 1,5,1,7,5,9];
Math.max(…arr) // 9
寫出下面程序的運行結果，并解釋原因
var a = ‘aa’;
function foo() {
alert(a);
var b = ‘bb’;
alert(b);
}test();
寫出下面程序的運行結果，并解釋原因
function Foo() {
getName = function() {
alert(1);
}
return this;
}new Foo().getName();
不執行
[‘1’, ‘2’, ‘3’].map(parseInt)的結果為多少? 并解釋原因？如果修改成期望的結果？
[“1”, “2”, “3”].map(parseInt);
// 你可能覺的會是[1, 2, 3]// 但實際的結果是 [1, NaN, NaN]
// 通常使用parseInt時,只需要傳遞一個參數.
// 但實際上,parseInt可以有兩個參數.第二個參數是進制數.
// 可以通過語句"alert(parseInt.length)===2"來驗證.
// map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身.
// 第三個參數parseInt會忽視, 但第二個參數不會,也就是說,
// parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN.
function returnInt(element) {
return parseInt(element, 10);
}[‘1’, ‘2’, ‘3’].map(returnInt); // [1, 2, 3]
// 意料之中的結果
// 也可以使用簡單的箭頭函數，結果同上
[‘1’, ‘2’, ‘3’].map(str => parseInt(str));
// 一個更簡單的方式:
[‘1’, ‘2’, ‘3’].map(Number); // [1, 2, 3]
// 與parseInt 不同，下面的結果會返回浮點數或指數:
[‘1.1’, ‘2.2e2’, ‘3e300’].map(Number); // [1.1, 220, 3e+300]
談談你對promise的理解
閉包是什么？使用閉包實現ul>li點擊，彈出對應的下標？
一個數組中，如何刪除第三個元素？
如何阻止事件的冒泡（考慮兼容性）?
統計字符串中每個字符出現的次數，最多的是誰，出現了幾次？var str = “helloworld”;
let 和 const聲明變量區別是什么，其應用場景有啥不同？
Object.assign()函數的作用和用法，請舉例說明？
深淺拷貝
如何合并兩個對象？Object.assign()
希望獲取到頁面中所有的checkbox怎么做？（不使用第三方庫或者框架）
call和apply的區別？
定義：apply：調用一個對象的一個方法，用另一個對象替換當前對象。例如：B.apply(A, arguments);即A對象應用B對象的方法。
call：調用一個對象的一個方法，用另一個對象替換當前對象。例如：B.call(A, args1,args2);即A對象調用B對象的方法。
共同之處：
都“可以用來代替另一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變為由thisObj指定的新對象”。
不同之處：
apply：最多只能有兩個參數——新this對象和一個數組argArray。如果給該方法傳遞多個參數，則把參數都寫進這個數組里面，當然，即使只有一個參數，也要寫進數組里。如果argArray不是一個有效的數組或arguments對象，那么將導致一個TypeError。如果沒有提供argArray和thisObj任何一個參數，那么Global對象將被用作thisObj，并且無法被傳遞任何參數。
call：它可以接受多個參數，第一個參數與apply一樣，后面則是一串參數列表。這個方法主要用在js對象各方法相互調用的時候，使當前this實例指針保持一致，或者在特殊情況下需要改變this指針。如果沒有提供thisObj參數，那么 Global 對象被用作thisObj。
實際上，apply和call的功能是一樣的，只是傳入的參數列表形式不同。
請分別解釋 filter() , map() , every() , some() , join() 的作用以及區別。
如何將偽數組轉換為數組？
var arr = Array.prototype.slice.call(aLi)var aLi = document.querySelectorAll(‘li’);
3 console.log(aLi.constructor === Array) //false
4
5 aLi.proto = Array.prototype;
6
7 console.log(aLi.constructor === Array) //true
如何實現數組的去重？
CSS&Less&SassCSS引入的方式有哪些？link和@import的區別是？
區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
如何理解CSS盒子模型？
描述CSS reset的作用和用途
CSS3有哪些新特性？
CSS選擇器有哪些？CSS3中新增了哪些？聲明的優先級怎么計算？
p>a, p~a, p+a 有什么區別？
列舉你所知道的偽類和偽元素。偽類和偽元素有什么區別？
偽類包含兩種：狀態偽類和結構性偽類。CSS 偽類用于向某些選擇器添加特殊的效果。
CSS 偽元素用于將特殊的效果添加到某些選擇器。
CSS3中圓角屬性是什么？
border-radius如何顯示沒有下劃線的超鏈接？
text-decoration none用CSS隱藏頁面元素的方法有哪些？
寫一段media query的功能，至少展示不同寬度下一個div的css樣式變化
div和table布局比較？
em和rem的相同點和不同點？
請羅列常見的清除浮動方案。
請羅列移動前端常用的自適應解決方案
手寫三列布局的實現（左右固定，中間自適應）
左定寬，右自適應右幾種方式？
列出position的相關屬性，解釋他們的用法
水平垂直居中的四種方案
box-sizing的內容
說說transition和animation的區別？
CSS3新增哪些動畫特性？
實現不使用border畫出1px高的線，在不同瀏覽器的標準模式和怪異模式不發生改變
請編寫一個動畫，實現一個正方形向左移動100px，并且放大一倍，旋轉45度。
如何將less/Sass轉換成css
HTMLHTML和XHTML有什么區別？
HTML5比HTML4新增了哪些標簽？
HTML5的文檔類型和字符集是？
meta標簽的使用
行內元素有哪些？塊級元素有哪些？空(void)元素有哪些？
HTML5中如何嵌入音頻？
cookie、localStorage、sessionStorage三者優缺點、使用場景。共同點：都是保存在瀏覽器，且同源的。區別：
jQuery請寫出jQuery綁定事件的方法，不少于兩種。
使用加jQuery為DOM元素綁定點擊事件，都有哪些方法？這些方法有什么區別？
jQuery的get/post函數定義如何寫？
如何判斷當前元素內是否有某個class？
Angular簡述AngularJS的技術優勢
VueVue的主線程是什么？
vue的生命周期？
beforeCreatecreated
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
vue數據綁定機制，其雙向數據綁定的原理？
vue-cli搭建項目的好處？
vue-router的搭建注意事項？
如何配置一個vue-router規則，使用戶輸入未配置的路由時跳轉到404頁面。
vue有哪些指令
v-if和v-show的區別
Reactreact的生命周期
setState是在何時調用
Mini Program簡述微信小程序開發的基本流程，在開發時你認為哪些需要注意的
NodeJS&Auto-Buildernpm包管理？
CommonJS與ES6規范的區別
webpack配置
Other用過哪些庫？
優化頁面加載速度的方法
一個頁面上有大量的圖片（如大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗？
針對移動web，如何選擇適合移動端的前端框架，選擇的理由是什么？
簡要敘述web開發如何適配不同的瀏覽器顯示效果？
如果你的筆試題不能得到面試的機會，請給我一個理由說服我你應該得到這個機會。
列舉一項你最近（在項目）中碰到的挑戰，你是如何解決的？
都做過哪些項目，公司有幾個前端，你所擔任的職責是什么？
是否獨立地搭建過項目，如何搭建一個前端項目？
不使用代理服務器，前后臺如何實現聯調？https://www.jianshu.com/u/7e7ee1652bbf
總結
- 上一篇： 响铃：AWE2018只是“草船”，三星已
- 下一篇： 强化学习资源列表