2018年螞蟻金服前端一面總結（面向2019屆學生）

時間 2019-11-06

標籤 2018年螞蟻前端一面總結面向學生简体版

原文原文鏈接

先簡短的介紹一下我本身吧，我是一個前端學習者，雖然我基礎知識也學了比較好，可是許久不用的知識就像流失的水，很容易就忘。在此次螞蟻金服的電話面試裏面認識到了本身不少不足的地方吧。雖然在阿里內推後的人才觀的問題裏面我以爲本身作的仍是很不錯的，可是在真正的編程題裏面，才發現本身的編程其實須要更加的提高。前端

接下來就分析一下此次螞蟻金服的電話面試的題目吧，其實這些題目我也都知道基本的答案，可是回答的時候終究仍是緊張了，致使不少問題都回答的都很差。vue

若是不想看完，那就記得看看總結吧。java

簡短的介紹一下本身

這個回答，我就簡短的介紹了本身的學校專業，而後學習了什麼樣的專業課，大一大二大三學習編程的歷程。android

爲何要學習前端

對於我我的而言的話，大一在acm集訓隊裏面，以爲總是刷題有點不是很和本身的性格，而後就開始轉向了學習java進而學習了android，後來又因爲一些緣由吧。最後選擇了學習前端。es6

瞭解js的事件嗎？說說js的事件

JavaScript 使咱們有能力建立動態頁面。事件是能夠被 JavaScript 偵測到的行爲。面試

網頁中的每一個元素均可以產生某些能夠觸發JavaScript函數的事件。比方說，咱們能夠在用戶點擊某按鈕時產生一個 onClick事件來觸發某個函數。事件在 HTML 頁面中定義。正則表達式

一些簡單的事件仍是要記得的編程

當用戶進入或離開頁面時就會觸發 onload 和 onUnload 事件
表單裏面使用的onFocus，onBlur，onChange

下面是一個使用 onChange 事件的例子。用戶一旦改變了域的內容，checkEmail() 函數就會被調用。segmentfault

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit 用於在提交表單以前驗證全部的表單域。
onMouseOver 和 onMouseOut 用來建立「動態的」按鈕。

綁定事件的方法?

嵌入dom數組

<button onclick="open()">按鈕</button>
<script>
function open(){
    alert(1)
}
</script>

直接綁定

<button id="btn">按鈕</button>
<script>
document.getElementById('btn').onclick = function(){
    alert(1)
}
</script>

事件監聽

<button id="btn">按鈕</button>
<script>
document.getElementById('btn').addEventListener('click',function(){
    alert(1)
})
//兼容IE
document.getElementById('btn').attachEvent('click',function(){
    alert(1)
})
</script>

ie和w3c綁定事件的標準有沒有不同？

代碼說明吧，ie綁定事件是用attachEvent方法，刪除事件是detachEvent方法

//添加事件監聽兼容函數  
function addHandler(target, eventType, handler){  
    if(target.addEventListener){//主流瀏覽器  
        addHandler = function(target, eventType, handler){  
            target.addEventListener(eventType, handler, false);  
        };  
    }else{//IE  
        addHandler = function(target, eventType, handler){  
            target.attachEvent("on"+eventType, handler);  
        };        
    }  
    //執行新的函數  
    addHandler(target, eventType, handler);  
}  
//刪除事件監聽兼容函數  
function removeHandler(target, eventType, handler){  
    if(target.removeEventListener){//主流瀏覽器  
        removeHandler = function(target, eventType, handler){  
            target.removeEventListener(eventType, handler, false);  
        }         
    }else{//IE  
        removeHandler = function(target, eventType, handler){  
            target.detachEvent("on"+eventType, handler);  
        }         
    }  
    //執行新的函數  
    removeHandler(target, eventType, handler);  
}

瞭解事件流嗎？事件流的順序是什麼？

用一張圖片解析一下吧

一個完整的JS事件流是從window開始，最後回到window的一個過程

事件流被分爲三個階段(1~ 5)捕獲過程、(5~ 6)目標過程、(6~ 10)冒泡過程

js的基本數據類型

基本數據類型有五種Undefined、Null、Boolean、Number和String，也叫作簡單的數據類型，還有一種複雜的數據類型是Object，但不屬於基本數據類型。

說說字符串經常使用的十個函數

舉下例子吧，其實在控制檯打印一下就有了的

charAt() 返回在指定位置的字符。
concat() 鏈接字符串。
fromCharCode() 從字符編碼建立一個字符串。
indexOf() 檢索字符串。
match() 找到一個或多個正則表達式的匹配。
replace() 替換與正則表達式匹配的子串。
search() 檢索與正則表達式相匹配的值。
slice() 提取字符串的片段，並在新的字符串中返回被提取的部分。
split() 把字符串分割爲字符串數組。
substr() 從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
toLocaleLowerCase() 把字符串轉換爲小寫。
toLocaleUpperCase() 把字符串轉換爲大寫。
toLowerCase() 把字符串轉換爲小寫。
toUpperCase() 把字符串轉換爲大寫。
toString() 返回字符串。
valueOf() 返回某個字符串對象的原始值。

說說數組經常使用的十個函數

這個也舉下例子吧，其實在控制檯打印一下就有了的

concat() 鏈接兩個或更多的數組，並返回結果。
join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop() 刪除並返回數組的最後一個元素
push() 向數組的末尾添加一個或更多元素，並返回新的長度。
reverse() 顛倒數組中元素的順序。
shift() 刪除並返回數組的第一個元素
slice() 從某個已有的數組返回選定的元素
sort() 對數組的元素進行排序
splice() 刪除元素，並向數組添加新元素。
toSource() 返回該對象的源代碼。
toString() 把數組轉換爲字符串，並返回結果。
toLocaleString() 把數組轉換爲本地數組，並返回結果。
unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf() 返回數組對象的原始值。

談談this是什麼，this表明什麼

this是Javascript語言的一個關鍵字。它表明函數運行時，自動生成的一個內部對象，只能在函數內部使用。隨着函數使用場合的不一樣，this的值會發生變化。可是有一個總的原則，那就是this指的是，調用函數的那個對象。

改變this指向的方法

要想把 this 的值從一個上下文傳到另外一個，就要用 call 或者apply 方法。

// 一個對象能夠做爲call和apply的第一個參數，而且this會被綁定到這個對象。
var obj = {a: 'Custom'};

// 這個屬性是在global對象定義的。
var a = 'Global';

function whatsThis(arg) {
  return this.a;  // this的值取決於函數的調用方式
}

whatsThis();          // 'Global'
whatsThis.call(obj);  // 'Custom'
whatsThis.apply(obj); // 'Custom'

在a標籤裏面添加一個點擊事件，那麼點擊事件的this指向的是什麼。

<a onclick="alert((function(){return this})());">
  Show inner this
</a>

這種狀況下，沒有設置內部函數的this，因此它指向global/window對象（即非嚴格模式下調用的函數未設置this時指向的默認對象）。

ES6有哪些新增的東西

這個就太多了，你們能夠看看個人博客瞭解一下簡單的，固然，更多仍是得看看阮一峯的es6教程吧。

說說jq經常使用的一些函數

jq經常使用的函數也就太多了，這裏由於我在簡歷裏面寫了瞭解jq因此才被面到，你們根據本身的理解回答就行了吧。

談談vue的生命週期

這裏給出一張圖片就好，不用問我爲何

vue綁定input數據的方法

回答：v-model

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

談談http協議

HTTP（HyperText TransportProtocol）是超文本傳輸協議的縮寫，它用於傳送WWW方式的數據，關於HTTP協議的詳細內容請參考RFC2616。HTTP協議採用了請求/響應模型。客戶端向服務器發送一個請求，請求頭包含請求的方法、URL、協議版本、以及包含請求修飾符、客戶信息和內容的相似於MIME的消息結構。服務器以一個狀態行做爲響應，響應的內容包括消息協議的版本，成功或者錯誤編碼加上包含服務器信息、實體元信息以及可能的實體內容。

一般HTTP消息包括客戶機向服務器的請求消息和服務器向客戶機的響應消息。這兩種類型的消息由一個起始行，一個或者多個頭域，一個指示頭域結束的空行和可選的消息體組成。HTTP的頭域包括通用頭，請求頭，響應頭和實體頭四個部分。每一個頭域由一個域名，冒號（:）和域值三部分組成。域名是大小寫無關的，域值前能夠添加任何數量的空格符，頭域能夠被擴展爲多行，在每行開始處，使用至少一個空格或製表符。

主要還得記得http中Status-Code的第一個數字定義響應的類別，後兩個數字沒有分類的做用。第一個數字可能取5個不一樣的值：