阿里巴巴2018秋招正式試題及其答案
阿里正式試題
1. 下面程式碼中，當點選 點我 時，輸出的正確結果是：B
<div id="div1">點我</div>
</div>
var div2=document.getElementById('div2');
var div1=document.getElementById('div1');
div1.addEventListener('click', function(event){console.log("A");}, true);
div2.addEventListener('click', function(event){console.log("B");});
div1.addEventListener('click', function(event){console.log("C");}, false);
div2.addEventListener('click', function(event){console.log("D");}, true);
A、A B C D
B、D A C B
C、A D B C
D、D C A B
E、B D A C
2. 關於 Fetch API，以下描述錯誤的是：F
A、fetch() 返回的是一個 Promise 例項
B、Fetch API 可以結合 async / await 使用
C、Fetch API 提供的 API 囊括但不限於 XHR 的所有功能
D、Fetch API 可以跨域
E、Fetch 提供了對 Request 和 Response 物件的通用定義
F、fetch() 必須接受一個引數：資源的路徑
3. 以下程式碼片段在 Node.js 環境下執行的結果順序是：C
console.log('1');
}, 0);
process.nextTick(function(){
console.log("3");
});
console.log('2');
setImmediate(function(){
console.log("4");
});
A、2、1、4、3
B、2、1、3、4
C、2、3、1、4
D、4、1、2、3
E、4、2、1、3
F、1、4、2、3
4. 以下哪個標籤不屬於 svg 元素：C
A、<circle>
B、<ellipse>
C、<rectangle>
D、<marker>
E、<polyline>
F、<animate>
5.
關於 ES6 當中箭頭函式說法錯誤的是:A
A、箭頭函式可以使用 yield
B、箭頭函式不可以用作建構函式
C、不會改變 this 的指向
D、箭頭函式是 Function 的例項
E、箭頭函式函式體沒有花括號可以做為返回值
F、內部不能訪問到 arguments 物件
6. 關於 JavaScript 中的函式，以下說法正確的有：BF
在已知名稱的函式的函式體宣告語句之外，不能獲知該函式的形參個數
A、在函式內部，可以通過 arguments 獲取函式的實參個數
B、因為 arguments 是 Array 的例項，因此可以使用陣列的方法去操作它
C、對同一個函式 foo，使用 new foo() 和 foo() 呼叫的結果是一樣的
D、如果一個函式中沒有使用 return 語句，則它預設返回 null
E、如果函式的實參是一個引用物件，則對應形參會和該實參指向同一個物件
F、如果函式的實參是一個引用物件，則對應形參會和該實參指向同一個物件
7. 關於 CSS 的 position 屬性，下列說法中正確的是：AD
預設值是 relative
A、值為 static 時，left、right、top、bottom 的值無效。
B、fixed 相對於頁面視口定位
C、absolute 是相對於 body 標籤定位
D、absolute 的元素可以設定外邊距（margins），且不會與其他邊距合併
E、fix 和 absolute 相對的定位物件是一樣的
10．關於ES6類（Class）的實現，以下表述正確的是：ABDE
A、ES6 的 class 只是一個語法糖，實際上還是基於原型來實現的
B、如果沒在 class 裡面定義 constructor 方法，編譯器會自動幫你新增
C、ES6 的 class 中支援定義私有屬性
E、如果沒有顯式指定構造方法，則會新增預設的 constructor 方法
11. 變數 data 為樹狀結構，資料大小層次不固定，格式如下：
const data = [
{
"id": '1',
"children": [
{
"id": '1-1',
"children": [],
"value": "a-1",
},
{
"id": '1-2',
"children": [],
"value": "a-2",
},
],
"value": "a",
},
{
"id": '2',
"children": [
{
"id": '2-1',
"children": [
{
"id": '2-1-1',
"children": [],
"value": "c-1",
},
],
"value": "b-1",
},
],
"value": "b",
},
{
"id": '3',
"children": [
],
"value": "c",
},
];
請實現個方法 transformData, 遞迴處理資料，給所有的父節點（children 不為空的）新增一個欄位 relateId, 值為當前第一個子節點（children 為空的） id 的值。
如上面的資料經過處理後的結果為：
[
{
"id": "1",
"children": [
{
"id": "1-1",
"children": [],
"value": "a-1"
},
{
"id": "1-2",
"children": [],
"value": "a-2"
}
],
"value": "a",
"relateId": "1-1"
},
{
"id": "2",
"children": [
{
"id": "2-1",
"children": [
{
"id": "2-1-1",
"children": [],
"value": "c-1"
}
],
"value": "b-1",
"relateId": "2-1-1"
}
],
"value": "b",
"relateId": "2-1-1"
},
{
"id": "3",
"children": [],
"value": "c"
}
]
12. 下面 HTML 中的內嵌 JS 程式碼會生成一個列表，格式為 "{index}. {點選目標的全名}"。於此同時當點選列表中的某個名字會在控制檯中輸出 "click on no.{點選目標的index} {firstName},{lastName}"。請嘗試指出程式碼中存在的 BUG以及可能會發生的效能問題，並從優雅、高效、可讀性以及效能方面進行優化，在指出問題的同時請儘量給出修正程式碼。
<meta charset="UTF-8">
<title>Title</title>
<ul id="list">
</ul>
<script>
maxLength = 4;
list = document.querySelector('#list');
function processName(name) {
return {
firstName: name[0],
lastName: name[1],
getFullName() {
return this.firstName + ' ' + this.lastName;
},
};
}
var names = [
['Gregor', 'Bachmann'],
['Anita', 'Bruns'],
['Anke', 'Dorn'],
['Ulrich', 'Koch'],
['Dietrich', 'Riedl'],
['Wolfgang', 'Jahn'],
['Gesine', 'Sturm'],
['Theodor', 'Petersen'],
];
var validCount = 0;
for (var i = 0; i < names.length; i += 1) {
var flag1 = names[i][0].indexOf('A') !== 0;
var getFullName;
if (flag1 && names[i][0].length >= 4) {
getFullName = processName(names[i]).getFullName;
var lastName = processName(names[i]).lastName;
var firstName = processName(names[i]).firstName;
var span = document.createElement('li');
var textNode = document.createTextNode(i + 1 + '. ' + getFullName());
span.appendChild(textNode);
span.addEventListener('click', function () {
console.log('click on no.' + i + ' ' + firstName + ',' + lastName);
});
if (validCount + 1 > maxLength) {
continue;
}
validCount += 1;
list.appendChild(span);
}
}
</script>
13. 根據以下的頁面場景中繪製紅框的部分的效果示例，請簡述開發一個類似於的清單卡片展示元件的設計、實現思路。請結合自身的經驗，儘可能給給出周全的設計和實現方案。