當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端面试必考题

發布時間：2024/3/13 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了前端面试必考题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

type = typeof a // 結果為undefined Boolean Number String Object2.instanceof c instanceof Array3.根據對象的 constructor c.constructor === Array // 繼承的時候會出錯4.prototype 原型鏈方式 alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true; alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true; alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true; alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true; alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true; alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

描述下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();

xhr.open(url);xhr.send();

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) {
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) {
}, error : function() {}
});
請編寫一個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&Sass

CSS引入的方式有哪些？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
HTML

HTML和XHTML有什么區別？
HTML5比HTML4新增了哪些標簽？
HTML5的文檔類型和字符集是？
meta標簽的使用
行內元素有哪些？塊級元素有哪些？空(void)元素有哪些？
HTML5中如何嵌入音頻？
cookie、localStorage、sessionStorage三者優缺點、使用場景。共同點：都是保存在瀏覽器，且同源的。區別：
jQuery

請寫出jQuery綁定事件的方法，不少于兩種。
使用加jQuery為DOM元素綁定點擊事件，都有哪些方法？這些方法有什么區別？
jQuery的get/post函數定義如何寫？
如何判斷當前元素內是否有某個class？
Angular

簡述AngularJS的技術優勢
Vue

Vue的主線程是什么？
vue的生命周期？
beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

vue數據綁定機制，其雙向數據綁定的原理？
vue-cli搭建項目的好處？
vue-router的搭建注意事項？
如何配置一個vue-router規則，使用戶輸入未配置的路由時跳轉到404頁面。
vue有哪些指令
v-if和v-show的區別
React

react的生命周期
setState是在何時調用
Mini Program

簡述微信小程序開發的基本流程，在開發時你認為哪些需要注意的
NodeJS&Auto-Builder

npm包管理？
CommonJS與ES6規范的區別
webpack配置
Other

用過哪些庫？
優化頁面加載速度的方法
一個頁面上有大量的圖片（如大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗？
針對移動web，如何選擇適合移動端的前端框架，選擇的理由是什么？
簡要敘述web開發如何適配不同的瀏覽器顯示效果？
如果你的筆試題不能得到面試的機會，請給我一個理由說服我你應該得到這個機會。
列舉一項你最近（在項目）中碰到的挑戰，你是如何解決的？
都做過哪些項目，公司有幾個前端，你所擔任的職責是什么？
是否獨立地搭建過項目，如何搭建一個前端項目？
不使用代理服務器，前后臺如何實現聯調？

https://www.jianshu.com/u/7e7ee1652bbf

總結

以上是生活随笔為你收集整理的前端面试必考题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

考题

上一篇：响铃：AWE2018只是“草船”，三星已
下一篇：强化学习资源列表