題目1: 下面的代碼輸出多少勇皇？修改代碼讓 fnArr[i]() 輸出 i。使用 兩種以上的方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //'10'
//方法一
var fnArr = [];
for (var i = 0; i < 10; i ++) {
(function(i){
fnArr[i] = function(){
return i;
};
})(i)
}
console.log( fnArr[3]() );
//方法二
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = (function(i){
return function () {
return i;
};
})(i);
}
console.log( fnArr[3]() );
//方法三
var fnArr = [];
for (let i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() );
題目2： 封裝一個汽車對象焚刺，可以通過如下方式獲取汽車狀態(tài)
var Car = (function(){
var speed = 0;
function setSpeed(s){
return speed = s;
}
function getSpeed() {
return speed;
}
function accelerate() {
return speed += 10;
}
function decelerate() {
return speed > 0 ? speed -= 10 : speed;
}
function getStatus() {
return speed > 0 ? 'running':'stop';
}
return {
"setSpeed": setSpeed,
"getSpeed": getSpeed,
"accelerate": accelerate,
"decelerate": decelerate,
"getStatus": getStatus
}
})();
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus(); //'stop';
//Car.speed; //error
題目3：下面這段代碼輸出結果是? 為什么?
var a = 1;
setTimeout(function(){
a = 2;
console.log(a);//‘2’,setTimeout指定的代碼，必須等到本次執(zhí)行的所有代碼都執(zhí)行完门烂，才會執(zhí)行
}, 0);
var a ;
console.log(a);//'1'
a = 3;
console.log(a);//'3'
題目4：下面這段代碼輸出結果是? 為什么?
var flag = true;
setTimeout(function(){//等到本次執(zhí)行的所有代碼都執(zhí)行完乳愉，才會執(zhí)行
flag = false;
},0)
while(flag){}//首先執(zhí)行，此時setTimeout未執(zhí)行屯远，flag恒為true蔓姚，因此這一句會無限循環(huán)
console.log(flag);//因為上一句代碼無限循環(huán)，所以這一句不會執(zhí)行
題目5： 下面這段代碼輸出慨丐？如何輸出 delayer: 0, delayer:1...（使用閉包來實現(xiàn)）
for(var i=0;i<5;i++){
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
console.log(i);
}
輸出：
0
1
2
3
4
delayer:5
delayer:5
delayer:5
delayer:5
delayer:5
使用閉包實現(xiàn)輸出delayer: 0, delayer:1...：
for(var i=0;i<5;i++){
setTimeout((function(i){
return function () {
console.log('delayer:' + i );
}
})(i), 0);
console.log(i);
}
或
for(var i=0;i<5;i++){
(function (i) {
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
})(i);
console.log(i);
}
題目6： 如何獲取元素的真實寬高
- clientWidth和clientHeight
這組屬性可以獲取元素可視區(qū)的大小坡脐，可以得到元素內(nèi)容及內(nèi)邊距所占據(jù)的空間大小。返回了元素大小房揭，但沒有單位备闲，默認單位是px，如果你強行設置了單位捅暴，比如100em之類恬砂，它還是會返回px的大小。(CSS獲取的話蓬痒，是照著你設置的樣式獲取)泻骤。對于元素的實際大小，clientWidth和clientHeight理解方式如下：
a. 增加邊框梧奢，無變化狱掂；
b. 增加外邊距，無變化亲轨；
c. 增加滾動條趋惨，最終值等于原本大小減去滾動條的大小瓶埋；
d. 增加內(nèi)邊距希柿，最終值等于原本大小加上內(nèi)邊距的大小养筒；<div id="test"></div> #test{ background-color: green; width: 200px; height: 200px; border: solid 5px red; /* 對應a理解曾撤，結果：200,200 */ margin: 10px; /* 對應b理解，結果：200,200*/ padding: 20px; /* 對應c理解晕粪，結果：240,240*/ overflow: scroll; /* 對應d理解挤悉，結果：223,223，>223=200（css大形紫妗）+40（兩邊內(nèi)邊距）-17（滾動條寬度）*/ } window.onload = function(){ var obj = document.getElementById("test"); alert(obj.clientWidth + "," + obj.clientHeight); };如果沒有設置任何CSS的寬和高度装悲，那么非IE瀏覽器會算上滾動條和內(nèi)邊距的計算后的大小昏鹃，而IE瀏覽器則返回0（IE8已修復）
- scrollWidth和scrollHeight
這組屬性可以獲取滾動內(nèi)容(可見內(nèi)容)的元素大小。返回了元素大小诀诊，默認單位是px洞渤。如果沒有設置任何CSS的寬和高度，它會得到計算后的寬度和高度属瓣。對于元素的實際大小载迄，scrollWidth和scrollHeight理解如下:
①.增加邊框，不同瀏覽器有不同解釋（下面在IE8中運行正常抡蛙，IE6運行不正常）：
a. Firefox和Opera瀏覽器會增加邊框的大小护昧，220x220
b. IE、Chrome和Safari瀏覽器會忽略邊框大小粗截，200x200
c. IE瀏覽器只顯示它本來內(nèi)容的高度惋耙，200x18（IE8已經(jīng)修改該問題）
②.增加內(nèi)邊距，最終值會等于原本大小加上內(nèi)邊距大小熊昌，220x220绽榛，IE為220x38。
③. 增加滾動條浴捆，最終值會等于原本大小減去滾動條大小蒜田，184x184，IE為184x18
④. 增加外邊據(jù)选泻，無變化冲粤。
⑤. 增加內(nèi)容溢出，F(xiàn)irefox页眯、Chrome和IE獲取實際內(nèi)容高度梯捕，Opera比前三個瀏覽器獲取的高度偏小，Safari比前三個瀏覽器獲取的高度偏大窝撵。- offsetWidth和offsetHeight
這組屬性可以返回元素實際大小傀顾，包含邊框、內(nèi)邊距和滾動條碌奉。返回了元素大小短曾，默認單位是px。如果沒有設置任何CSS的寬和高度赐劣，他會得到計算后的寬度和高度嫉拐。對于元素的實際大小，offsetWidth和offsetHeight理解如下：
①.增加邊框魁兼，最終值會等于原本大小加上邊框大小婉徘，為220；
②.增加內(nèi)邊距，最終值會等于原本大小加上內(nèi)邊距大小盖呼，為220儒鹿；
③.增加外邊據(jù)，無變化几晤；
④.增加滾動條约炎，無變化，不會減行否章钾；
對于元素大小的獲取，一般是塊級(block)元素并且以設置了CSS大小的元素較為方便热芹。如果是內(nèi)聯(lián)元素(inline)或者沒有設置大小的元素就尤為麻煩<div id="test">test div element</div> #test{ background-color: green; width: 200px; height: 200px; border: solid 10px red; /*結果：220,220*/ margin: 10px; /*結果：220,220（無變化）*/ padding: 10px; /*結果：240,240*/ overflow：scroll; /*結果：240,240（無變化）*/ } window.onload = function(){ var obj = document.getElementById("test"); alert(obj.offsetWidth + "," + obj.offsetHeight); };
題目7： URL 如何編碼解碼？為什么要編碼惨撇？
- url為什么要編碼伊脓？
URL 是可移植的（portable）。它要統(tǒng)一地命名因特網(wǎng)上所有的資源魁衙，這也就意味著要通過各種不同的協(xié)議來傳送這些資源报腔。這些協(xié)議在傳輸數(shù)據(jù)時都會使用不同的機制，所以剖淀，設計 URL纯蛾，使其可以通過任意因特網(wǎng)協(xié)議安全地傳輸是很重要的。
安全傳輸意味著 URL 的傳輸不能丟失信息纵隔。有些協(xié)議翻诉，比如傳輸電子郵件的簡單郵件傳輸協(xié)議（Simple Mail Transfer Protocol，SMTP）捌刮，所使用的傳輸方法就會剝?nèi)ヒ恍┨囟ǖ淖址龌汀榱吮荛_這些問題，URL 只能使用一些相對較小的绅作、通用的安全字母表中的字符芦圾。
除了希望 URL 可以被所有因特網(wǎng)協(xié)議進行傳送之外，設計者們還希望URL也可供人類閱讀读第。因此海蔽，即使不可見锻全、不可打印的字符能夠穿過郵件程序，從而成為可移植的夜焦，也不能在 URL 中使用。
URL 還得是完整的役拴，這就使問題變得更加復雜了糊探。URL 的設計者們認識到有時人們可能會希望 URL 中包含除通用的安全字母表之外的二進制數(shù)據(jù)或字符。因此，需要有一種轉(zhuǎn)義機制科平，能夠?qū)⒉话踩淖址幋a為安全字符褥紫，再進行傳輸。
- URL如何編碼解碼瞪慧？
JavaScript提供四個URL的編碼/解碼方法髓考。
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
區(qū)別
encodeURI方法不會對下列字符編碼
ASCII字母
數(shù)字
~!@#$&*()=:/,;?+'
encodeURIComponent方法不會對下列字符編碼
ASCII字母
數(shù)字
~!*()'
所以encodeURIComponent比encodeURI編碼的范圍更大。
encodeURIComponent會把http://編碼成http%3A%2F%2F弃酌，而encodeURI卻不會氨菇。
如果需要編碼整個URL，然后需要使用這個URL妓湘，那么用encodeURI查蓉。
其中，空格被編碼成了%20榜贴。但是如果用了encodeURIComponent豌研，那么結果變?yōu)?encodeURI("http://www.cnblogs.com/season-huang/some other thing"); //"http://www.cnblogs.com/season-huang/some%20other%20thing";
當需要編碼URL中的參數(shù)的時候，那么encodeURIComponent是最好方法唬党。"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"var param = "http://www.cnblogs.com/season-huang/"; //param為參數(shù)param = encodeURIComponent(param); var url = "http://www.cnblogs.com?next=" + param; console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"
題目8： 補全如下函數(shù)鹃共，判斷用戶的瀏覽器類型
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
function isIphone(){
return /Iphone/.test(navigator.userAgent);
}
function isIpad(){
return /Ipad/.test(navigator.userAgent);
}
function isIOS(){
return /(Ipad)|(Iphone)/.test(navigator.userAgent);
}
