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

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（銷毀後） 在實例銷毀之後調用。
調用後，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在伺服器端渲染期間不被調用。

如下圖所示: