阿里巴巴2016前端開發工程師筆試(二)
阿新 • • 發佈：2019-02-04
1、下列哪個操作是W3C標準定義的阻止事件向父容器傳遞：
答案: C
A、e.preventDefault()
B、e.cancelBubble=true
C、e.stopPropagation()
D、e.stopImmediatePropagation()
2、以下關於盒子模型描述正確的是：
答案: A
A、標準盒子模型中：盒子的總寬度 ＝ 左右margin + 左右border + 左右padding + width
B、IE盒子模型中：盒子總寬度 ＝ 左右margin + 左右border + width
C、標準盒子模型中：盒子的總寬度 ＝ 左右margin + 左右border + width
D、IE盒子模型中：盒子總寬度 ＝ width
3、使用CSS的flexbox佈局，不能實現以下哪一個效果：
答案: D
A、三列布局，隨容器寬度等寬彈性伸縮
B、多列布局，每列的高度按內容最高的一列等高
C、三列布局，左列寬度畫素數確定，中、右列隨容器寬度等寬彈性伸縮
D、多個寬高不等的元素，實現無縫瀑布流佈局
4、關於HTML語義化，以下哪個說法是正確的？
答案: D
A、語義化的HTML有利於機器的閱讀，如PDA手持裝置、搜尋引擎爬蟲；但不利於人的閱讀
B、Table 屬於過時的標籤，遇到資料列表時，需儘量使用 div 來模擬表格
C、語義化是HTML5帶來的新概念，此前版本的HTML無法做到語義化
D、header、article、address都屬於語義化明確的標籤
5、關於HTTP協議，下面哪個說法是正確的？
答案: C
A、HTTP協議是有狀態協議。
B、以下是一個Http連結的response 的響應頭： GET /xxx/xxx/js/lib/test.js HTTP/1.1 Host: 127.0.0.1 Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */*
C、RESTful 介面中，利用HTTP協議的method欄位來描述要對資源操作的方式，比如GET表示獲取資源，POST表示新增一個資源，PUT表示更新資源,DELETE 表示刪除資源等等。
D、一個HTTP請求返回的HTTP狀態碼中，304表示臨時重定向。
6、使用 for in 迴圈陣列中的元素會列舉原型鏈上的所有屬性，過濾這些屬性的方式是使用 ___函式
答案：
hasOwnProperty
7、在空白處填入適當的程式碼使輸出結果成立：
function showMoney( ) {
____
};
var personA = new Object;
var personB = new Object;
personA.money= "100";
personB.money= "150";
personA.showMoney= showMoney;
personB.showMoney= showMoney;
輸出結果：
console.log(personA.showMoney( )); //"100"
console.log(personB.showMoney( )); //"150"
答案：
return this.money;
8、刪除給定陣列中的第二項和第三項，並且在得到的新的陣列中第一項後面新增一個新的值
var arr1 = ['a','b','c','d','e'];
var arr2 = arr1.__(__,__,'newvalue')
答案：
splice
1
2
9、寫一個求和的函式sum，達到下面的效果
// Should equal 15
sum(1, 2, 3, 4, 5);
// Should equal 0
sum(5, null, -5);
// Should equal 10
sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
'E', 1, 'F', 1, 'G', 1);
// Should equal 0.3, not 0.30000000000000004
sum(0.1, 0.2);
答案：
function sum(...arr){
if(arr.length===0){return ;}
var sum=0;
for(var i=0;i<arr.length;i++){
if(!isNaN(parseFloat(arr[i]))){
sum+=parseFloat(arr[i])||0;
}
}
return sum.toFixed(3)*1000/1000;
}
10、請寫一個表格以及對應的CSS，使表格奇數行為白色背景，偶數行為灰色背景，滑鼠移上去時為黃色背景。
答案：
<table class="table">
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
</table>
<style>
.table tr:nth-child(2n-1){
background-color:white;
}
.table tr:nth-child(2n){
background-color:grey;
}
.table tr:hover{
background-color:yellow;
}
</style>
11、寫一個traverse函式，輸出所有頁面寬度和高度大於50畫素的節點。
答案：
function traverse(){
var domNodes=document.querySelectorAll('body *');
var arr=[...domNodes
arr.filter(function(item){
return item.offsetWidth>50&&item.offsetHeight>50;
});
return arr;
答案: C
A、e.preventDefault()
B、e.cancelBubble=true
C、e.stopPropagation()
D、e.stopImmediatePropagation()
2、以下關於盒子模型描述正確的是：
答案: A
A、標準盒子模型中：盒子的總寬度 ＝ 左右margin + 左右border + 左右padding + width
B、IE盒子模型中：盒子總寬度 ＝ 左右margin + 左右border + width
C、標準盒子模型中：盒子的總寬度 ＝ 左右margin + 左右border + width
D、IE盒子模型中：盒子總寬度 ＝ width
3、使用CSS的flexbox佈局，不能實現以下哪一個效果：
答案: D
A、三列布局，隨容器寬度等寬彈性伸縮
B、多列布局，每列的高度按內容最高的一列等高
C、三列布局，左列寬度畫素數確定，中、右列隨容器寬度等寬彈性伸縮
D、多個寬高不等的元素，實現無縫瀑布流佈局
4、關於HTML語義化，以下哪個說法是正確的？
答案: D
A、語義化的HTML有利於機器的閱讀，如PDA手持裝置、搜尋引擎爬蟲；但不利於人的閱讀
B、Table 屬於過時的標籤，遇到資料列表時，需儘量使用 div 來模擬表格
C、語義化是HTML5帶來的新概念，此前版本的HTML無法做到語義化
D、header、article、address都屬於語義化明確的標籤
5、關於HTTP協議，下面哪個說法是正確的？
答案: C
A、HTTP協議是有狀態協議。
B、以下是一個Http連結的response 的響應頭： GET /xxx/xxx/js/lib/test.js HTTP/1.1 Host: 127.0.0.1 Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */*
C、RESTful 介面中，利用HTTP協議的method欄位來描述要對資源操作的方式，比如GET表示獲取資源，POST表示新增一個資源，PUT表示更新資源,DELETE 表示刪除資源等等。
D、一個HTTP請求返回的HTTP狀態碼中，304表示臨時重定向。
6、使用 for in 迴圈陣列中的元素會列舉原型鏈上的所有屬性，過濾這些屬性的方式是使用 ___函式
答案：
hasOwnProperty
7、在空白處填入適當的程式碼使輸出結果成立：
function showMoney( ) {
____
};
var personA = new Object;
var personB = new Object;
personA.money= "100";
personB.money= "150";
personA.showMoney= showMoney;
personB.showMoney= showMoney;
輸出結果：
console.log(personA.showMoney( )); //"100"
console.log(personB.showMoney( )); //"150"
答案：
return this.money;
8、刪除給定陣列中的第二項和第三項，並且在得到的新的陣列中第一項後面新增一個新的值
var arr1 = ['a','b','c','d','e'];
var arr2 = arr1.__(__,__,'newvalue')
答案：
splice
1
2
9、寫一個求和的函式sum，達到下面的效果
// Should equal 15
sum(1, 2, 3, 4, 5);
// Should equal 0
sum(5, null, -5);
// Should equal 10
sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
'E', 1, 'F', 1, 'G', 1);
// Should equal 0.3, not 0.30000000000000004
sum(0.1, 0.2);
答案：
function sum(...arr){
if(arr.length===0){return ;}
var sum=0;
for(var i=0;i<arr.length;i++){
if(!isNaN(parseFloat(arr[i]))){
sum+=parseFloat(arr[i])||0;
}
}
return sum.toFixed(3)*1000/1000;
}
10、請寫一個表格以及對應的CSS，使表格奇數行為白色背景，偶數行為灰色背景，滑鼠移上去時為黃色背景。
答案：
<table class="table">
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
</table>
<style>
.table tr:nth-child(2n-1){
background-color:white;
}
.table tr:nth-child(2n){
background-color:grey;
}
.table tr:hover{
background-color:yellow;
}
</style>
11、寫一個traverse函式，輸出所有頁面寬度和高度大於50畫素的節點。
答案：
function traverse(){
var domNodes=document.querySelectorAll('body *');
var arr=[...domNodes
arr.filter(function(item){
return item.offsetWidth>50&&item.offsetHeight>50;
});
return arr;