途牛前端工程師在線筆試題（含答案和全面解析）

時間 2019-11-08

標籤前端工程師在線筆試答案全面解析欄目快樂工作简体版

原文原文鏈接

途牛前端工程師在線筆試題

知識點列表：

字符串轉數字css
Math對象方法：round() pow() floor() ceil()html
parseInt前端
Math對象方法：round() pow() floor() ceil()html5
'use strict'java
對象字面量jquery
Object.create()css3
arrayweb
window方法ajax
jQuery篩選sql
css：盒子模型
版本控制
substring
Math方法
Array方法
js全局屬性
html結構
瀏覽器端的存儲技術
HTML5都有哪些新的JS API
JavaScript內部對象
js繼承工做原理
減低頁面加載時間的方法
文檔類型
爲何利用多個域名來存儲網絡資源會更有效？

1. 在JavaScript中定義變量var a="35", var b="7"運算a%b的結果爲:

　　A. 357　　B. 5　　C. 0　　D. 57

　　答案：C. 0

　　解析：js中把字符串轉換成數字有三種方法：轉換函數、強制類型轉換、利用js變量弱類型轉換。

　　　　　　　　1）轉換函數

　　　　　　　　js提供了parseInt()和parseFloat()兩個轉換函數。前者把值轉換成整數，後者把值轉換成浮點數。只有對String類型調用這些方法，這兩個函數才能正確運行；對其餘類型返回的都是NaN(Not a Number)。

　　　　　　　　parseInt()方法還有基模式，能夠把二進制、八進制、十六進制或其餘任何進制的字符串轉換成整數。基是由parseInt()方法的第二個參數指定的

　　　　　　　　parseFloat()方法與parseInt()方法的處理方式類似。
　　　　　　　　使用parseFloat()方法的另外一不一樣之處在於，字符串必須以十進制形式表示浮點數，parseFloat()沒有基模式。　　　　　

 1 console.log(parseInt("1245red"));       //1245
 2 console.log(parseFloat("1245red"));     //1245
 3 console.log(parseInt("1245.5red"));     //1245
 4 console.log(parseFloat("1245.555red")); //1245.555
 5 console.log(parseInt("red"));           //NaN
 6 console.log(parseInt("0xA"));           //10
 7 
 8 console.log(parseInt("AF", 16));        //175   10*16+15
 9 console.log(parseInt("10", 2));         //2
10 console.log(parseInt("10", 8));         //8
11 console.log(parseInt("10", 10));        //10
12 
13 //若是十進制數包含前導0，那麼最好採用基數10，這樣纔不會意外地獲得八進制的值
14 console.log(parseInt("010"));
15 console.log(parseInt("010",8));         //8
16 console.log(parseInt("010",10));        //10
17 
18 console.log(parseFloat("1234red"));     //1234
19 console.log(parseFloat("0xA"));         //0
20 console.log(parseFloat("22.5"));        //22.5
21 console.log(parseFloat("22.35.5"));     //22.35
22 console.log(parseFloat("0908"));        //908
23 console.log(parseFloat("blue"));        //NaN

　　　　　　　　2）強制類型轉換

　　　　　　　　使用強制類型轉換能夠訪問特定的值，即便它是另外一種類型的。ECMAScript中可用的3種強制類型轉換有：

- - - Boolean(value)——把給定的值轉換成Boolean型；
    - Number(value)——把給定的值轉換成數字（能夠是整數或浮點數）；
    - String(value)——把給定的值轉換成字符串。

　　　　　　　　用這三個函數之一轉換值，將建立一個新值，存放由原始值直接轉換成的值。這會形成意想不到的後果。
　　　　　　　　當要轉換的值是至少有一個字符的字符串、非0數字或對象時，Boolean()函數將返回true。若是該值是空字符串、數字0、undefined或null，它將返回false。

 1         //當要轉換的值是至少有一個字符的字符串、非0數字或對象時，Boolean()函數將返回true。
 2         //若是該值是空字符串、數字0、undefined或null，它將返回false。
 3         console.log(Boolean(""));       //false
 4         console.log(Boolean("hi"));     //true
 5         console.log(Boolean(100));      //true
 6         console.log(Boolean(null));     //false
 7         console.log(Boolean(0));        //false
 8         console.log(Boolean(new Object())); //true
 9         console.log(Boolean({}));       //true
10         var a;
11         console.log(Boolean(a));        //false---undefined
12 
13         //Number()的強制類型轉換與parseInt()和parseFloat()方法的處理方式類似，只是它轉換的是整個值，而不是部分值。
14         console.log(Number(false));     //0
15         console.log(Number(true));      //1
16         console.log(Number(undefined)); //NaN
17         console.log(Number(null));      //0
18         console.log(Number("5.5"));     //5.5
19         console.log(Number("5.6.7"));   //NaN
20         console.log(Number("5red"));    //NaN
21         console.log(Number(new Object()));  //NaN
22         console.log(Number(100));       //100
23         console.log(Number(a));         //NaN
24 
25         //String()轉換成字符串
26         console.log(String(null));      //null
27         console.log(String(true));      //true
28         console.log(String(undefined)); //undefined
29         console.log(String(100));       //100
30         console.log(String(10.5));      //10.5
31         console.log(String(new Object()));  //[object Object]
32         console.log(String(a));         //undefined
33         console.log(String({p1:1,p2:2}));   //[object Object]
34         console.log(String({}));            //[object Object]
35         console.log(String(function b(){var c = 1;}));  //function b(){var c = 1;}
36         console.log(String(10*10));     //100

　　　　　　　　3）利用js弱類型進行轉換　　

1 var str="012.345";
2 var x = str-1;
3 console.log(x); //11.345
4 
5 var str2 = "012.3456red";
6 var x = str2-2;
7 console.log(x);     //NaN

因此本題中，雖然a，b是字符串，可是對其進行加減乘除數學運算時，會因爲js的弱類型特徵自動轉換計算，35%7=0. 故結果爲0。

2. 如下代碼運行結果是：var a=11.45; document.write(Math.round(a));

　　A. 11　　B. 12　　C. 11.4　　D. 11.5

　　答案：A

　　解析：round() 方法可把一個數字舍入爲最接近的整數。對於 0.5，該方法將進行上舍入。例如，3.5 將舍入爲 4，而 -3.5 將舍入爲 -3。

1 console.log(Math.round(3.5));               //4
2 console.log(Math.round(-3.5));              //-3
3 console.log(Math.round(-3.500000001));      //-4
4 console.log(Math.round(3.49));              //3
5 console.log(Math.round(-3.49));             //-3

　　要注意不徹底是四捨五入！！當是正數時是四捨五入，是負數時，若小數正好0.5則會進行上舍入，若不是正好0.5，則會向更偏向的那一方舍入。

3. 下面代碼運行結果是：var s1=parseInt( "10*22" ); document.write(s1);

　　A. 1022　　B. 220　　C. 10　　D. 200

　　答案：10

　　解析：類型轉換方法同第一題。由於10*22是一個字符串，則進行parseInt轉換時只會從前取數字部分。

4. Math對象的哪一個方法能夠返回大於等於參數的整數？

　　A. round()　　B. pow()　　C. floor()　　D. ceil()

　　答案：D

　　解析：　　A. round()方法第二題解析過，是取與 x 最接近的整數，不必定大於等於參數

　　　　　　　B. pow(x, y)返回x的y次冪的值。x,y都是必須的且必須是數字。若是因爲指數過大而引發浮點溢出，則該方法將返回 Infinity。

　　　　　　　C. floor() 方法可對一個數進行下舍入。該方法執行的是向下取整計算，它返回的是小於或等於函數參數，而且與之最接近的整數。

　　　　　　　D. ceil() 方法可對一個數進行上舍入。該方法執行的是向上取整計算，它返回的是大於或等於函數參數，而且與之最接近的整數。

5. "use strict"; var o={p:1,p:2};console.log(o); 會產生什麼結果？

　　A. 語法錯誤　　B. o={p:1}　　C. o={p:2}　　D. o={p:1, p:2}

　　答案：A

　　解析：嚴格模式下，對象不能有重名的屬性。正常模式下，若是對象有多個重名屬性，最後賦值的那個屬性會覆蓋前面的值。嚴格模式下，這屬於語法錯誤。

　　　　　　嚴格模式詳解參考：http://www.cnblogs.com/jiqing9006/p/5091491.html

　　　　我嘗試結果是：

　　　　IE：

　　　　使用嚴格模式：（報錯）

　　　　不使用嚴格模式：（不報錯）

　　　　Chrome:

　　　　用不用嚴格模式都不報錯：

　　　　Firefox：

　　　　用不用嚴格模式都不報錯：

6. var o={p:1,p:2}; console.log(o); 會產生什麼結果？

　　A. 語法錯誤　　B. o={p:1}　　C. o={p:2}　　D. o={p:1, p:2}

　　答案： C

　　解析：不在嚴格模式下執行，p關鍵字會被覆蓋

7. var o={a:2, m: function(){return this.a+1;}}; var p=Object.create(o); p.a=12; console.log(p.m()); 輸出值是多少？

　　A. 1　　B. 2　　C. 3　　D. 13

　　答案：D

　　解析：Object.create(proto [, propertiesObject ]) 是E5中提出的一種新的對象建立方式，第一個參數是要繼承的原型，若是不是一個子函數，能夠傳一個null，第二個參數是對象的屬性描述符，這個參數是可選的。　　　　　

　　　　　propertiesObject 參數的詳細解釋：（默認都爲false）

　　　　　數據屬性

- - writable:是否可任意寫
  - configurable：是否可以刪除，是否可以被修改
  - enumerable：是否能用 for in 枚舉
  - value：值

　　　　　訪問屬性：

- - get(): 訪問
  - set(): 設置

　　　　　上面說第一個參數是要繼承的原型，就是說新建立的對象o的原型就是Object.create()中傳入的參數。能夠console.log(p)看題幹中獲得的p：

　　　　　就是說，create(arg)中的參數實際上是賦給了建立的對象的原型。而根據原型鏈的做用下，p的函數m中調用的this.a 應該是12. 以上。

　　　　　若是要使用Object.create()方法建立一個普通的空對象，相似 var o = {}，則參數設置爲：Object.prototype。參數不能爲空，會報錯。

　　　　　若是傳入參數是Object呢？Object自己實際上是一個函數，因此輸出的結果是一個函數：

　　　　　而若是參數是null，則會建立一個沒有原型的空對象：

8. 下面代碼運行結果是

　　a=new Array(2,4,,4,5,6};

　　sum=0;

　　for(i=1;i<a.length;i++){

　　　　sum += a[i];

　　}

　　document.write(sum);

　　A. 21　　B. 19　　C. 2, 4, 4, 5, 6　　D. 24456

　　答案：19

　　解析：很簡單，i是從1開始的，因此是從第二個數組開始求和

9. window的哪一個方法能夠顯示輸入框

　　A. confirm()　　B. open()　　C. alert()　　D. prompt()

　　答案：D. prompt()

　　解析：

confirm() 方法用於顯示一個帶有指定消息和OK 及取消按鈕的對話框。若是用戶點擊肯定按鈕，則confirm() 返回true。若是點擊取消按鈕，則confirm() 返回false.
open() 打開（彈出）一個新的窗體

　　　　window.open(url,name,features,replace);

- url -- 要載入窗體的URL
- name -- 新建窗體的名稱(也能夠是HTML target屬性的取值，目標)
- features -- 表明窗體特性的字符串，字符串中每一個特性使用逗號分隔
- replace -- 一個布爾值，說明新載入的頁面是否替換當前載入的頁面，此參數一般不用指定

alert() 方法用於顯示帶有一條指定消息和一個 OK 按鈕的警告框。

prompt() 方法用於顯示可提示用戶進行輸入的對話框。

 1 //confirm
 2 if(confirm("Press a button")){
 3         //....
 4 } else {
 5         //...
 6 }
 7 //prompt()
 8 var name = prompt("Please enter your name: ", "");
 9 if(name != null && name != ""){
10         //.....
11 }

10. 下面哪一種不屬於jquery的篩選？

　　A. 過濾　　B. 自動　　C. 查找　　D. 串聯

　　答案：B

　　解析： jQuery的篩選函數提供了串聯、查找和過濾函數

串聯函數
1. andSelf():加入先前所選的加入當前元素中
  - e.g.
    - <div><p>test</p></div>
    - $('div').find('p').andSelf().addClass("class1");
    - //result
    - <div><p class="class1">test</p></div>
2. end():回到最近的一個"破壞性"操做以前。即，將匹配的元素列表變爲前一次的狀態。若是以前沒有破壞性操做，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操做。這包括在 Traversing 中任何返回一個jQuery對象的函數--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
查找函數
1. add(exp): 把與表達式匹配的元素添加到jQuery對象中。這個函數能夠用於鏈接分別與兩個表達式匹配的元素結果集。
2. children([expr]):取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。能夠經過可選的表達式來過濾所匹配的子元素。注意：parents()將查找全部祖輩元素，而children()之考慮子元素而不考慮全部後代元素。
3. find(expr):搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。
4. next([expr]): 取得一個包含匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合。這個函數只返回後面那個緊鄰的同輩元素，而不是後面全部的同輩元素（可使用nextAll）。能夠用一個可選的表達式進行篩選。
5. nextAll([expr]): 查找當前元素以後全部的同輩元素。
6. offsetParent(): 返回第一個匹配元素用於定位的父節點。這返回父元素中第一個其position設爲relative或者absolute的元素。此方法僅對可見元素有效。
7. parent([expr]): 取得一個包含着全部匹配元素的惟一父元素的元素集合。
8. parents([expr]): 取得一個包含着全部匹配元素的祖先元素的元素集合（不包含根元素）。
9. prevAll([expr]): 查找當前元素以前全部的同輩元素;
10. siblings([expr]): 取得一個包含匹配的元素集合中每個元素的全部惟一同輩元素的元素集合。
過濾函數
1. eq(insex): 獲取第N個元素.這個元素的位置是從0算起。
2. filter(expr): 篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式
3. filter(fn): 篩選出與指定函數返回值匹配的元素集合
4. hasClass(class): 檢查當前的元素是否含有某個特定的類，若是有，則返回true。這其實就是 is("." + class)
5. is(expr): 用一個表達式來檢查當前選擇的元素集合，若是其中至少有一個元素符合這個給定的表達式就返回true。
6. map(callback): 將一組元素轉換成其餘數組（不管是否是元素數組);
7. not(expr): 刪除與指定表達式匹配的元素
8. slice(start,[end]): 選取一個匹配的子集;

11. 使用（_）在元素的width屬性中減去padding值計算容器的寬度

　　A. cale()　　B. box_sizing　　C. background-size　　D. 以上都不是

　　解析：

cale()是什麼？沒找到啊。css3中有一個calc()能夠經過計算來肯定CSS屬性值。
box-sizing：以特定的方式定義匹配某個區域的特定元素。
```
box-sizing: content-box|border-box|inherit;
```

background-size：規定背景圖像的尺寸：

background-size: length|percentage|cover|contain;  （設定寬高（寬，高） | 以父元素的百分比來設置背景圖像的寬度和高度 | 把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域 | 把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。）

12. 哪一個工具不能用來作PHP的版本控制？

　　A. CVS　　B. CDN(靜態資源管理)　　C. SVN　　D. VSS

　　解析：

- CVS（Concurrent Versions System）老牌的版本控制系統，它是基於客戶端/服務器的行爲使得其可容納多用戶，構成網絡也很方便。這一特性使得CVS成爲位於不一樣地點的人同時處理數據文件（特別是程序的源代碼）時的首選。
- 使用靜態資源庫能夠訪問線上資源文件，好比jquery庫、bootstrap庫
- SVN是Subversion的簡稱，是一個開放源代碼的版本控制系統，相較於RCS、CVS，它採用了分支管理系統，它的設計目標就是取代CVS。互聯網上不少版本控制服務已從CVS遷移到Subversion。
- VSS 的全稱爲 Visual Source Safe 。做爲 Microsoft Visual Studio 的一名成員，它主要任務就是負責項目文件的管理，幾乎能夠適用任何軟件項目。管理軟件開發中各個不一樣版本的源代碼和文檔，佔用空間小而且方便各個版本代碼和文檔的獲取,對開發小組中對源代碼的訪問進行有效的協調。

　　　　綜上，應該選B吧？和版本控制無關。

13. 如下代碼運行結果是

　　var mystring=" I am a student";

　　var a=mystring.substring(9,13);

　　document.write(a);

　　A. stud 　　B. tuden　　C. udent　　D. uden

　　答案：D

　　解析：substring() 方法用於提取字符串中介於兩個指定下標之間的字符。返回是一個新的字符串，該字符串值包含 stringObject 的一個子字符串，其內容是從 start 處到 stop-1 處的全部字符，其長度爲 stop 減start。

14.產生一個0~7之間(含0,7)的隨機整數，正確的是

　　A. Math.floor(Math.random()*6)

　　B. Math.floor(Math.random()*7)

　　C. Math.floor(Math.random()*8)

　　D. Math.ceil(Math.random()*8)

　　答案：C

　　解析：

1 console.log(Math.floor(Math.random()*6));   //0 1 2 3 4 5
2 console.log(Math.floor(Math.random()*7));   //0 1 2 3 4 5 6
3 console.log(Math.floor(Math.random()*8));   //0 1 2 3 4 5 6 7
4 console.log(Math.ceil(Math.random()*8));   // 1 2 3 4 5 6 7 8

floor是向下取整，ceil是向上取整。

15. Array對象的哪一個方法向數組的末尾添加一個或更多元素，並返回新的長度

　　A. concat()　　B. pop()　　C. push()　　D.shift()

　　答案：C

　　解析：

concat()	向數組的副本添加新的元素，返回新的數組，原數組不受影響	arrayObject.concat(arrayX,arrayX,......,arrayX)	返回新的數組，原數組不受影響
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。	arr.join(separator)	返回一個字符串
pop()	刪除並返回數組的最後一個元素	arrayObject.pop()	arrayObject 的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度	arrayObject.push(newelement1,newelement2,....,newelementX)	把指定的值添加到數組後的新長度。
reverse()	顛倒數組中元素的順序	arr.reserve()		該方法會改變原來的數組，而不會建立新的數組
shift()	刪除並返回數組的第一個元素	arrayObject.shift()	數組原來的第一個元素的值。	若是數組是空的，那麼 shift() 方法將不進行任何操做，返回 undefined 值。請注意，該方法不建立新數組，而是直接修改原有的 arrayObject
slice()	從某個已有的數組返回選定的元素	arrayObject.slice(start,end)	返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素	該方法並不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用方法 Array.splice()
sort()	對數組的元素進行排序，有一個可選參數，爲比較函數。	arrayObject.sort(sortby)	對數組的引用。請注意，數組在原數組上進行排序，不生成副本	sortby 可選，規定排序順序，必須是函數
splice()	刪除元素，並向數組添加新元素。	arrayObject.splice(index,howmany,item1,.....,itemX)	返回被刪除的項目.包含被刪除項目的新數組，若是有的話	splice() 方法可刪除從 index 處開始的零個或多個元素，而且用參數列表中聲明的一個或多個值來替換那些被刪除的元素請注意，splice() 方法與 slice() 方法的做用是不一樣的，splice() 方法會直接對數組進行修改
toSource()	表明對象的源代碼.該原始值由 Array 對象派生的全部對象繼承	object.toSource()		toSource() 方法一般由 JavaScript 在後臺自動調用，並不顯式地出如今代碼中只有 Gecko 核心的瀏覽器（好比 Firefox）支持該方法，也就是說 IE、Safari、Chrome、Opera 等瀏覽器均不支持該方法
toString()	把數組轉換爲字符串，並返回結果。	arrayObject.toString()	arrayObject 的字符串表示。返回值與沒有參數的 join() 方法返回的字符串相同	當數組用於字符串環境時，JavaScript 會調用這一方法將數組自動轉換成字符串。可是在某些狀況下，須要顯式地調用該方法
toLocaleString()	把數組轉換爲本地數組，並返回結果。	arrayObject.toLocaleString()	arrayObject 的本地字符串表示	首先調用每一個數組元素的 toLocaleString() 方法，而後使用地區特定的分隔符把生成的字符串鏈接起來，造成一個字符串
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。	arrayObject.unshift(newelement1,newelement2,....,newelementX)	arrayObject 的新長度	unshift() 方法不建立新的建立，而是直接修改原有的數組
valueOf()	返回 Boolean 對象的原始值			若是調用該方法的對象不是 Boolean，則拋出異常 TypeError

 1 concat()    //向數組的副本添加新的元素，返回新的數組，原數組不受影響 
 2     arrayObject.concat(arrayX,arrayX,......,arrayX)
 3 join()      //把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。   返回一個字符串
 4     arr.join(separator)
 5 pop()       //刪除並返回數組的最後一個元素    
 6     arrayObject.pop()
 7 push()      //向數組的末尾添加一個或更多元素，並返回新的長度   
 8     arrayObject.push(newelement1,newelement2,....,newelementX)
 9 reverse()   //顛倒數組中元素的順序   該方法會改變原來的數組，而不會建立新的數組 
10     arr.reserve()      
11 shift()     //刪除並返回數組的第一個元素 若是數組是空的，那麼 shift() 方法將不進行任何操做，返回 undefined 值。請注意，該方法不建立新數組，而是直接修改原有的 arrayObject
12     arrayObject.shift()    
13 slice()     //從某個已有的數組返回選定的元素   返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素     該方法並不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用方法 Array.splice()
14     arrayObject.slice(start,end)
15 sort()      //對數組的元素進行排序，有一個可選參數，爲比較函數。    返回對數組的引用。請注意，數組在原數組上進行排序，不生成副本 
16     arrayObject.sort(sortby)    //sortby 可選，規定排序順序，必須是函數       
17 splice()    //刪除元素，並向數組添加新元素。   返回被刪除的項目.包含被刪除項目的新數組，若是有的話    splice() 方法可刪除從 index 處開始的零個或多個元素，而且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。 請注意，splice() 方法與 slice() 方法的做用是不一樣的，splice() 方法會直接對數組進行修改
18     arrayObject.splice(index,howmany,item1,.....,itemX)
19 toSource()  //表明對象的源代碼.該原始值由 Array 對象派生的全部對象繼承  
20     object.toSource()
21 toSource() //方法一般由 JavaScript 在後臺自動調用，並不顯式地出如今代碼中. 只有 Gecko 核心的瀏覽器（好比 Firefox）支持該方法，也就是說 IE、Safari、Chrome、Opera 等瀏覽器均不支持該方法
22 toString()  //把數組轉換爲字符串，並返回結果。  返回arrayObject 的字符串表示。返回值與沒有參數的 join() 方法返回的字符串相同      當數組用於字符串環境時，JavaScript 會調用這一方法將數組自動轉換成字符串。可是在某些狀況下，須要顯式地調用該方法
23     arrayObject.toString()
24 toLocaleString()    //把數組轉換爲本地數組，並返回結果。 返回arrayObject 的本地字符串表示    首先調用每一個數組元素的 toLocaleString() 方法，而後使用地區特定的分隔符把生成的字符串鏈接起來，造成一個字符串
25     arrayObject.toLocaleString()  
26 unshift()   //向數組的開頭添加一個或更多元素，並返回新的長度。   unshift() 方法不建立新的建立，而是直接修改原有的數組
27     arrayObject.unshift(newelement1,newelement2,....,newelementX)
28 valueOf()   //返回 Boolean 對象的原始值。若是調用該方法的對象不是 Boolean，則拋出異常 TypeError

16. 如下哪些是JavaScript中標準的全局屬性(多選)

　　A. Infinity　　B. NaN　　C. undefined　　D. null

　　答案：ABC

　　解析：全局屬性：NaN，Java，undefined，Infinity，Packages

　　頂層函數（全局函數）

函數	描述
decodeURI()	解碼某個編碼的 URI。
decodeURIComponent()	解碼一個編碼的 URI 組件。
encodeURI()	把字符串編碼爲 URI。
encodeURIComponent()	把字符串編碼爲 URI 組件。
escape()	對字符串進行編碼。
eval()	計算 JavaScript 字符串，並把它做爲腳本代碼來執行。
getClass()	返回一個 JavaObject 的 JavaClass。
isFinite()	檢查某個值是否爲有窮大的數。
isNaN()	檢查某個值是不是數字。
Number()	把對象的值轉換爲數字。
parseFloat()	解析一個字符串並返回一個浮點數。
parseInt()	解析一個字符串並返回一個整數。
String()	把對象的值轉換爲字符串。
unescape()	對由 escape() 編碼的字符串進行解碼。

　　頂層屬性（全局屬性）

方法	描述
Infinity	表明正的無窮大的數值。
java	表明 java.* 包層級的一個 JavaPackage。
NaN	指示某個值是否是數字值。
Packages	根 JavaPackage 對象。
undefined	指示未定義的值。

17. 按嚴格標準來講下面有關html結構描述正確的有？

　　A. <ul><li></li></ul>

　　B. <ol><li></li></ol>

　　C. <dl><dt></dt><dd></dd></dl>

　　D. <table><tr><td></td></tr></table>

　　答案：ABCD

　　解析：< dl>< /dl>用來建立一個普通的列表,< dt>< /dt>用來建立列表中的上層項目，<dd>< /dd>用來建立列表中最下層項目，< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標誌對之間。dl下面能夠嵌套dt、dd兩個標籤，能夠省略dt，但不建議

　　　　　簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。

18. 常見的瀏覽器端的存儲技術有哪些？

　　A. cookie　　B. localStorage　　C. session　　D. userData

　　答案：ABD

　　解析：cookie 是靠譜的瀏覽器都支持；cookie會隨着每次HTTP請求頭信息一塊兒發送，無形中增長了網絡流量，另外，cookie能存儲的數據容量有限，根據瀏覽器類型不一樣而不一樣，IE6大約只能存儲2K。

　　　　　localStorge 比 cookie 存的更多，獲取更方便，並且存儲內容不會隨請求發送給服務器；

　　　　　session 雖然須要 cookie 支持（一般存放加密過的 sessionId），可是不在瀏覽器端存放主要信息，排除；

　　　　　IE 支持 userData 存儲數據，可是基本不多使用到，除非有很強的瀏覽器兼容需求。IE瀏覽器可使用userData來存儲數據，容量可達到640K，這種方案是很可靠的，不須要安裝額外的插件。缺點：它僅在IE下有效。

19. HMTL5都有哪些新的JS API

　　A. navigator　　B. websocket　　C. sessionStorage　　D. canvas

　　答案：

　　解析：

- 多媒體：video、audio、
- 遊戲：canvas、webgl、
- 存儲：localstorage、sessonstorage、websql、indexedDB
- 網絡：websocket

- navigator對象包含有關瀏覽器的信息。好像是js的，不算是html5的api
- websocket
- sessionStorage
- canvas

20. 下面有關JavaScript內部對象的描述，正確的有？

　　A. History對象包含用戶（在瀏覽器窗口）訪問過的URL

　　B. Location對象包含當前有關URL的信息

　　C. Window對象包含瀏覽器中打開的窗口

　　D. Navigator對象包含有關瀏覽器的信息

　　答案：ABCD

　　解析：

- Navigator：提供有關瀏覽器的信息
  - Navigator 對象包含的屬性描述了正在使用的瀏覽器。可使用這些屬性進行平臺專用的配置。
- Window：Window 對象表示瀏覽器中打開的窗口。
  - 若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。
  - Window對象處於對象層次的最頂層，它提供了處理Navagator窗口的方法和屬性
- Location：提供了與當前打開的URL一塊兒工做的方法和屬性，是一個靜態的對象。包含有關當前 URL 的信息，Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問
  - Location 對象存儲在 Window 對象的 Location 屬性中，表示那個窗口中當前顯示的文檔的 Web 地址。它的 href 屬性存放的是文檔的完整 URL，其餘屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象（或 Area 對象）的 URL 屬性很是類似。當一個 Location 對象被轉換成字符串，href 屬性的值被返回。這意味着你可使用表達式 location 來替代 location.href
- History：提供了與歷史清單有關的信息。包含用戶（在瀏覽器窗口中）訪問過的 URL
  - History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問
  - History 對象最初設計來表示窗口的瀏覽歷史。但出於隱私方面的緣由，History 對象再也不容許腳本訪問已經訪問過的實際 URL。惟一保持使用的功能只有 back()、forward() 和 go() 方法
- Document：包含與文檔元素一塊兒工做的對象，它將這些元素封裝起來供編程人員使用
- Screen 對象包含有關客戶端顯示屏幕的信息
  - 每一個 Window 對象的 screen 屬性都引用一個 Screen 對象。Screen 對象中存放着有關顯示瀏覽器屏幕的信息。JavaScript 程序將利用這些信息來優化它們的輸出，以達到用戶的顯示要求

21. 你能解釋一下JavaScript中的繼承是如何工做的嗎？（15分）

　　經過實現繼承，通常依靠原型鏈來實現。

　　組合繼承：使用原型鏈實現對原型屬性和方法的繼承，經過構造函數實現對實例屬性的繼承

 1         //組合繼承：構造函數+原型
 2         function Parent(name){
 3             this.name = name;
 4             this.color = [1,2,3];
 5         }
 6         Parent.prototype.sayName = function(){
 7             console.log(this.name);
 8         }
 9         function Child(name,age){
10             Parent.apply(this,arguments);
11             this.age = age;
12         }
13         Child.prototype = new Parent();
14         
15         //或者可使用臨時構造函數
16         // var F = function(){};
17         // F.prototype = Parent.prototype;
18         // Child.prototype = new F();
19 
20         Child.prototype.sayAge = function(){
21             console.log(this.age);
22         }

22. 請說出三種減低頁面加載時間的方法（加載時間指感知的時間或者實際加載時間）（15分）

　　《高性能網站建設指南的14條規則》

　　頁面加載時間應當包含：規則一、二、三、四、五、六、八、九、十、十二、 13

規則1：　　減小HTTP請求　　
　　　　　　　　1. 圖片地圖（map）
　　　　　　　　2. CSS Sprites
　　　　　　　　3. 內聯圖片　　data:[<mediatype>][;base64],<data>
　　　　　　　　4. 合併腳本和樣式表

規則2：　　使用內容發佈網絡（CDN）

規則3：　　添加Expires頭
　　　　　　　　更新方法：修改連接/組件文件名（好比設置版本號）


規則4：　　壓縮組件（gzip）

規則5：　　將樣式表放在頂部（使用link標籤將樣式表放在文檔head中）

規則6：　　將腳本放在底部

規則7：　　避免CSS表達式　　
　　　　　　　　（IE：expression【推薦一次性表達式/事件處理器】）

規則8：　　使用外部JavaScript和CSS

規則9：　　減小DNS查找
　　　　　　　　經過keep-alive和較少的域名來減小DNS查找

規則10：　 精簡JavaScript　　（精簡、混淆）

規則11：　 避免重定向

規則12： 　刪除重複腳本

規則13：　 配置ETag　　　　（配置或移除ETag）

規則14：　 使Ajax可緩存

23. 文檔類型的做用是什麼？你知道多少種文檔類型？（15分）

　答：<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔

　　　　HTML 4.01/XHTML 規定了三種文檔類型：Strict（嚴格模式）、Transitional（過渡模式）以及 Frameset（框架模式）

　　　　HTML5 將DOCTYPE的聲明簡化了，只須要<!DOCTYPE html>便可

24. 爲何利用多個域名來存儲網絡資源會更有效？（15分）

　答：

- 動靜分離需求，使用不一樣的服務器處理請求。處理動態內容的只處理動態內容，不處理別的，提升效率。CDN緩存更方便
- 突破瀏覽器併發限制、
- Cookieless, 節省帶寬，尤爲是上行帶寬通常比下行要慢。
  用戶的每次訪問，都會帶上本身的cookie ，挺大的。假如twitter 的圖片放在主站域名下，那麼用戶每次訪問圖片時，request header 裏就會帶有本身的cookie ，header 裏的cookie 還不能壓縮，而圖片是不須要知道用戶的cookie 的，因此這部分帶寬就白白浪費了。
- 節約主域名的鏈接數，從而提升客戶端網絡帶寬的利用率，優化頁面響應。由於老的瀏覽器（IE6是典型），針對同一個域名只容許同時保持兩個HTTP鏈接。將圖片等資源請求分配到其餘域名上，避免了大圖片之類的並不必定重要的內容阻塞住主域名上其餘後續資源的鏈接（好比ajax請求）。
- 避免沒必要要的安全問題( 上傳js竊取主站cookie之類的)