撩課-Web大前端每天5道面試題-Day19

撩課學院發表於2018-12-27

1.實現一個函式clone,可以對JavaScript中的5種主要的資料型別(包括Number、String、Object、Array、Boolean)進行值複製

考察點1:對於基本資料型別和引用資料型別在記憶體中存放的是值還是指標這一區別是否清楚
考察點2:是否知道如何判斷一個變數是什麼型別的
考察點3:遞迴演算法的設計
// 方法一:
Object.prototype.clone = function() {
var o = this.constructor === Array ? [] : {};
for (var e in this) {
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}

//方法二:
/**
* 克隆一個物件
* @param Obj
* @returns
*/
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; //建立一個空的陣列
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
} else if (Obj instanceof Object) {
buf = {}; //建立一個空物件
for (var k in Obj) { //為這個物件新增新的屬性
buf[k] = clone(Obj[k]);
}
return buf;
} else { //普通變數直接賦值
return Obj;
}
}

 

2.下面這個ul,如何點選每一列的時候alert其index?(閉包)

題目:
 <ul id=”test”>
 <li>這是第一條</li>
 <li>這是第二條</li>
 <li>這是第三條</li>
 </ul>
// 方法一:
var lis=document.getElementById(`test`).getElementsByTagName(`li`);
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
};
}

//方法二:
var lis=document.getElementById(`test`).getElementsByTagName(`li`);
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
alert(a);
}
})(i);
}

 

3.對於MVVM的理解?

MVVM 是 Model-View-ViewModel 的縮寫。
Model代表資料模型,也可以在Model中定義資料修改和操作的業務邏輯。
View 代表UI 元件,它負責將資料模型轉化成UI 展現出來。
ViewModel 監聽模型資料的改變和控制檢視行為、處理使用者互動,
簡單理解就是一個同步View 和 Model的物件,連線Model和View。
在MVVM架構下,View 和 Model 之間並沒有直接的聯絡,
而是通過ViewModel進行互動,Model 和 ViewModel 之間的互動是雙向的,
 因此View 資料的變化會同步到Model中,而Model 資料的變化也會立即反應到View 上。
ViewModel 通過雙向資料繫結把 View 層和 Model 層連線了起來,
而View 和 Model 之間的同步工作完全是自動的,無需人為干涉,
因此開發者只需關注業務邏輯,不需要手動操作DOM, 
不需要關注資料狀態的同步問題,
複雜的資料狀態維護完全由 MVVM 來統一管理。

 

4.什麼是vue生命週期?

Vue 例項從建立到銷燬的過程,就是生命週期。
從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程,
稱之為 Vue 的生命週期。

 

5.Vue的生命週期?

beforeCreate(建立前) 在資料觀測和初始化事件還未開始
created(建立後) 完成資料觀測,屬性和方法的運算,
初始化事件,$el屬性還沒有顯示出來
beforeMount(載入前) 在掛載開始之前被呼叫,
相關的render函式首次被呼叫。
例項已完成以下的配置:編譯模板,把data裡面的資料和模板生成html。
注意此時還沒有掛載html到頁面上。
mounted(載入後) 在el 被新建立的 vm.$el 替換,並掛載到例項上去之後呼叫。
例項已完成以下的配置:用上面編譯好的html內容替換el屬性指向的DOM物件。
完成模板中的html渲染到html頁面中。此過程中進行ajax互動。
beforeUpdate(更新前) 在資料更新之前呼叫,發生在虛擬DOM重新渲染和打補丁之前。
可以在該鉤子中進一步地更改狀態,
不會觸發附加的重渲染過程。
updated(更新後) 在由於資料更改導致的虛擬DOM重新渲染和打補丁之後呼叫。
呼叫時,元件DOM已經更新,所以可以執行依賴於DOM的操作。
然而在大多數情況下,應該避免在此期間更改狀態,因為這可能會導致更新無限迴圈。
該鉤子在伺服器端渲染期間不被呼叫。
beforeDestroy(銷燬前) 在例項銷燬之前呼叫。
例項仍然完全可用。
destroyed(銷燬後) 在例項銷燬之後呼叫。
呼叫後,所有的事件監聽器會被移除,所有的子例項也會被銷燬。該鉤子在伺服器端渲染期間不被呼叫。

如下圖所示:

相關文章