2019拼多多前端筆試

 

 一.單選題 

1.

輸出爲→5 5 5 5 5

setTimeout會在設定時間後將任務放進隊列中排隊，但當前線程中有for循環，會等到for循環結束後纔會執行排着的5個回調函數，這時i已變爲5，故一次性輸出5個5。詳見完全理解setTimeout()

 

2.

輸出爲456，由於鍵名只能爲字符串，若是鍵名爲對象，瀏覽器會默認調用toString（）方法，將對象變成字符串"[object Object]"。兩次都輸入的是對象，則鍵名爲[Object Object]的值最終覆蓋成了456。a對象最終爲{[object Object]:456}。

（這裏[object Object]，object的prototype鏈中都沒有實現本身的toString()的話, 把object轉換爲String時就會調用Object.prototype.toString, 輸出的格式是[object 對象的類型]）。

3.

沒有任何變化，既沒有上移也沒有下移。只有margin-left和margin-top爲負值時，元素纔會發生偏移，margin-bottom和margin-right爲負值時元素不偏移，但margin-bottom爲負值會影響後面的元素，margin-right爲負值會使自身寬度變大（不設寬度時）。當margin值取百分數時，是以最近的父元素的寬度爲基準取值的。詳見margin賦值爲負值的幾種效果（負值像素，負值百分數）。

4.

輸出爲object。

typeof的運算數未定義,返回的就是 「undefined」.

運算數爲數字 typeof(x) = 「number」

字符串 typeof(x) = 「string」

布爾值 typeof(x) = 「boolean」

對象,數組和null typeof(x) = 「object」

函數 typeof(x) = 「function」

5.

undefined

6.

undefined

變量聲明會提高到function最開頭，但賦值發生在最後，則上述代碼等價於

var a="aaa";
(function (){

var a;
console.log(a);
a="bbb";
})()

打印a的時候，a並無在function內賦值，因此是undefined

7.

6

8.

mousedown focus mouseup click

9.

解決回調陷阱經常使用方法：

• function拆解
• 事件發佈/訂閱模式
• Promise
• Generator
• async / await

詳見JavaScript異步編程__「回調地獄」的一些解決方案

 10.

a b d c

詳見http://es6.ruanyifeng.com/#docs/promise

11.

position:relative不會

12.

round() 方法可把一個數字舍入爲最接近的整數。

floor() 方法可對一個數進行下舍入。

ceil() 方法可對一個數進行上舍入。

parseInt() 函數可解析一個字符串，並返回一個整數。

 經測試，若輸入小數，parseInt() 函數會返回整數部分，由於對於整數來講，小數點是無效字符。詳見ECMAScript 類型轉換。

 

二.不定項選擇

 

 

 

三.填空題

apply(),call(),bind()

this指向詳解及改變它的指向的方法

 

輸出1

 

四.簡答題

1.

跨域，指的是瀏覽器不能執行其餘網站的腳本。瀏覽器執行javascript腳本時，會檢查這個腳本屬於哪一個頁面，若是不是同源頁面，就不會被執行。（所謂同源是指，域名，協議，端口均相同）

跨域產生的緣由：瀏覽器的同源策略，「同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。」

跨域方法：

解決限制接口請求的方法：

（1）經過jsonp跨域。須要目標服務器配合一個callback函數。JSONP 在 HTML 標籤裏，一些標籤好比 script、img 這樣的獲取資源的標籤是沒有跨域限制的。

（2）使用window.name+iframe來進行跨域

（3）經過CORS解決AJAX跨域。CORS 是一個 W3C 標準，全稱是 "跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解。

（4）經過Nginx反向代理

（5）圖片ping或script標籤跨域

解決限制Dom 查詢的方法：
（1）postMessage window.postMessage() 是 HTML5 的一個接口，專一實現不一樣窗口不一樣頁面的跨域通信。

（2）document.domain 這種方式只適合主域名相同，但子域名不一樣的 iframe 跨域。

詳見不要再問我跨域的問題了   八種方式實現跨域請求

2.

 

function duplicates(arr) {

     var newArr=[];

     arr.sort();

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

         if (arr[i]==arr[i+ 1 ]&&(newArr.indexOf(arr[i])==- 1 ) ){

             newArr.push(arr[i]);

             i++;

 

         }

     }

 

return newArr;}

 3.

JavaScript的number類型按照ECMA的JavaScript標準，它的Number類型就是IEEE 754的雙精度數值。IEEE 754標準就是一個對實數進行計算機編碼的標準。爲了處理方便，這個標準引入了大量的折衷和妥協，創建在這種表達方式上的算法（例如除法運算）也同樣。因爲數值表達方式存在「缺陷」，運算結果不可避免地堆聚起愈來愈多的偏差。按IEEE 754格式保存的浮點數精度至關於帶有1五、16或17位小數位數的十進制小數，因爲存在二進制和十進制的轉換問題，具體的位數會發生變化。要得到最高的轉換精度，必須指定17位的小數——此時能夠相信前15位的精度。所以JavaScript小數在作四則運算時，精度會丟失。

（由於計算機是二進制來表示浮點數的，沒法準確表示一個浮點數，只能逼近。）

參考：javascript中0.1 + 0.2 != 0.3?

4.

map和foreach區別：

forEach()方法：對數組的每個元素都執行一次提供的函數。該方法不會改變原來的數組，只是將數組中的每一項做爲callback的參數執行一次。

map()方法：map()方法建立一個新的數組，其結果是該數組中的每一個元素都調用一次callback後返回的結果，一樣，該方法不改變原有的數組，返回值： 新數組，每一個元素都是回調函數的結果。

5.

function log(){

     var args = Array.prototype.slice.call(arguments).map(stringify);

    var t=args.toString().replace(',',' ')

     console.log( '(app)' +t)

}

function stringify(arg) {

     return arg;

}

 

6.

null表示"沒有對象"，即該處不該該有值，表明一個空對象指針，使用typeof運算獲得 「object」。

典型用法是：

（1） 做爲函數的參數，表示該函數的參數不是對象。

（2） 做爲對象原型鏈的終點。

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。

典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。

7.

沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，不具備數組的push,pop等方法，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。可使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

8.

 

/*方法一： BFC(塊級格式化上下文)*/      .container{          width:1000px;height:400px;border: 1px solid red;      }      .left{          width:200px;height:100%;background: gray;          float: left;      }      .rigth{          overflow:hidden;  /* 觸發bfc */          background: green;      }   /*方法二： flex佈局 */      .container{          width:1000px;height:400px;border:1px solid red;          display:flex;         /*flex佈局*/      }      .left{          width:200px; height:100%;background:gray;          flex:none;      }      .right{          height:100%;background:green;          flex:1;        /*flex佈局*/      }   /* 方法三： table佈局 */      .container{          width:1000px;height:400px;border:1px solid red;          display:table;         /*table佈局*/      }      .left{          width:200px; height:100%;background:gray;          display:table-cell;      }      .right{          height:100%;background:green;          display: table-cell;      }   /*方法四： css計算寬度calc*/      .container{          width:1000px;height:400px;border:1px solid red;      }      .left{          width:200px;height: 100 %;background:gray;          float :left;      }      .right{          height: 100 %;background:green;          float :right;          width:calc( 100 % - 200px);      } </style>