1. 程式人生 > >前端面試之JS

前端面試之JS

javascript部分

(1):簡要的描述JavaScript 中的作用域鏈
任何一段JavaScript程式碼都對應一個作用域鏈,作用域鏈中存放一系列物件,程式碼中宣告的變數將作為物件的屬性存放。 在JavaScript的頂層程式碼中,作用域鏈由一個全域性物件組成;當定義一個函式
時,它儲存一個作用域鏈,作用域鏈上有兩個物件,一個是函式物件,一個是全域性物件。 每當一個函式被呼叫時,會建立一個活動物件(也叫上下文物件),函式中的區域性變數將作為該物件的屬性存放。 當需要使用一個變數時,將從作用域鏈中逐個查詢物件的屬性。比如:要使用變數a,將先查詢作用域中的第一個物件是否有屬性a,如果有就使用;如果沒有就查詢作用域鏈中 下一個物件的屬性,以此類推。如果作用域鏈上沒有任何一個物件含有屬性x,則認為這段程式碼的作用域鏈上不存在x,將丟擲引用錯誤異常。 當函式呼叫完成後,如果沒有其他引用指向為此次呼叫所建立的上下文物件,該物件將被回收。

(2)簡述JavaScript中建立自定義物件的方式
自定義物件(user-defined object)指由使用者建立物件,相容性問題需要由編寫者注意。建立自定義物件的方式有:
1>物件直接量
2>new Object()
3> function物件模板
4> Object.create()

(3)javaScript中,this關鍵字的作用是什麼?
籠統的說,關鍵字this指向當前的物件。比如,頂級程式碼中的this指向全域性物件,在指定元素事件的時候,this指定當前發生事件的元素物件,對於巢狀函式,如果巢狀函式作為方法被呼叫,其this指向呼叫他的物件;如果作為函式呼叫,this是全域性物件或者為undefined(嚴格模式下)

(4)簡要描述javaScript中的匿名函式
匿名函式指的是在定義時沒有指定名字的函式,且定義後往往直接呼叫。如這裡寫圖片描述
這種方式所定義的匿名函式,往往需要直接呼叫
這裡寫圖片描述
匿名函式常用於定義不需要重複使用的函式,用完即釋放。另外,對於直接呼叫的匿名函式而言,可以看成是一個臨時的名稱空間,其區域內定義的所有變數,不會汙染到全域性名稱空間

(5):什麼是正則表示式?在JavaScript中,如何應用正則表示式?
正則表示式(Regular Expression) 本身就是一個字串,由一些普通字元和特殊字元組成的,用以描述一種特定的字元規則的表示式。 正則表示式常用於在一段文字中搜索、匹配或替換特定形式的文字。如:詞語出現頻率統計、驗證字串是否符合郵箱格式、遮蔽一篇帖子中的限制性詞語等。許多程式設計語言都支援利用正則表示式進行字串操作。 在JavaScript 中,正則表示式的應用分為兩種: 1、結合String 物件的replace、search和match方法,實現對字串的替
換、查詢和匹配;
2、定義正則表示式物件,實現對字串的複雜匹配操作.

(6):編寫函式,實現對身份證號碼最後一位的驗證
二代身份證號碼為18位,其最後一位(第18位)的計算方法為: 將前面的身份證號碼17位數分別乘以不同的係數。從第一位到第十七位的係數分別為: 7-9-10-5-8-4-2-1-6-3-7-9-10-5-8-4-2
將 這17位數字和係數相乘的結果相加 3、用加出來和除以11,看餘數是多少? 4、餘數只可能有0-
1-2-3-4-5-6-7-8-9-10這11個數字。每個數字所對應的最後一位身份證的號碼為:1-0-X-9-8-7-6-5-4-3-2。即,如果餘數是2,就會在身份證的第18位數字上出現羅馬數字的X。如果餘數是10,身份證的最後一位號碼就是2。 例如:某男性的身份證號碼是34052419800101001X。驗證其最後一位是否正確時,首先需要得出前17位的乘積和是189,然後用189除以11得出的結果是17+2/11,也就是說其餘數是2。最後通過對應規則就可以知道餘數2對應的數字是x。所以,可以判定此身份證號碼的最後一位是合格的。

這裡寫圖片描述

(7):編寫函式,實現氣泡排序
這裡寫圖片描述

(8):簡要描述JavaScript中定義函式的幾種方式
JavaScript中有3中定義函式的方式
1,函式語句:即使用function關鍵字顯示定義函式。如:
function f(x){
return x+1;
}

2,函式定義表示式:也稱為“函式直接量”。形如:
var f=function(x){
return x+1;
}

3,使用Function()建構函式式定義

(9)簡述arguments 物件的作用
在函式程式碼中,使用特殊物件arguments可以訪問函式的引數。即,開發者在定義函式時,無需明確的為方法宣告引數,也可以在方法體中使用arguments 來訪問引數。這是因為,arguments 是一種特殊物件,在函式程式碼中,表示函式的引數陣列。 正因為arguments 表示引數組成的陣列,因此,首先可以使用arguments.length檢測函式的引數個數,其次,可以通過下標(arguments[index])來訪問某個引數。這樣,可以用arguments 物件判斷傳遞給函式的引數個數並獲取引數,適用於函式引數無法確定個數的情況下。

(10):什麼是“邏輯短路”?
邏輯短路是對於邏輯運算而言,是指,僅計算邏輯表示式中的一部分便能確定結果,而不對整個表示式進行計算的現象。 對於“&&”運算子,當第一個運算元為false時,將不會判斷第二個運算元,因為此時無論第二個運算元為何,最後的運算結果一定是false; 對於“||”運算子,當第一個運算元為true時,將不會判斷第二個運算元,因為此時無論第二個運算元為何,最後的運算結果一定是true。

(11):列舉幾個JavaScript中常用的全域性函式,並描述其作用
JavaScript 中常用的全域性函式及其作用如下: parseInt:解析一個字串並返回一個整數; 2. parseFloat:解析一個字串並返回一個浮點數; 3. isNaN:檢查某個值是否是數字,返回true 或者false; 4. encodeURI :把字串作為URI 進行編碼; 5. decodeURI :對encodeURI() 函式編碼過的URI 進行解碼; 6. eval:計算某個字串,以得到結果,或者用於執行其中JavaScript 程式碼。

(12):解釋一下javaScript中區域性變數與全域性變數的區別
全域性變數擁有全域性作用域,在JavaScript 程式碼的任何地方都可以訪問;在函式內宣告的變數只在函式體內有定義,即為區域性變數,其作用域是區域性性的。 需要注意的是,在函式體內宣告區域性變數時,如果不使用var 關鍵字,則將宣告全域性變數。

(13):簡要描述JavaScript 的資料型別?

JavaScript 的資料型別可以分為原始型別和物件型別。 原始型別包括string、number 和boolean 三種。其中,字串是使用一對單引號或者一對雙引號括起來的任意文字;而數值型別都採用64
位浮點格式儲存,不區分整數和小數;布林(邏輯)只能有兩個值:true 或false。 複雜型別指其他物件,如Array、Date、Object 等。 除此之外,JavaScript中還有兩個特殊的原始值:null(空)和undefined(未定義),它們代表了各自特殊型別的唯一成員。

(14):如何動態的操作表格?
可以象普通dom一樣操作,但是因為表格的dom比較複雜,所以我通常是使用table的insertRow、deleteRow及tr物件的insetCell、deleteCell操作

(15):String.match與RegExp.exec有何區別?
這2個函式都是從指定的字串中提取符合條件的字串
1、正則表示式為非全域性檢索時,2者是等價的
返回符合條件的第一個子串以及對應的分組(如果存在存在)構成的偽陣列:第一個元素是匹配的字串,餘下的為匹配的分組。
偽陣列包含2個屬性:
input 返回要檢索的字串
index 返回匹配的子串在字串的位置,在非全域性檢索時始終為0
2、正則表示式為全域性檢索時,2者的處理機制和返回結構不同
exec處理機制
當正則表示式為全域性檢索時,exec會記錄每次匹配開始、結束的位置。匹配結束位置儲存在正則表示式的lastIndex中,匹配開始位置儲存在結果的index中。當exec繼續被呼叫時,正則表示式會從lastIndex進行新的匹配,並返回新的符合條件的子串及分組,並更新正則表示式的lastIndex。重複這樣的操作,直到全部匹配完(exec返回null)。此時正則表示式的lastIndex為0。
match處理機制
match在要匹配的正則表示式為全域性檢索時,會直接返回字串中符合條件的子串陣列(不包含分組,即使存在
總的來說
match只會返回沒有分組的全部匹配結果或者有分組的第一次匹配結果; 而exec可以利用迴圈返回全部匹配結果

(16):正則的i標記與g標記各有何用途?
i:不區分大小寫;g:全域性匹配,如果沒有此標記,正則不會第二個之後的結果

(17):為String新增trim()方法

String.prototype.trim = function() {  return this.replace(/^ +| +$/g,"");  }

(18):簡述COOKIE。在JS中如何操作Cookie?
概念
Cookie 可以翻譯為“小甜品,小餅乾” ,Cookie 在網路系統中幾乎無處不在,當我們瀏覽以前訪問過的網站時,網頁中可能會出現 :你好 XXX,這會讓我們感覺很親切,就好像吃了一個小甜品一樣。這其實是通過訪問主機中的一個檔案來實現的,這個檔案就是 Cookie。一般網路使用者習慣用其複數形式 Cookies。
Cookie指某些網站為了辨別使用者身份、進行 session 跟蹤而儲存在使用者本地終端上的資料(通常經過加密)。
在預設情況下,Cookie是臨時存在的。在一個瀏覽器視窗開啟時,可以設定Cookie,只要該瀏覽器視窗沒有關閉,Cookie就一直有效,在其有效期內,當用戶訪問同一個 Web 伺服器時,瀏覽器首先要檢查本地的Cookies,並將其原樣傳送給 Web 伺服器。這種狀態資訊稱作“Persistent Client State HTTP Cookie” ,簡稱為 Cookies。
而一旦瀏覽器視窗關閉後,Cookie也就隨之消失。如果想要Cookie在瀏覽器視窗之後還能繼續使用,就需要為Cookie設定一個生存期。所謂生存期也就是Cookie的終止日期,在這個終止日期到達之前,瀏覽器都可以讀取該Cookie。一旦終止日期到達之後,該Cookie將會從Cookie檔案中刪除。
一個網站可以建立多個Cookie,不同的Cookie可以擁有不同的值,例如將使用者名稱和密碼存在Cookie中,就可能用到兩個Cookie,一個用來存放使用者名稱,一個用來存放密碼,使用Document的Cookie屬性可以用來設定與讀取Cookie。
JS如何操作Cookie
使用Document的Cookie屬性可以用來設定與讀取Cookie。Cookie是以鍵值對的形式儲存的,即key=value的格式。各個Cookie之間一般是以“;”分隔。
新增一個cookie

<script language="javascript' type="text/javascript">

function   addCookie(name,value,expiresHours){

var  cookieString=name+"="+escape(value);

//判斷是否設定過期時間,0代表關閉瀏覽器時失效

if(expiresHours>0){

var  date=newDate();

date.setTime(date.getTime+expiresHours*3600*1000);

cookieString=cookieString+"; expires="+date.toGMTString();

}

document.cookie=cookieString;

}

</script>

根據指定名稱的Cookie修改Cookie的值

<script language="javascript"  type="text/javascript">

function  editCookie(name,value,expiresHours){

var  cookieString=name+"="+escape(value);

//判斷是否設定過期時間,0代表關閉瀏覽器時失效

if(expiresHours>0){

var  date=newDate();

date.setTime(date.getTime+expiresHours*3600*1000);//單位是多少小時後失效

cookieString=cookieString+"; expires="+date.toGMTString();

}

document.cookie=cookieString;

}

</script>

獲取指定名稱的cookie值

<script language="javascript" type="text/javascript">

function   getCookie(name){

var   strCookie=document.cookie;

var   arrCookie=strCookie.split("; ");

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

var  arr=arrCookie[i].split("=");

if(arr[0]==name){

returnunescape(arr[1]);

}else{

return"";

}

}

}

</script>

刪除指定名稱的cookie

<script language="javascript"  type="text/javascript">

function   deleteCookie(name){

var  date=newDate();

date.setTime(date.getTime()-10000);//設定一個過去的時間即可

document.cookie=name+"=v; expires="+date.toGMTString();

}

</script>

(19):談談innerHTML outerHTML innerText之間的區別。
innerHTML是w3c的html dom定義的方法,而後兩者是IE獨有的方法; innerHTML代表一個元素節點內由所有子節點,不包括當前節點組成的html程式碼;
outerHTML代表一個元素節點內由所有子節點和當前節點組成的html程式碼;
innerText代表一個元素節點內由所有子文字節點內容組成的文字;

(20):談談innerHTML、nodeValue 與textContent之間的區別
innerHTML屬性讀取或設定節點起始和結束標籤中的HTML內容;
nodeValue 屬性讀取或設定指定節點的文字內容,適用於文字型別的節點;

(21):你在js中用過array嗎?如果用過,array中新增資料用什麼方法
用過。
在尾部新增使用push();
在頭部新增使用unshift();
在任意位置新增使用splice(),但要注意把它的刪除個數設定為0。

(22):簡述javascript的優缺點。
優點:簡單易用,與Java有類似的語法,可以使用任何文字編輯工具 編寫, 只需要瀏覽器就可執行程式,並且事先不用編譯,逐行執行,無需進行嚴格的變數宣告,而且內建大量現成物件,編寫少量程式可以完成目標;
缺點:不適合開發大型應用程式;

(23)Javascript有哪些內建物件?
只有Math和Global(在瀏覽器環境中,Global就是Window)

(24):列舉Javascript的本地物件。

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError 、RangeError、ReferenceError、SyntaxError、TypeError、URIError

(25):什麼是Ajax?
客戶端向伺服器端傳送請求,而無需重新整理頁面的技術 Ajax包含的技術 * HTML、CSS、JavaScript、XML和XMLHttpRequest等

(26):解釋XMLHttpRequest是什麼?
XMLHttpRequest 物件用於在後臺與伺服器交換資料。
XMLHttpRequest 物件是開發者的夢想,因為您能夠:
在不重新載入頁面的情況下更新網頁
在頁面已載入後從伺服器請求資料
在頁面已載入後從伺服器接收資料
在後臺向伺服器傳送資料
所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 物件。
通過一行簡單的 JavaScript 程式碼,我們就可以建立 XMLHttpRequest 物件
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 物件:

(27):談談你對Ajax的理解。你在專案中如何使用Ajax?
Ajax(Asynchronous JavaScript + XML),即非同步JavaScript + XML的縮寫,主要用來頁面非同步重新整理,也是構建RIA(Rich Internet Application,富網際網路應用系統)【技術允許我們在因特網上以一種像使用Web一樣簡單的方式來部署富客戶端程式。這是一個使用者介面,它比用HTML能實現的介面更加健壯、反應更加靈敏和更具有令人感興趣的視覺化特性。無論將來RIA是否能夠如人們所猜測的那樣完全代替HTML應用系統,對於那些採用胖客戶端技術運行復雜應用系統的機構來說,RIA確實提供了一種廉價的選擇。】的一種基礎技術。 因為它涉及瀏覽器相容、跨域等問題,在專案中一般會使用一些基礎類庫輔助實現,如jQuery等。

(28):談談你對JSON的理解
JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。 易於 人閱讀和編寫。同時也易於機器解析和生成。 它基於JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個子集。 JSON採用完全獨立於語言的文字格式,但是也使用了類似於C語言家族的習慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 這些特性使JSON成為理想的資料交換語言。 所以它往往在AJAX中替代XML,交換資料。

(29):你的專案中有使用到跨域嗎?你在專案中是如何處理JS跨域問題的?
有。 一個網站,主要是使用其它網站提供的javascrip api如QQ。使用script的src可以直接讀取跨域資源。 當然跨域還有其它處理方式:如代理伺服器、改變domain、JSONP等。

(30):你在專案中有使用到網頁到伺服器的即時通訊嗎?說說你都採用什麼手段處理以及你所知道的處理辦法?
沒有用到,但我知道html的websockets、flash的socket、ajax長輪詢等都可以實現。

(31):你在AJAX中有遇到亂碼嗎?如果遇到,你是如何解決的?
遇到過。 一般我首先統一頁面和伺服器編碼,對請求和響應的Content-Type設定正確編碼;對請求引數進行編碼處理。

(32):你使用過jQuery嗎?如果有,你為什麼要使用jQuery呢?
用過。 如果使用原生javascript開發的話,會面臨很多問題,如瀏覽器相容、Ajax資料解析、Dom、事件註冊操作等都非常煩鎖,而jQuery正好解決了這些問題。
當然jQuery還有非常有用的其它特性,如為dom物件繫結資料、動畫、等。並且jQuery還非常容易擴充套件,在它的基礎上開發非常靈活,也有眾多的外掛可用,如jQueryUI、easyUI等

(33):在jQuery中如何註冊事件?
使用bind()方法註冊事件,但通常我們使用與事件同名的方法註冊更方便,

如:click()、hover()等。

(34):如何獲取Html內容?如何獲取文字內容?如何獲取屬性值?如何獲取input值?如何建立新的節點?
可以使用html()獲取html內容。 使用text()獲取文字內容。 使用attr()可以獲取屬性值,使用css()可以獲取樣式屬性值。 通過val()便可以獲取input的值
把節點元素名加上<、>作為引數呼叫jQuery方法便可建立新節點,如:jQuery(“<div>”)。

(35):ajax、get、post、ajaxSetup、getJSON各有何用途?
ajax:jQuery對ajax執行的核心方法。其它ajax方法都是使用該方法實現。
get:專門用於傳送get請求的便捷方法。
post:專門用於傳送post請求的便捷方法。
ajaxSetup:設定呼叫ajax方法時的黑認值。
getJSON:專門用於向伺服器請求json格式資料的便捷方法。

(36):如何使用從伺服器獲取一個複雜資料(物件)?
通常會把這個資料轉換為通用的資料交換格式,如xml或json。由於xml解析比較麻煩,所以使用json比較多。
在jQuery中有專門的獲取伺服器json資料的方法,getJSON(),在回撥中,jQuery會自動將json轉換為javascript物件

(37):DOM操作中,如何獲取元素的屬性值?
對於元素節點,獲取其某屬性的值有多種方式,如下所示:
1、element.attributes[下標].value
2、element.attributes[‘屬性名’].value
3、element.getAttributeNode(‘屬性名’).value
4、element.getAttribute(‘屬性名’)

(38):簡要描述DOM操作中查詢元素的方式
通過HTML 中的資訊選取元素,比如:
a) getElementById()方法:根據元素的id 屬性值查詢單個節點;
b) getElementsByTagName()方法:根據元素標籤的名稱查詢點;
c) getElementsByName()方法:根據元素name 屬性的值查詢點。
2、通過CSS 類選取元素
a) getElementsByClassName(‘className’)方法:根據class名稱選取元素;
b) querySelector(‘selector’)和querySelectorAll(‘selector’)方法:根據CSS 選擇器選取元素。
3、通過document 物件選取,如document.all、document.body等;
4、通過節點遍歷選取節點,如parentNode、firstChild等。

(39):例舉3種強制型別轉換和2種隱式型別轉換?
強制(parseInt,parseFloat,number)
隱式(== - ===)

(40):IE和DOM事件流的區別
1.執行順序不一樣、
2.引數不一樣
3.事件加不加on
4.this指向問題

(41):IE和標準下有哪些相容性的寫法

Var ev = ev || window.event 
 document.documentElement.clientWidth || document.body.clientWidth  Var target = ev.srcElement||ev.target

(42):JavaScript原型,原型鏈 ? 有什麼特點?
原型(prototype):儲存所有子物件共有成員的物件
原型鏈:由各級物件的proto逐級向上引用形成的多級繼承關係
特點:1.原型和原型鏈是JS實現繼承的一種模型。
2.原型鏈的形成是真正是靠proto 而非prototype

(43):null,undefined 的區別?
Null: 這是一個物件,但是為空。因為是物件,所以 typeof null 返回 ‘object’ 。
Undefined: undefined是全域性物件(window)的一個特殊屬性,其值是未定義的。

(44):Node.js的適用場景?
高併發、聊天、實時訊息推送

(45):[“1”, “2”, “3”].map(parseInt) 答案是多少?
[1,NaN,NaN]
[“1”,”2”,”3”].map(function (){ console.log(arguments) })
[“1”, 0, Array[3]]
[“2”, 1, Array[3]]
[“3”, 2, Array[3]]
然後看 parseInt
parseInt(string, radix);
parseInt() 函式將給定的字串以指定基數(radix/base)解析成為整數。就是 你想把string當成radix進位制數解析成10進位制
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt
radix傳入0時會把1當成是10進位制數,所以“1”成功了。
radix傳入1時…沒有1進位制數,所以不可能轉換成功,返回NaN
radix傳入2時,”3”不能當作2進位制數處理所以也返回NaN

(46):事件是?IE與火狐的事件機制有什麼區別? 如何阻止冒泡?
1. 我們在網頁中的某個操作(有的操作對應多個事件)。例如:當我們點選一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
2. 事件處理機制:IE是事件冒泡、火狐是 事件捕獲;
3. ev.stopPropagation();

(47):Javascript中,有一個函式,執行時物件查詢時,永遠不會去查詢原型,這個函式是?
hasOwnProperty

(48):jquery 中如何將陣列轉化為json字串,然後再轉化回來?


 jQuery中沒有提供這個功能,所以你需要先編寫兩個jQuery的擴充套件:     $.fn.stringifyArray = function(array) {        
  return JSON.stringify(array)   
   }  
    $.fn.parseArray = function(array) { 
        return JSON.parse(array)     }        然後呼叫:      $("").stringifyArray(array)

(49):如何編寫高效能的Javascript?
1使用 DocumentFragment 優化多次 append
2通過模板元素 clone ,替代 createElement
3使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素
4使用三目運算子替代條件分支
5需要不斷執行的時候,優先考慮使用 setInterval …….

(50):什麼是web worker?為什麼我們需要他們?
Web worker幫助我們用非同步執行javascript檔案;
Web worker執行緒的限制是什麼?
Web worker執行緒不能修改HTML元素,你可以自由使用javascript資料型別。
如何在javascript中建立一個worker執行緒?
var worker=new Worker(... .js);
如何終止web worker?
W.terminate(); //terminate(終止);

(51):.body中的onload()函式和jQuery中的$(document).ready()有什麼區別
onload()和document.ready()的區別如下: 可以在頁面中使用多個document.ready(),但只能使用一次onload(); document.ready()函式在頁面DOM元素載入完成以後就會被呼叫,而onload()函式則要在所有的關聯資源(包括影象,音訊)載入完畢才會呼叫。