from:http://blog.csdn.net/q121516340/article/details/51332454
1,檢測數組的幾種方式:
Array.isArray(); es5
toString.call([]);//”[object Array]”
var arr=[];
arr.constructor;//Array
instanceof Array
2,傳統事件綁定和符合W3C標准的事件綁定有什么區別?
<div onclick=””>123</div>
div1.onclick=function(){};
符合W3C標准的事件綁定的方式 addEventListener/attachEvent
A、非IE瀏覽器:
addEventListener
1、 如果說給同一個元素綁定了兩次或者多次相同類型的事件,所以的綁定將會依次觸發
2、 支持DOM事件流的
3、 進行事件綁定傳參不需要on前綴
addEventListener(“click”,function(){},true);//此時的事件就是在事件捕獲階段執行
第三個參數:代表是否在捕獲階段執行,默認值是false
addEventListener(“click”,function(e){})
addEventListener(“click”,function(){},false) 事件在冒泡階段執行
B、IE瀏覽器
ie9開始,ie11 edge:addEventListener
ie9以前 ie8:attachEvent/detachEvent
1、 進行事件類型傳參需要帶上on前綴
dom1.attachEvent(“onclick”,functioin(){});
2、 這種方式只支持事件冒泡,不支持事件捕獲
3、IE和標准下有哪些兼容性的寫法
ev = ev || window.event 獲取觸發事件的對象
var target = ev.srcElement||ev.target 獲取事件的源對象
document.documentElement.clientWidth || document.body.clientWidth
4、call和apply的區別
call和apply相同點:
都是為了用一個本不屬於一個對象的方法,讓這個對象去執行
toString.call([],1,2,3)
toString.apply([],[1,2,3])
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
區別:
call第二個參數開始接受一個參數列表
apply第二個參數開始接受一個參數數組
5、Javascript如何實現繼承?
原型鏈繼承,借用構造函數繼承,原型+構造函數組合繼承,寄生式繼承
6、Javascript創建對象的幾種方式?
第一種:對象字面量、Object構造函數
第二種:構造函數
第三種:純構造函數
第四種:空構造函數+原型
第五種:混合構造函數+原型
第六種:動態原型
第七種:寄生構造函數
第八種:Object.create()——ES5 ie9+
以下是寄生構造函數模式:
——其實是工廠模式的變種,只不過是放在其他構造函數中創建對象
代碼如下:
function SpecialArray(){ var values = []; values.push.apply(values, arguments); values.toPipedString = function(){ return this.join("|"); }; return values; } var colors = new SpecialArray("red", "blue", "green"); alert(colors.toPipedString()); //"red|blue|green"
7、JavaScript this指針、閉包、作用域
this:指向調用上下文
閉包:內層作用域可以訪問外層作用域的變量
作用域:定義一個函數就開辟了一個局部作用域,整個js執行環境有一個全局作用域
8、javascript的同源策略
同一來源指的是域名,協議和端口號的組合
協議:http,ftp https
端口名:80:
http協議的默認端口:80
https:協議的默認端口是8083
同源策略帶來的麻煩:ajax在不同域名下的請求無法實現,
如果說想要請求其他來源的js文件,或者json數據,那么可以通過jsonp來解決
JSONP的實現原理:通過動態創建script標簽
9、編寫一個數組去重的方法
[1,3,1,5,2,3,7]=>[1,3,5,2,7]
方法:
1、 先創建一個空數組,用來保存最終的結果
2、 循環原數組中的每個元素
3、 再對新數組對每個元素進行位置查找,判斷是否存在,如果沒有,將把這個元素放到新數組中
4、 返回這個新數組
function(){ var newArr=[]; for(var i=0;i<arr.length;i++){ if(newArr.indexOf(arr[i])==-1){ newArr.push(arr[i]) } } return newArr }
10、JavaScript是一門什么樣的語言,它有哪些特點?
運行環境:瀏覽器中的JS引擎(v8.。。 ff:splidemonkey)
運行在Node.js:v8引擎上
語言特性:面向對象(創建對象的多種方式,繼承的多種方式、原型鏈),動態語言
11、如何檢測數組的數據類型
方法一、判斷其是否具有“數組性質”,如slice()方法。可自己給該變量定義slice方法,故有時會失效
方法二、obj instanceof Array 在某些IE版本中不正確
方法三、toString.call([]);//”[object Array]”
方法四、方法一二皆有漏洞,在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性,最好的方法如下:
if(typeof Array.isArray==="undefined"){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}
12、希望獲取到頁面中所有的checkbox怎么做
var domList = document.getElementsByTagName(‘input’) var checkBoxList = [];//返回的所有的checkbox var len = domList.length; //緩存到局部變量 while (len--) { if (domList[len].type == ‘checkbox’) { checkBoxList.push(domList[len]); } }
13、Javascript的事件流模型都有什么? DOM事件流
“事件冒泡”:事件開始由最具體的元素接受,然后逐級向上傳播
“事件捕捉”:事件由最不具體的節點先接收,然后逐級向下,一直到最具體的
“DOM事件流”:三個階段:事件捕捉,目標階段,事件冒泡
14、看下列代碼輸出為何?解釋原因。
var a; alert(typeof a); // “undefined” //alert(b); // 報錯 b=10; alert(typeof b);//”number”
undefined會在以下三種情況下產生:
a、一個變量定義了卻沒有被賦值
b、想要獲取一個對象上不存在的屬性或者方法:
c、一個數組中沒有被賦值的元素
15、看代碼給答案。
var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value);//2
答案:2(考察引用數據類型細節)
16、var numberArray = [3,6,2,4,1,5]; (考察基礎API)
1) 實現對該數組的倒排,反轉,輸出[5,1,4,2,6,3]
reverse()
2) 實現對該數組的降序排列,輸出[6,5,4,3,2,1]
冒泡排序
17、輸出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,則輸出2014-09-26
var d = new Date(); // 獲取年,getFullYear()返回4位的數字 //今年:2016 var year = d.getFullYear(); // 獲取月,月份比較特殊,0是1月,11是12月 var month = d.getMonth() + 1; // 變成兩位 month = month < 10 ? '0' + month : month; // 獲取日 var day = d.getDate(); day = day < 10 ? '0' + day : day; alert(year + '-' + month + '-' + day);
18、將字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10,{$name}替換成Tony (使用正則表達式)
答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);
19、foo = foo||bar ,這行代碼是什么意思?為什么要這樣寫?
這種寫法稱之為短路表達式
答案:if(!foo) foo = bar; //如果foo存在,值不變,否則把bar的值賦給foo。
短路表達式:作為”&&”和”||”操作符的操作數表達式,這些表達式在進行求值時,只要最終的結果已經可以確定是真或假,求值過程便告終止,這稱之為短路求值。
注意if條件的真假判定,記住以下是false的情況:
空字符串、false、undefined、null、0
20、看下列代碼,將會輸出什么?( 變量聲明提前 )
var foo = 1; function(){ var foo; console.log(foo); //undefined foo = 2; console.log(foo); // 2; }
函數聲明與變量聲明會被JavaScript引擎隱式地提升到當前作用域的頂部,但是只提升名稱不會提升賦值部分。
21、有這樣一個URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,請寫一段JS程序提取URL中的各個GET參數(參數名和參數個數不確定),將其按key-value形式返回到一個json結構中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
22、
a、看下面代碼,給出輸出結果。
for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); };
答案:4 4 4。
原因:setTimeout會在js引擎空閑的時候再執行
JavaScript事件處理器在線程空閑之前不會運行。追問,
b、如何讓a中代碼輸出1 2 3?
for(var i=1;i<=3;i++){ setTimeout((function(a){ //改成立即執行函數 console.log(a); })(i),0); };
23、寫一個function,清除字符串前后的空格。(兼容所有瀏覽器)
使用自帶接口trim(),考慮兼容性:
if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+/, "").replace(/\s+$/,""); //\s匹配空白字符:回車、換行、制表符tab 空格 } } // test the function var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true"
24、Javascript中callee和caller的作用?
arguments.callee:獲得當前函數的引用
caller是返回一個對函數的引用,該函數調用了當前函數;如果不是由其他函數調用的,那么返回值就是null
callee是返回正在被執行的function函數,也就是所指定的function對象的正文。
那么問題來了?
如果一對兔子每月生一對兔子;一對新生兔,從第二個月起就開始生兔子;假定每對兔子都是一雌一雄,試問一對兔子,第n個月能繁殖成多少對兔子?(使用callee完成)
25、Javascript中, 以下哪條語句一定會產生運行錯誤? 答案( BC )
A、var obj=NaN;
B、var 0bj = [];(這里是一個數字0)
C、var obj = //;
D、var obj = {};
26、以下兩個變量a和b,a+b的哪個結果是NaN?答案( C )
A、var a=undefind; b=NaN //拼寫 undefined
B、var a=‘123’; b=NaN //字符串
C、var a =undefined , b =NaN
D、var a=NaN , b='undefined' //”NaNundefined”
27、var a=10; b=20; c=4; ++b+c+a++ 以下哪個結果是正確的?答案( B )
A、34 B、35 C、36 D、37
//21+4+10
28、typeof運算符返回值中有一個跟javascript數據類型不一致,它是function
29、定義了一個變量,但沒有為該變量賦值,如果alert該變量,javascript彈出的對話框中顯示undefined
31、寫出程序運行的結果?
for(i=0, j=0; i<10, j<6; i++, j++){ //終止條件:j=5 i=5 k = i + j;//k=10 } //結果:10
32、閱讀以下代碼,請分析出結果
var arr = new Array(1 ,3 ,5); arr[4]='z';//[1,3,5,undefined,’z’] arr2 = arr.reverse(); //arr2=[’z’,undefined,5,3,1]; //arr=[’z’,undefined,5,3,1] arr3 = arr.concat(arr2); alert(arr3);
彈出提示對話框:z,,5,3,1,z,,5,3,1
33、給一個按鈕綁定點擊事件的函數,確認用戶是否退出當前頁面,確認之后關閉窗口
confirm
window.close()
35、列舉瀏覽器對象模型BOM里常用的至少4個對象,並列舉window對象的常用方法至少5個
對象:window document location screen history navigator
方法:alert() confirm() prompt() open() close()
36、簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
38、簡述創建函數的幾種方式
第一種(函數聲明):
function sum1(num1,num2){
return num1+num2;
}
第二種(函數表達式):
var sum2 = function(num1,num2){
return num1+num2;
}
匿名函數:
function(){}:只能自己執行自己
第三種(函數對象方式):了解
var sum3 = new Function("num1","num2","return num1+num2");
41、documen.write和 innerHTML 的區別?
document.write 只能重繪整個頁面
innerHTML 可以重繪頁面的一部分
42、內存泄露是什么?
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象,並計算引用了每個對象的其他對象的數量。
如果一個對象的引用數量為 0(沒有其他對象引用過該對象),或對該對象的惟一引用是循環的,那么該對象的內存即可回收。
43、判斷一個字符串中出現次數最多的字符,統計這個次數
答:var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){ //str.charAt(i) =”a”
json[str.charAt(i)] = 1; //json[“a”]=1
}else{
json[str.charAt(i)]++; //讓a鍵的值+1,也就是這個字符多出現了一次
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次');
44、寫一個獲取非行間樣式的函數 //內嵌、外聯,行內
function getStyle(obj,attr,value){
if(!value){
if(obj.currentStyle)//ie{
return obj.currentStyle(attr);
}else{//標准瀏覽器
obj.getComputedStyle(attr,false);
}
}else{
obj.style[attr] = value;
}
}
45、解釋jsonp的原理
動態創建script標簽,給請求的地址中添加一個get參數,這個參數代表回調函數,也就是希望服務器處理完我的請求之后,在前端執行這個對調函數
46、javascript的本地對象,內置對象和宿主對象
本地對象為array obj regexp等可以new實例化
Array RegExp String Boolean 。。。
內置對象為global、Math 等不可以實例化的
關於global對象我們無法在瀏覽器中發現她的存在,因為他的屬性和方法都被綁定在了window對象中
每一個宿主對象他的實現都是取決於不同的瀏覽器的,這樣就產生了瀏覽器兼容性問題
宿主為瀏覽器自帶的document,window 等
47、字符串反轉,如將 '12345678' 變成 '87654321'
//大牛做法; //思路:先將字符串轉換為數組 split(),利用數組的反序函數 reverse()顛倒數組,再利用 jion() 轉換為字符串 var str = '12345678'; str = str.split('').reverse().join('');
48、window.location.search返回的是什么?
答:查詢(參數)部分。除了給動態語言賦值以外,我們同樣可以給靜態頁面,並使用javascript來獲得相信應的參數值
返回值:?ver=1.0&id=timlq 也就是問號后面的!
//url:http://www.sina.co//url:http://www.sina.com/getage?number=1&year=2016//url:http://www.sina.com/getage?number=1&year=2016//url:http://www.sina.com/getage?number=1&year=2016m/getage?number=1&year=2016
49、window.location.hash 返回的是什么?
答:錨點 , 返回值:#love ;
//url:http://www.sina.com/getage?#age
這時就返回”#age”
50、window.location.reload() 作用?
答:刷新當前頁面。
51、看題做答:
function f1(){ var tmp = 1; this.x = 3;
console.log(tmp); console.log(this.x); } var obj = new f1(); console.log(obj.x) //3 console.log(f1()); //1 undefined
52、下面輸出多少?
var o1 = new Object(); var o2 = o1; o2.name = "CSSer"; console.log(o1.name); //”CSSer”
54、觀看代碼,有什么輸出
var a = 6; setTimeout(function () { var a = 666;//由於變量a是一個局部變量 alert(a); // 輸出666, }, 0); a = 66; console.log(a); //先打印全局變量a的值:66 再執行setTimeout里面的局部變量
因為var a = 666;定義了局部變量a,並且賦值為666,根據變量作用域鏈,
全局變量處在作用域末端,優先訪問了局部變量,從而覆蓋了全局變量 。
57、觀察以下代碼的輸出
window.color = 'red'; var o = {color: 'blue'}; function sayColor(){ alert(this.color); } 考點:1、this的指向 2、call的用法 sayColor(); //red sayColor.call(this); //red this指向的是window對象 sayColor.call(window); //red sayColor.call(o); //blue
58、結果是什么?
function foo(){ foo.a = function(){alert(1)}; this.a = function(){alert(2)}; //obj.a a = function(){alert(3)}; var a = function(){alert(4)}; }; foo.prototype.a = function(){alert(5)}; foo.a = function(){alert(6)}; foo.a(); //6 var obj = new foo(); obj.a(); //2 foo.a(); //1
59、分析代碼結果
var a = 5; function test(){ var a; a = 0; alert(a); alert(this.a); //沒有定義 a這個屬性 alert(a) } test(); // 0, 5, 0 var obj=new test(); // 0, undefined, 0 //由於類它自身沒有屬性a, 所以是undefined
60、結果是
var bool = !!2; alert(bool);//true;
技巧:雙向非操作可以把字符串和數字轉換為布爾值。
61、匹配輸入的字符:第一個必須是字母或下划線開頭,后面就是字母和數字或者下划線構成,長度5-20
var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/
62、BOM對象有哪些,列舉window對象?
1、window對象 ,是JS的最頂層對象,其他的BOM對象都是window對象的屬性;
2、document對象,文檔對象;
3、location對象,瀏覽器當前URL信息;
4、navigator對象,瀏覽器本身信息;
5、screen對象,客戶端屏幕信息;
6、history對象,瀏覽器訪問歷史信息;
63、JS中的簡單繼承
——>call方法!
//頂一個父母類,注意:類名都是首字母大寫的哦! function Parent(name, money){ this.name = name; this.money = money; this.info = function(){ alert('姓名: '+this.name+' 錢: '+ this.money); } } //定義孩子類 function Children(name){ Parent.call(this, name); //繼承 姓名屬性,不要錢。 this.info = function(){ alert('姓名: '+this.name); } } //實例化類 var per = new Parent('parent', 800000000000); var chi = new Children('child'); per.info(); chi.info();
64、bind(), live(), delegate()的區別
bind: 綁定事件,對新添加的事件不起作用,方法用於將一個處理程序附加到每個匹配元素的事件上並返回jQuery對象。
live: 方法將一個事件處理程序附加到與當前選擇器匹配的所有元素(包含現有的或將來添加的)的指定事件上並返回jQuery對象。
delegate: 方法基於一組特定的根元素將處理程序附加到匹配選擇器的所有元素(現有的或將來的)的一個或多個事件上。
最佳實現:jquery 1.7之后:就推薦使用on() off()
65、簡述link和import的區別?
區別1:link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬於CSS范疇,只能加載CSS。
區別2:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。
區別3:link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
區別4:link支持使用Javascript控制DOM去改變樣式;而@import不支持。
66、看下列代碼輸出什么?
var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo); //“number” 執行完后foo的值為111,foo的類型為Number。
68、你如何優化自己的代碼?
代碼重用:聲明函數把整個過程封裝起來;把他們弄成一些對象
避免全局變量(命名空間,封閉空間,模塊化mvc..) AngularJS
拆分函數避免函數過於臃腫:單一職責原則:條理更加清晰,更好的維護
適當的注釋,尤其是一些復雜的業務邏輯或者是計算邏輯,都應該寫出這個業務邏輯的具體過程
內存管理,尤其是閉包中的變量釋放
變量的命名規范:尤其是在實際項目中
$div:代表一個jquery對象
dom:代表一個原生的dom對象
希望一個函數是構造函數:函數的首字母都要大寫
變量一定要語義化:
70、請將一個URL的search部分參數與值轉換成一個json對象
//search部分的參數格式:a=1&b=2&c=3 function getJsonFromUrlSearch(search){ var item; var result={}; if(search.indexOf('&')<0){ item=search.split('='); result[item[0]]=item[1]; return result; } var splitArray=search.split('&'); for (var i = 0; i < splitArray.length; i++) { var obj = splitArray[i]; item=obj.split('='); result[item[0]]=item[1]; } return result; } var c=getJsonFromUrlSearch("a=1&b=2&c=3");
71、請用原生js實現jquery的get\post功能,以及跨域情況下
ajax
先創建一個HttpRequest()
再設置他的請求頭:請求的數據類型:json/xml
再設置他的onreadstatechange
最后再提交這個請求
72、請簡要描述web前端性能需要考慮哪方面,你的優化思路是什么?
//參見雅虎14web優化規則
//0、減少http請求:
//1、小圖弄成大圖(雪碧圖、精靈圖),
//2、合理的設置緩存 localStorage cookie
//3、資源合並、壓縮 html代碼的最小化,壓縮體積:就是減少帶寬
//4、一些小的js文件合並成大的js文件
//5、將外部的js文件置底
73、簡述readyonly與disabled的區別
readonly只針對input(text / password)和textarea有效,
而disabled對於所有的表單元素都有效,當表單元素在使用了disabled后,當我們將表單以POST或GET的方式提交的話,這個元素的值不會被傳遞出去,而readonly會將該值傳遞出去
74、請盡可能詳盡的解釋ajax的工作原理
思路:先解釋異步,再解釋ajax如何使用
異步是為了進行局部刷新,提升用戶體驗
2005 年誕生ajax
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求,從服務器獲得數據,然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支持異步請求的技術。簡單的說,也就是javascript可以及時向服務器提出請求和處理響應,而不阻塞用戶。達到無刷新的效果。
75、為什么擴展javascript內置對象不是好的做法?
因為擴展內置對象會影響整個程序中所使用到的該內置對象的原型屬性
//如果說是整個項目中都適用的功能,那么可以進行擴展
76、什么是三元表達式?“三元”表示什么意思?
? :
因為運算符會涉及3個表達式
var a=3>2?5:2;
77、module(12,5)//2 實現滿足這個結果的module函數
function module(a,b){
return a%b;//return a/b;
}
78、HTTP協議中,GET和POST有什么區別?分別適用什么場景 ?
get傳送的數據長度有限制,post沒有
get通過url傳遞,在瀏覽器地址欄可見,post是在報文中傳遞
適用場景:
post一般用於表單提交
get一般用於簡單的數據查詢,嚴格要求不是那么高的場景
79、HTTP狀態消息200 302 304 403 404 500分別表示什么
200:請求已成功,請求所希望的響應頭或數據體將隨此響應返回。
302:請求的資源臨時從不同的 URI響應請求。由於這樣的重定向是臨時的,客戶端應當繼續向原有地址發送以后的請求。只有在Cache-Control或Expires中進行了指定的情況下,這個響應才是可緩存的
304:如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許,而文檔的內容(自上次訪問以來或者根據請求的條件)並沒有改變,則服務器應當返回這個狀態碼。304響應禁止包含消息體,因此始終以消息頭后的第一個空行結尾。
403:服務器已經理解請求,但是拒絕執行它。
404:請求失敗,請求所希望得到的資源未被在服務器上發現。
500:服務器遇到了一個未曾預料的狀況,導致了它無法完成對請求的處理。一般來說,這個問題都會在服務器端的源代碼出現錯誤時出現。
80、HTTP協議中,header信息里面,怎么控制頁面失效時間(last-modified,cache-control,Expires分別代表什么)
Last-Modified |
文 檔的最后改動時間。客戶可以通過If-Modified-Since請求頭提供一個日期,該請求將被視為一個條件GET,只有改動時間遲於指定時間的文檔 才會返回,否則返回一個304(Not Modified)狀態。Last-Modified也可用setDateHeader方法來設置。 |
Expires |
應該在什么時候認為文檔已經過期,從而不再緩存它? |
81、請列舉js數組類型中的常用方法
方法 |
描述 |
連接兩個或更多的數組,並返回結果。 |
|
把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。 |
|
刪除並返回數組的最后一個元素 |
|
向數組的末尾添加一個或更多元素,並返回新的長度。 |
|
顛倒數組中元素的順序。 |
|
刪除並返回數組的第一個元素 |
|
從某個已有的數組返回選定的元素 |
|
對數組的元素進行排序 |
|
刪除元素,並向數組添加新元素。 |
|
返回該對象的源代碼。 |
|
把數組轉換為字符串,並返回結果。 |
|
把數組轉換為本地數組,並返回結果。 |
|
向數組的開頭添加一個或更多元素,並返回新的長度。 |
|
返回數組對象的原始值 |
82、列舉常用的js框架以及分別適用的領域
jquery:簡化了js的一些操作,並且提供了一些非常好用的API
jquery ui、jquery-easyui:在jqeury的基礎上提供了一些常用的組件 日期,下拉框,表格這些組件
require.js、sea.js(阿里的玉帛)+》模塊化開發使用的
jquery mobile:是jquery自己出的支持移動端網頁開發,不過非常笨重,但是功能非常強大
zepto:精簡版的jquery,常用於手機web前端開發 提供了一些手機頁面實用功能,touch
ext.js:跟jquery差不多,但是不開源,也沒有jquery輕量
angular、knockoutjs、avalon(去哪兒前端總監,作者:司徒正美):MV*框架,適合用於單頁應用開發(SPA)
83、如何獲取對象a擁有的所有屬性(可枚舉的、不可枚舉的,不包括繼承來的屬性)
Object.keys——IE9+ ES5
或者使用for…in並過濾出繼承的屬性
for(o in obj){
if(obj.hasOwnproperty(o)){//判斷o不是繼承來的屬性
//把o這個屬性放入到一個數組中
}
}
84、下面這段代碼想要循環昝輸出結果01234,請問輸出結果是否正確,如果不正確,請說明為什么,並修改循環內的代碼使其輸出正確結果
for(var i=0;i<5;++i){
setTimeout(function(){
console.log(i+’’);
},100*i);
}
85、解釋下這個css選擇器什么發生什么?
[role=nav]>ul a:not([href^-mailto]){}
86、描述錯誤的是 D
A:Http狀態碼302表示暫時性轉移 對
B:domContentLoaded事件早於onload事件 //正確
當 onload 事件觸發時,頁面上所有的DOM,樣式表,腳本,圖片,flash都已經加載完成了。
當 DOMContentLoaded 事件觸發時,僅當DOM加載完成,不包括樣式表,圖片,flash。
C: IE678不支持事件捕獲
D:localStorage 存儲的數據在電腦重啟后丟失 //錯誤,因為沒有時間限制
87、關於link和@import的區別正確的是 AB
A: link屬於XHTML標簽,而@import是CSS提供的;
B:頁面被加載時,link會同時被加載,而后者引用的CSS會等到頁面被加載完再加載
C:import只在IE5以上才能識別 而link是XHTML標簽,無兼容問題
D: link方式的樣式的權重高於@import的權重
import誕生於CSS2.1規范,任何支持CSS2.1以上版本的瀏覽器都支持Import
link方式的樣式跟import沒有權重高低這么個說法,只有書寫順序的不同才會決定樣式
88、變量的命名規范以及命名推薦
89、三種彈窗的單詞以及三種彈窗的功能
alert
confirm
prompt
91、寫一個post請求並帶有發送數據和返回數據的樣例
$.ajax({
url:"1.html",
data:{name:"張三",age:18},//post數據
dataType:"json",
type:"POST",
success:function(data){
//data:返回的數據
},
error:function(){
//異常處理
}
});
90、jQuery框架中$.ajax()的常用參數有哪些?
type
類型:String
默認值: "GET")。請求方式 ("POST" 或 "GET"), 默認為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。
url
類型:String
默認值: 當前頁地址。發送請求的地址。
success
類型:Function
請求成功后的回調函數。
參數:由服務器返回,並根據 dataType 參數進行處理后的數據;描述狀態的字符串。
這是一個 Ajax 事件。
options
類型:Object
可選。AJAX 請求設置。所有選項都是可選的。
async
類型:Boolean
默認值: true。默認設置下,所有請求均為異步請求。如果需要發送同步請求,請將此選項設置為 false。
注意,同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執行。
beforeSend(XHR)
類型:Function
發送請求前可修改 XMLHttpRequest 對象的函數,如添加自定義 HTTP 頭。
XMLHttpRequest 對象是唯一的參數。
這是一個 Ajax 事件。如果返回 false 可以取消本次 ajax 請求。
cache
類型:Boolean
默認值: true,dataType 為 script 和 jsonp 時默認為 false。設置為 false 將不緩存此頁面。
jQuery 1.2 新功能。
contentType
類型:String
默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。
默認值適合大多數情況。如果你明確地傳遞了一個 content-type 給 $.ajax() 那么它必定會發送給服務器(即使沒有數據要發送)。
data
類型:String
發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為Key/Value 格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
dataFilter
類型:Function
給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數:data 是 Ajax 返回的原始數據,type 是調用 jQuery.ajax 時提供的dataType 參數。函數返回的值將由 jQuery 進一步處理。
dataType
類型:String
預期服務器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷,比如 XML MIME 類型就被識別為 XML。在 1.4中,JSON 就會生成一個 JavaScript 對象,而 script 則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后,傳遞給回調函數。可用值:
· "xml": 返回 XML 文檔,可用 jQuery 處理。
· "html": 返回純文本 HTML 信息;包含的 script 標簽會在插入 dom 時執行。
· "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意:在遠程請求時(不在同一個域下),所有 POST 請求都將轉為 GET 請求。(因為將使用 DOM 的 script標簽來加載)
· "json": 返回 JSON 數據 。
· "jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名,以執行回調函數。
· "text": 返回純文本字符串
error
類型:Function
默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。
有以下三個參數:XMLHttpRequest 對象、錯誤信息、(可選)捕獲的異常對象。
如果發生了錯誤,錯誤信息(第二個參數)除了得到 null 之外,還可能是 "timeout", "error", "notmodified" 和 "parsererror"。
這是一個 Ajax 事件。
92、閉包:下面這個ul,如何點擊每一列的時候alert其index?
<ul id="test">
<li>這是第一條</li>
<li>這是第二條</li>
<li>這是第三條</li>
</ul>
//非閉包實現
var lis=document.querySelectorAll('li');
document.querySelector('#test').onclick=function(e){
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
if(li==e.target){
alert(i);
}
}
};
//閉包實現
var lis=document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.onclick=(function(index){
return function(e){
alert(index);
};
})(i);
}
93、Javascript中callee和caller的作用?
caller是返回一個對函數的引用,該函數調用了當前函數;
用法:fn.caller
callee是返回正在被執行的function函數,也就是所指定的function對象的正文。
用法:arguments.callee
94、在Javascript中什么是偽數組?如何將偽數組轉化為標准數組?
偽數組(類數組):無法直接調用數組方法或期望length屬性有什么特殊的行為,但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數,還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於偽數組。
可以使用Array.prototype.slice.call(fakeArray)將數組轉化為真正的Array對象。
95、《正則》寫出正確的正則表達式匹配固話號,區號3-4位,第一位為0,中橫線,7-8位數字,中橫線,3-4位分機號格式的固話號
常用正則表達式語法要熟悉
/0[0-9]{2,3}-\d{7,8}/ 010 021 020 025 028 0755:深圳
96、請寫出一個程序,在頁面加載完成后動態創建一個form表單,並在里面添加一個input對象並給它任意賦值后義post方式提交到:http://127.0.0.1/save.php
97、下面代碼會有什么樣的輸出
var User = { 對象
count = 1,屬性
getCount:function(){ 方法
return this.count;
}
}
console.log(User.getCount());
var func = User.getCount;
console.log(func());
答案:1 undefined
98、下面代碼的輸出:
(function test(){
var a=b=5; //b是一個隱式的全局變量
alert(typeof a);
alert(typeof b);
})();
alert(typeof a);
alert(typeof b);
//number number undefined number
99、下列JavaScript代碼執行后,iNum的值是
var iNum = 0;
for(var i = 1; i< 10; i++){
if(i % 5 == 0){
continue;
}
iNum++;
}
分析:
i=1 1
i=2 2
i=3 3
i=4 4
i=5
i=6 5
i=7 6
i=8 7
i=9 8
100、輸出結果是多少?
1)
var a;
var b = a * 0;
if (b == b) {
console.log(b * 2 + "2" - 0 + 4);
} else {//b=NaN
console.log(!b * 2 + "2" - 0 + 4); //1*2+”2”-0+4
}
答案:26
考點:乘號運算符的運算規則:
1、 如果其中一個數是NaN,則結果就是NaN
2、如果乘積超過了ECMAScript設定的范圍,那么就會返回Infinity、-Infinity
3、如果參與乘法運算的某個操作數不是數值,js引擎會先調用Number()將這個數變成一個數值類型,
比如:空字符串就會變成0 布爾值true就會變成1,空數組[]也會變成0,undefined轉換結果則是變成了NaN
101、以下代碼會有什么輸出
<script>
var a = 1;
</script>
<script>
var a;
var b = a * 0;
if (b == b) { //b=0
console.log(b * 2 + "2" - 0 + 4); //0*2+”2”-0+4
} else {
console.log(!b * 2 + "2" - 0 + 4);
}
</script>
答案:6
102、觀察輸出結果
var t = 10;
function test(t){
var t = t++;//此時的t是一個局部變量,全局變量沒有任何變化
console.log(t);//此時的結果又是多少?
}
test(t);
console.log(t);
答案:10
103、輸出結果:
var t = 10;
function test(test){
var t = test++;
}test(t);
console.log(t);
答案:10
104、輸出結果:
var t = 10;
function test(test){
t = test++;//這一步全局變量t的值等於改變前的test的值
}test(t);
console.log(t);
答案:10
105、輸出結果:
var t = 10;
function test(test){
t = t + test;//undefined+10=NaN
console.log(t);
var t = 3;
}test(t);
console.log(t);
答案:NaN 10
106、輸出結果:
var a;
var b = a / 0;
if (b == b) {//b=NaN
console.log(!b * 2 + "2" - 0 + 4);
} else {
console.log(!b * 2 + "2" - 0 + 4);
}
答案:26
107:、輸出結果:
<script>
var a = 1;
</script>
<script>
var a;
var b = a / 0;
if (b == b) { //b=Infinity
console.log(b * 2 + "2" + 4);
} else {
console.log(!b * 2 + "2" + 4);
}
</script>
答案:Infinity24
108、下列JavaScript代碼執行后,運行的結果是
<button id='btn'>點擊我</button>
var btn = document.getElementById('btn');
var handler = {
id: '_eventHandler',
exec: function(){
alert(this.id);
}
}
btn.addEventListener('click', handler.exec);
答案:btn,因為handler.exec是由btn這個按鈕執行的
109、☆☆☆下列JavaScript代碼執行后,依次alert的結果是
var obj = {proto: {a:1,b:2}};
function F(){};
F.prototype = obj.proto;
var f = new F();
obj.proto.c = 3;
obj.proto = {a:-1, b:-2};
alert(f.a);//1
alert(f.c);//3
delete F.prototype['a'];
alert(f.a);//undefined
alert(obj.proto.a);//-1
110、下列JavaScript代碼執行后的效果是
<ul id='list'>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
var items = document.querySelectorAll('#list>li');
for(var i = 0;i < items.length; i++){
setTimeout(function(){
items[i].style.backgroundColor = '#fee';
}, 5);
}
答案:異常
111、程序中捕獲異常的方法?
window.error=function(){};
try{}catch(){}finally{}
112、給字符串擴展一個兼容所有瀏覽器的清除前后的空格的方法
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
} }
113、下列控制台都輸出什么
function setName(){
name="張三";
}
setName();
console.log(name);
答案:"張三"
114、
//考點:1、變量聲明提升 2、變量搜索機制
var a=1;
function test(){
console.log(a);
var a=1;
}
test();
答案:undefined
115、
var b=2;
function test2(){
window.b=3;
console.log(b);
}
test2();
答案:3
116、
c=5;//聲明一個全局變量c
function test3(){
window.c=3;
console.log(c); //答案:undefined,原因:由於此時的c是一個局部變量c,並且沒有被賦值
var c;
console.log(window.c);//答案:3,原因:這里的c就是一個全局變量c
}
test3();
117:
var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[10] = 'c';
alert(arr.length); //答案:11
console.log(arr[5]); //答案:undefined
118:
var a=1;
console.log(a++); //答案:1
console.log(++a); //答案:3
119:
console.log(null==undefined); //答案:true
console.log("1"==1); //答案:true,因為會將數字1先轉換為字符串1
console.log("1"===1); //答案:false,因為數據類型不一致
120、
parseInt(3.14); //3
parseFloat("3asdf"); //3
parseInt("1.23abc456");
parseInt(true);// "true"=> NaN
//對一個非數字或者一個非字符串類型進行數據轉換的時候,會先把這個數據轉換為一個字符串類型,然后再轉換為數值類型
考點:考察非數字轉換為整數的熟練度
121、
//考點:函數聲明提前
function bar() {
return foo;
foo = 10;
function foo() {}
//var foo = 11;
}
alert(typeof bar());//"function"
122、
考點:函數聲明提前
var foo = 1;
function bar() {
foo = 10;
return;
function foo() {}
}
bar();
alert(foo);//答案:1
123、
console.log(a);//是一個函數
var a = 3;
function a(){}
console.log(a);////3
124、
//考點:對arguments的操作
function foo(a) {
arguments[0] = 2;
alert(a);//答案:2,因為:a、arguments是對實參的訪問,b、通過arguments[i]可以修改指定實參的值
}
foo(1);
125、
function foo(a) {
alert(arguments.length);//答案:3,因為arguments是對實參的訪問
}
foo(1, 2, 3);
126、
bar();//報錯 因為bar這個名稱只能在函數內部被訪問
var foo = function bar(name) {
console.log("hello"+name);
console.log(bar);
};
//alert(typeof bar);
foo("world");//"hello"
console.log(bar);//undefined
console.log(foo.toString());
bar();//報錯
127、
function test(){
console.log("test函數");
}
setTimeout(function(){
console.log("定時器回調函數");
}, 0)
test();
function foo(){
var name="hello";
}
128、jQuery 的 slideUp動畫 ,如果目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯后的反復執行,該如何處理呢?
先stop(true,true)后slideUp()
示例代碼參考:J:\代碼,PPT,筆記,電子書\面試題\面試題_jquery_slideup.html
關於stop()參考:J:\代碼,PPT,筆記,電子書\面試題\面試題_jquery.png
129、Ajax 是什么? 如何創建一個Ajax?
Ajax並不算是一種新的技術,全稱是asynchronous javascript and xml,可以說是已有技術的組合,主要用來實現客戶端與服務器端的異步通信效果,實現頁面的局部刷新,早期的瀏覽器並不能原生支持ajax,可以使用隱藏幀(iframe)方式變相實現異步效果,后來的瀏覽器提供了對ajax的原生支持
使用ajax原生方式發送請求主要通過XMLHttpRequest(標准瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通信效果
基本步驟:
var xhr =null;//創建對象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”標志位”);//初始化請求
xhr.setRequestHeader(“”,””);//設置http頭信息
xhr.onreadystatechange =function(){}//指定回調函數
xhr.send();//發送請求
130、同步和異步的區別?
同步:阻塞的
-張三叫李四去吃飯,李四一直忙得不停,張三一直等着,直到李四忙完兩個人一塊去吃飯
=瀏覽器向服務器請求數據,服務器比較忙,瀏覽器一直等着(頁面白屏),直到服務器返回數據,瀏覽器才能顯示頁面
異步:非阻塞的
-張三叫李四去吃飯,李四在忙,張三說了一聲然后自己就去吃飯了,李四忙完后自己去吃
=瀏覽器向服務器請求數據,服務器比較忙,瀏覽器可以自如的干原來的事情(顯示頁面),服務器返回數據的時候通知瀏覽器一聲,瀏覽器把返回的數據再渲染到頁面,局部更新
131、GET和POST的區別,何時使用POST?
GET:一般用於信息獲取,使用URL傳遞參數,對所發送信息的數量也有限制,一般在2000個字符,有的瀏覽器是8000個字符
POST:一般用於修改服務器上的資源,對所發送的信息沒有限制
在以下情況中,請使用 POST 請求:
1. 無法使用緩存文件(更新服務器上的文件或數據庫)
2. 向服務器發送大量數據(POST 沒有數據量限制)
3. 發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠
132、ajax的缺點
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節。
3、對搜索引擎的支持比較弱。//不會執行你的js腳本,只會操作你的網頁源代碼
4、破壞了程序的異常機制。
5、無法跨域請求,解決方式:jsonp
133、http常見的狀態碼有那些?分別代表是什么意思?
200 OK //客戶端請求成功
400 Bad Request //客戶端請求有語法錯誤,不能被服務器所理解
403 Forbidden //服務器收到請求,但是拒絕提供服務
404 Not Found //請求資源不存在,輸入了錯誤的URL
500 Internal Server Error //服務器發生不可預期的錯誤
503 Server Unavailable //服務器當前不能處理客戶端的請求,一段時間后可能恢復正常
134、嚴格模式
鏈接:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html
全局變量顯式聲明
靜態綁定
禁止使用with語句
eval中定義的變量都是局部變量
禁止this關鍵字指向全局對象
禁止在函數內部遍歷調用棧 arguments.callee
嚴格模式下無法刪除變量。只有configurable設置為true的對象屬性,才能被刪除
正常模式下,對一個對象的只讀屬性進行賦值,不會報錯,只會默默地失敗。嚴格模式下,將報錯。
嚴格模式下,對一個使用getter方法讀取的屬性進行賦值,會報錯。
嚴格模式下,對禁止擴展的對象添加新屬性,會報錯。
嚴格模式下,刪除一個不可刪除的屬性,會報錯。
正常模式下,如果對象有多個重名屬性,最后賦值的那個屬性會覆蓋前面的值。嚴格模式下,這屬於語法錯誤。
正常模式下,如果函數有多個重名的參數,可以用arguments[i]讀取。嚴格模式下,這屬於語法錯誤。
正常模式下,整數的第一位如果是0,表示這是八進制數,比如0100等於十進制的64。嚴格模式禁止這種表示法,整數第一位為0,將報錯。
不允許對arguments賦值
arguments不再追蹤參數的變化
禁止使用arguments.callee
嚴格模式只允許在全局作用域或函數作用域的頂層聲明函數。也就是說,不允許在非函數的代碼塊內聲明函數
if else while for 無法聲明函數
嚴格模式新增了一些保留字:implements, interface, let, package, private, protected, public, static, yield。
135、new操作符具體干了什么呢?
1、創建一個空對象,並且 this 變量引用該對象,同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用,並且最后隱式的返回 this 。
136、模塊化開發怎么做?
理解模塊化開發模式:瀏覽器端requirejs,seajs;服務器端nodejs;ES6模塊化;fis、webpack等前端整體模塊化解決方案;grunt、gulp等前端工作流的使用
137、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)規范區別?
理解這兩種規范的差異,主要通過requirejs與seajs的對比,理解模塊的定義與引用方式
的差異以及這兩種規范的設計原則
參考鏈接1:https://www.zhihu.com/question/20351507/answer/14859415
參考鏈接2:https://github.com/seajs/seajs/issues/277
1、對於依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。CMD 推崇 as lazy as possible.
2、CMD 推崇依賴就近,AMD 推崇依賴前置。
3. AMD 的 API 默認是一個當多個用,CMD 的 API 嚴格區分,推崇職責單一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,沒有全局 require,而是根據模塊系統的完備性,提供 seajs.use 來實現模塊系統的加載啟動。CMD 里,每個 API 都簡單純粹。
138、requireJS的核心原理是什么?(如何動態加載的?如何避免多次加載的?如何 緩存的?)
核心是js的加載模塊,通過正則匹配模塊以及模塊的依賴關系,保證文件加載的先后順序,根據文件的路徑對加載過的文件做了緩存
139、談一談你對ECMAScript6的了解?
ES6新的語法糖,類,模塊化等新特性
關於ES6參考鏈接:http://es6.ruanyifeng.com/
2. let和const命令
3. 變量的解構賦值
4. 字符串的擴展
5. 正則的擴展
6. 數值的擴展
7. 數組的擴展
8. 函數的擴展
9. 對象的擴展
10. Symbol
11. Proxy和Reflect
12. 二進制數組
15. Generator函數
16. Promise對象
17. 異步操作和Async函數
18. Class
19. Decorator
20. Module
140、javascript對象的幾種創建方式?
1. 工廠模式
2. 構造函數模式
3. 原型模式
4. 混合構造函數和原型模式
5. 動態原型模式
6. 寄生構造函數模式
7. 穩妥構造函數模式
141、javascript繼承的 6 種方法?
1. 原型鏈繼承
2. 借用構造函數繼承
3. 組合繼承(原型+借用構造)
4. 原型式繼承
5. 寄生式繼承
6. 寄生組合式繼承
142、JavaScript 原型,原型鏈 ? 有什么特點?
1. 原型對象也是普通的對象,是對象一個自帶隱式的 __proto__ 屬性,原型也有可能有自己的原型,如果一個原型對象的原型不為 null 的話,我們就稱之為原型鏈
2. 原型鏈是由一些用來繼承和共享屬性的對象組成的(有限的)對象鏈
143、簡述一下你對web性能優化的方案?
1、盡量減少 HTTP 請求
2、使用瀏覽器緩存
3、使用壓縮組件
4、圖片、JS的預載入
5、將腳本放在底部
6、將樣式文件放在頁面頂部
7、使用外部的JS和CSS
8、精簡代碼
144、模塊化怎么做?
1、 使用字面量實現命名空間(YUI):
Itcast.common.dom={};
Itcast.common.css={};
Itcast.common.event={};
2、使用閉包
立即執行函數,不暴露私有成員
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();