最全BAT前端面試題及答案(二)

41 ajax請求的時候get 和post方式的區(qū)別

一個在url后面 一個放在虛擬載體里面 有大小限制 安全問題 應(yīng)用不同 一個是論壇等只需要請求的,一個是類似修改密碼的

42 call和apply的區(qū)別

Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)

43 ajax請求時,如何解釋json數(shù)據(jù)

使用eval parse 鑒于安全性考慮 使用parse更靠譜

44 閉包是什么,有什么特性,對頁面有什么影響

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

45 如何阻止事件冒泡和默認(rèn)事件

canceBubble return false

46 添加 刪除 替換 插入到某個接點的方法

obj.appendChidl() obj.innersetBefore obj.replaceChild obj.removeChild

47 解釋jsonp的原理,以及為什么不是真正的ajax

動態(tài)創(chuàng)建script標(biāo)簽,回調(diào)函數(shù) Ajax是頁面無刷新請求數(shù)據(jù)操作

48 javascript的本地對象,內(nèi)置對象和宿主對象

本地對象為array obj regexp等可以new實例化 內(nèi)置對象為gload Math 等不可以實例化的 宿主為瀏覽器自帶的document,window 等

49 document load 和document ready的區(qū)別

Document.onload 是在結(jié)構(gòu)和樣式加載完才執(zhí)行js Document.ready原生種沒有這個方法,jquery中有 $().ready(function)

50 ”==”和“===”的不同

前者會自動轉(zhuǎn)換類型 后者不會

51 javascript的同源策略

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性,這里的同一來源指的是主機(jī)名、協(xié)議和端口號的組合

52 編寫一個數(shù)組去重的方法

  function oSort(arr)   {   var result ={};   var newArr=[];   for(var i=0;i<arr.length;i++)   {   if(!result[arr])   {   newArr.push(arr)   result[arr]=1   }   }   return newArr   } </arr.length;i++)

53 你認(rèn)為最常遇到的兼容Bug有哪些?有哪些問題是你認(rèn)為解決起來最麻煩的?

IE6 PNG IE6 Fixed

54 CSS定位方式有哪些?position屬性的值有哪些?他們之間的區(qū)別是什么?

在CSS中關(guān)于定位的內(nèi)容是:position:relative | absolute | static | fixed static 沒有特別的設(shè)定,遵循基本的定位規(guī)定,不能通過z-index進(jìn)行層次分級。 relative 不脫離文檔流,參考自身靜態(tài)位置通過 top,bottom,left,right 定位,并且可以通過z-index進(jìn)行層次分級。 absolute 脫離文檔流,通過 top,bottom,left,right 定位。選53D6其最近的父級定位元素,當(dāng)父級 position 為 static 時,absolute元素將以body坐標(biāo)原點進(jìn)行定位,可以通過z-index進(jìn)行層次分級。 fixed 固定定位,這里他所固定的對像是可視窗口而并非是body或是父級元素??赏ㄟ^z-index進(jìn)行層次分級。

55 函數(shù)的幾種定義方法?

function a(){}, var a = function(){}

56 對象的定義方法?

a = new Object(), a = {}

57 類的定義方法(prototype)(繼承)

Var a = function(){} a.prototype = {} new a();

58 this 關(guān)鍵字的指向

obj.foo() == obj //方法調(diào)用模式,this指向obj foo() == window; //函數(shù)調(diào)用模式,this指向window new obj.foo() == obj //構(gòu)造器調(diào)用模式, this指向新建立對象 foo.call(obj) == obj;//APPLY調(diào)用模式,this指向obj

59 異步ajax的優(yōu)缺點都有什么?

優(yōu)點: 相對于同步ajax:不會造成UI卡死,用戶體驗好。 相對于刷新頁面,省流量 缺點: 后退按鈕無效; 多個請求同時觸發(fā)時,由于回調(diào)時間不確定,會造成混亂,避免這種混亂需要復(fù)雜的判斷機(jī)制。 搜索引擎不友好 數(shù)據(jù)安全

60 介紹js的基本數(shù)據(jù)類型。

number,string,boolean,object,undefined

61 Javascript如何實現(xiàn)繼承?

通過原型和構(gòu)造器

62 如何創(chuàng)建一個對象? (畫出此對象的內(nèi)存圖)

function Person(name, age) { this.name = name; this.age = age; this.sing = function() { alert(this.name) } }

63 談?wù)凾his對象的理解。

this是js的一個關(guān)鍵字,隨著函數(shù)使用場合不同,this的值會發(fā)生變化。但是有一個總原則,那就是this指的是調(diào)用函數(shù)的那個對象。this一般情況下:是全局對象Global。 作為方法調(diào)用,那么this就是指這個對象

64 事件是什么?IE與火狐的事件機(jī)制有什么區(qū)別? 如何阻止冒泡?

(1) 我們在網(wǎng)頁中的某個操作(有的操作對應(yīng)多個事件)。例如:當(dāng)我們點擊一個按鈕就會產(chǎn)生一個事件。是可以被 JavaScript 偵測到的行為。

(2) 事件處理機(jī)制:IE是事件冒泡、火狐是 事件捕獲; (3) ev.stopPropagation();

65 如何判斷一個對象是否屬于某個類?

使用instanceof (待完善) if(a instanceof Person){ alert('yes'); }

66 Javascript中,有一個函數(shù),執(zhí)行時對象查找時,永遠(yuǎn)不會去查找原型,這個函數(shù)是?

hasOwnProperty

67 對JSON 的了解?

  JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小{'age':'12', 'name':'back'}

68 簡述一下src與href的區(qū)別

href 是指向網(wǎng)絡(luò)資源所在位置,建立和當(dāng)前元素(錨點)或當(dāng)前文檔(鏈接)之間的鏈接,用于超鏈接。 src是指向外部資源的位置,指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置;在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi),例如js腳本,img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢,圖片和框架等元素也如此,類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

69 簡述同步和異步的區(qū)別

同步是阻塞模式,異步是非阻塞模式。 同步就是指一個進(jìn)程在執(zhí)行某個請求的時候,若該請求需要一段時間才能返回信息,那么這個進(jìn)程將會一直等待下去,直到收到返回信息才繼續(xù)執(zhí)行下去; 異步是指進(jìn)程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不管其他進(jìn)程的狀態(tài)。當(dāng)有消息返回時系統(tǒng)會通知進(jìn)程進(jìn)行處理,這樣可以提高執(zhí)行的效率。

70 px和em的區(qū)別

px和em都是長度單位,區(qū)別是,px的值是固定的,指定是多少就是多少,計算比較容易。em得值不是固定的,并且em會繼承父級元素的字體大小。 瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

71 什么叫優(yōu)雅降級和漸進(jìn)增強?

漸進(jìn)增強 progressive enhancement: 針對低版本瀏覽器進(jìn)行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。 優(yōu)雅降級 graceful degradation: 一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進(jìn)行兼容。 區(qū)別: a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗的供給 b. 漸進(jìn)增強則是從一個非常基礎(chǔ)的,能夠起作用的版本開始,并不斷擴(kuò)充,以適應(yīng)未來環(huán)境的需要 c. 降級(功能衰減)意味著往回看;而漸進(jìn)增強則意味著朝前看,同時保證其根基處于安全地帶

72 瀏覽器的內(nèi)核分別是什么?

IE: trident內(nèi)核 Firefox:gecko內(nèi)核 Safari:webkit內(nèi)核 Opera:以前是presto內(nèi)核,Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核 Chrome:Blink(基于webkit,Google與Opera Software共同開發(fā))

73 如何消除一個數(shù)組里面重復(fù)的元素?

// 方法一: var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = []; for(var i = 0,len = arr1.length; i< len; i++){ if(arr2.indexOf(arr1[i]) < 0){ arr2.push(arr1[i]); } } document.write(arr2); // 1,2,3,4,5,6

74 在Javascript中什么是偽數(shù)組?如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組?

偽數(shù)組(類數(shù)組):無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為,但仍可以對真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的argument參數(shù),還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數(shù)組??梢允褂肁rray.prototype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對象。 function log(){ var args = Array.prototype.slice.call(arguments);

//為了使用unshift數(shù)組方法,將argument轉(zhuǎn)化為真正的數(shù)組 args.unshift('(app)');

? ? console.log.apply(console, args);

};

75 Javascript中callee和caller的作用?

caller是返回一個對函數(shù)的引用,該函數(shù)調(diào)用了當(dāng)前函數(shù); callee是返回正在被執(zhí)行的function函數(shù),也就是所指定的function對象的正文。

76 請描述一下cookies,sessionStorage和localStorage的區(qū)別

sessionStorage用于本地存儲一個會話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲,除非主動刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會過期的。 web storage和cookie的區(qū)別 Web Storage的概念和cookie相似,區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的,并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去,這樣無形中浪費了帶寬,另外cookie還需要指定作用域,不可以跨域調(diào)用。 除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發(fā)者自己封裝setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是與服務(wù)器進(jìn)行交互,作為HTTP規(guī)范的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。

77 手寫數(shù)組快速排序

關(guān)于快排算法的詳細(xì)說明,可以參考阮一峰老師的文章快速排序 “快速排序”的思想很簡單,整個排序過程只需要三步: (1)在數(shù)據(jù)集之中,選擇一個元素作為”基準(zhǔn)”(pivot)。 (2)所有小于”基準(zhǔn)”的元素,都移到”基準(zhǔn)”的左邊;所有大于”基準(zhǔn)”的元素,都移到”基準(zhǔn)”的右邊。 (3)對”基準(zhǔn)”左邊和右邊的兩個子集,不斷重復(fù)第一步和第二步,直到所有子集只剩下一個元素為止。

78 統(tǒng)計字符串”aaaabbbccccddfgh”中字母個數(shù)或統(tǒng)計最多字母數(shù)。

var str = "aaaabbbccccddfgh";

var obj? = {};

for(var i=0;istr.length;i++){

? ? var v = str.charAt(i);

? ? if(obj[v] & obj[v].value == v){

? ? ? ? obj[v].count = ++ obj[v].count;

? ? }else{

? ? ? ? obj[v] = {};

? ? ? ? obj[v].count = 1;

? ? ? ? obj[v].value = v;

? ? }

}

for(key in obj){

? ? document.write(obj[key].value +'='+obj[key].count+' '); // a=4? b=3? c=4? d=2? f=1? g=1? h=1

}

79 一次完整的HTTP事務(wù)是怎樣的一個過程?

基本流程:

a. 域名解析

b. 發(fā)起TCP的3次握手

c. 建立TCP連接后發(fā)起http請求

d. 服務(wù)器端響應(yīng)http請求,瀏覽器得到html代碼

e. 瀏覽器解析html代碼,并請求html代碼中的資源

f. 瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶

80 對前端工程師這個職位你是怎么樣理解的?

a. 前端是最貼近用戶的程序員,前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分,甚至更好

b. 參與項目,快速高質(zhì)量完成實現(xiàn)效果圖,精確到1px;

c. 與團(tuán)隊成員,UI設(shè)計,產(chǎn)品經(jīng)理的溝通;

d. 做好的頁面結(jié)構(gòu),頁面重構(gòu)和用戶體驗;

e. 處理hack,兼容、寫出優(yōu)美的代碼格式;

f. 針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容