2017阿里巴巴秋招前端筆試題總結
1.正則表示式/a+(bab)?(caac)*/，下列選項中是該正則表示式的子集的是？
A. /(bab)(caca)/
B. /a(bab){2}(caac)*/
C. /a{2}/
D. /a+(bab){0,1}(ca)+(ca)/
E. /a(^bab)+(caac){1,}/
F. /a+(babc){2,}(acc){1,}/
答案：C
2.下列說法錯誤的是：
A. 在Blink和WebKit的瀏覽器中，某個元素具有3D或透視變換的CSS屬性，會讓瀏覽器建立單獨的圖層。
B. 我們平常會使用left和top屬性來修改元素的位置，但樂翻天和top會觸發重佈局，取而代之的更好方法是使用translate，這個不會觸發重佈局。
C. 移動端要想動畫效能流暢，應該使用3D硬體加速，因此最好給頁面中的元素儘量新增translate3d或者translateZ(0)來觸發3D硬體加速。
D. 解決瀏覽器渲染的效能問題時，首要目標就是要避免圖層的重繪和重佈局。
答案：C
可通過這種方法優化CSS3的動畫效果。在一個沒有特效的普通頁面中，一個頁面中只有一個圖層，當圖層中的大小位置等發生變化時，整個頁面都要重佈局，可能出現卡頓。使用3D、透視變換的屬性時能強迫瀏覽器單獨生成一個圖層，由GPU來重繪動畫，能減少卡頓的情況。然而使用GPU可能會導致嚴重的效能問題，因為它增加了記憶體的使用，而且它會減少移動端裝置的電池壽命，因此使用時要小心。
3.將陣列var a = [1,2,3] 程式設計陣列 [4,3,2,1] 下面的方法正確的是？
A. a.reverse().unshift(4)
B. a.push(4).reverse()
C. a.push(4);a.reverse()
D.
a.splice(3,1,4).reverse()
答案：A C
reverse()改變陣列自身並返回；push()和unshift()改變陣列自身，返回新陣列的長度；splice()改變數字自身，返回被刪除項組成的新陣列。
3.目前HTTP2協議已經逐漸普及到日常伺服器中，以下對於HTTP2協議描述的正確的是：
A. 所有http請求都簡歷在一個tcp請求上，實現多路複用
B. 可以給請求新增優先順序
C. 伺服器主動推送sever push
D. HTTP2的頭部會減小，從而減少流量傳輸
4.下列哪種方式可以在不改變原來陣列的情況下，拷貝出陣列到b，且滿足b!=a。例如陣列a為[1,2,3]。
A. let b = a;
B. let b = a.slice();
C. let b = a.splice(0,0);
D. let b = a.concat();
答案：B D
要滿足b!=a那麼操作應該是深拷貝。A顯然是淺拷貝，b和a的記憶體地址相同；C中splice()方法返回刪除的元素構成的新陣列，b=[]。
splice()和concat()兩種方法可以實現深拷貝，但如果陣列中有元素是引用物件其實現的仍然是淺拷貝，遇到這種情況可以以下方法實現深拷貝：(物件的深拷貝也可用)
let b = [].concat(JSON.parse(JSON.stringify(arr)));5.以下程式碼，分別給出節點#box增加如下樣式，問節點#box距離body的上邊距是多少？
<body style="margin:0;padding:0;">
<div id="box" style="top:10px;margin:20px 10px;">
</div>
</body>如果設定position: static，則上邊距為(20)px
如果設定position: relatvie，則上邊距為(30)px
如果設定position: absolute，則上邊距為(30)px
如果設定position: sticky，則上邊距為(10)px
分析：static：不脫離文件流，偏移屬性設定無效；relative：不脫離文件流，相對自身在文件流中的位置進行偏移，不影響文件流中的其他元素；absolute：脫離文件流，相對離自身最近的定位的祖先元素進行偏移，如果沒有定位的祖先元素則一直追溯到body，不影響文件流中的其他元素。sticky：在螢幕範圍內時相當於static，不受偏移屬性的影響；當元素被滾動到超出螢幕範圍時相當於fixed，偏移屬性有效，但margin無效。此特性現在的相容性不好，也並不在W3C標準中，還處於試驗階段。
6.我們需要實現動態載入一個Javascript資源但是有幾處不知道如何處理，需要您的幫助完成這一項工作：
var script = document.createElement('script');
var head = document.getElementByTagName('head')[0];
script.type="text/javascript";
script.src='//i.alicdn/resource.js';
//繫結資源載入成功事件
script.(1) = function(){
//判斷資源載入狀態是否為載入成功或載入完成
if((2).test(4)){
script.onreadystatechange = null;
}
}
//繫結資源載入失敗事件
script.(4) = function(){
...
}
head.insertBefore(script,head.firstChild);答案：1. onreadystatechange
2. /^(complete|loaded)$/
3. readyState
4. onerror
7.請實現方法parse，作用如下：
var object = { b: { c: 4 }, d: [{ e: 5 }, { e: 6 }] }; console.log( parse(object, ‘b.c’) == 4 ) //true
console.log( parse(object, ‘d[0].e’) == 5 ) //true
console.log( parse(object, ‘d.0.e’) == 5 ) //true
console.log( parse(object, ‘d[1].e’) == 6 ) //true
console.log( parse(object, ‘d.1.e’) == 6 ) //true
console.log( parse(object, ‘f’) == ‘undefined’ ) //true我的程式碼：
function parse(obj,loca){
var arr = loca.split(/\[|\]|\./).filter(function(item){
return item;
});
arr.forEach(function(item,index){
obj = obj[item];
})
return obj||undefined
}注：split使用多個分隔符時引數是一個正則表示式，此時用|分割開每個分隔符就可以了。需要注意的用”[“，”]”，”(“，”)”，”+”，”?”，”*”這類在正則表示式中具有特殊含義的字元做分隔符時，要加/轉義。
大神的程式碼：
function parse(obj,str){
str.replace('[','.').replace(']','').split('.').map(function(item){
obj = obj[item];
})
return obj||undefined;
}