前端面試題

於今年3月份辭職之後找工作，整理一下我的面試中遇到的各種面試題。

關於盒子模型？html中的每乙個元素都可以看作是乙個盒模型，在網頁中乙個元素由content , padding , border,margin組成，這四部分整體組成乙個盒子模型;當元素使用了padding的時候我習慣性加上box-sizing:border-box;

比如乙個寬高都是100px，padding:10px;border:10px;margin:10px的div，在ie瀏覽器中固定寬高的元素不會被padding撐開，所以ie中這個div的盒子模型是width:100px+border:10px+margin:10px;

一般情況下使用padding的時候會連用box-sizing:border-box;這個屬性的意義是表示這個元素去遵循padding 在內部不會撐大寬高的盒模型；

如何實現乙個未知寬高的元素的居中？假設div的寬高都是100px；

1、div

div父級標籤定義height

可以解決父級標籤獲取不到高度的問題；

overflow:hidden

父級標籤加overflow:hidden;

vue的生命週期？vue的完整的生命週期從建立，到初始化資料，再到編譯，掛載dom,渲染，更新，銷毀等一系列的乙個過程叫做vue的生命週期

建立前後

beforecreate

基本不用的，el和data還沒有初始化，只是乙個空殼，無法訪問到資料和dom

created

data初始化完成,el沒有，一般在這裡做初始化資料的獲取也可以更改資料，不會觸發updated函式；

掛載前後

beforemount

data和el完成初始化；相關的render函式第一次被呼叫

mounted

基本上的資料載入請求都在這一階段，完成掛載

更新前後

beforeupdate

資料更新前

updated

資料更新

銷毀前後

beforedestory

刪除前destoryed

刪除vue資料雙向繫結的原理？利用了object.defineproperty()這個方法重新定義了物件獲取屬性值（get）和設定屬性值（set）的操作來實現的。

vue的路由實現？1、利用url中的「#」；

2、利用history在html5中新增的方法；

（平常按步驟搭建的vue專案在執行的時候url中會有#，在ruoter的index.js檔案的router下寫mode:'history'，執行則無#）

vue中的key？1、給每個節點做唯一標識；

2、高新更新dom；

3、用v-for更新已經渲染的元素的時候採用就地復用的策略，如果資料項的順序被改變，vue將不會移動dom元素來匹配資料項的順序，而是簡單的復用此處的每個元素，確保他在特定的索引值下顯示已被渲染過的每個元素。

vue中的指令及用法？v-if

條件判斷，條件為false的時候，元素不會渲染；

v-else

與v-if連用，兩者只會顯示乙個

v-show

條件判斷，條件為false的時候也會渲染html

v-for

基於乙個陣列渲染出乙個列表，相當於js裡面的遍歷，v-for= '( item ,key,index) in list',裡面的in也可以寫成 of

v-bind

動態的繫結乙個或者多個屬性，簡寫為『：』,例如『:class=''』， ':style', ':src='

v-on

監聽事件，簡寫為『@』，例如『@click=show』, '@submit=submit',

v-model

一般用於表單上面，可以很輕鬆的實現資料的雙向繫結；例如：

} data()

document.getelementsbytagname("html")[0].style.fontsize = 100 * ( cw / 720) + 'px'

em會繼承父級字型大小，改變某個節點的字型大小很可能會影響整個頁面；

px絕對單位，按照螢幕畫素精確計算；

js的深轉殖和淺轉殖？淺轉殖

假設b複製來自a，當a改變的時候,b也會發生變化，就叫淺轉殖；

例如：var a=;

var bs=a;

bs.name='ef';

console.log(a,bs,'ab')==》ef,ef,ab

解決方式：

1、用運算子...

var a=;

var bs=;

bs.name='ef';

console.log(a,bs,'ab')==》ddd,ef,ab

2、object.assgin()

var a=;

var bs=object.assgin({},a);

bs.name='ef';

console.log(a,bs,'ab');==>ddd,ef,ab

1、2只解決了第一層的拷貝問題；

深轉殖假設b沒有變化，就是深轉殖；

1、json.parse(json.stringify)

var a=};

var bs=json.parse(json.stringify(a));

bs.name.first='ef';

console.log(a,bs,'ab')==》a沒變，b變了

該方法的缺點：

意思是:假設a中物件是undefined，symbol，函式等，console.log（bs），物件為這些的bs的陣列裡面不顯示；

2、使用 lodash 的深拷貝函式，可以解決上面的缺點；

function deepclone(obj)

reflect.ownkeys(newobj).foreach(key => {

newobj[key] = isobject(obj[key]) ? deepclone(obj[key]) : obj[key]

return newobj

//例子

let obj = {

a: [1, 2, 3],

b: {

c: 2,

d: undefined

let newobj = deepclone(obj)

newobj.b.c = 1

console.log(obj,newobj)

前端面試題

前端面試題

前端面試題

前端面試題

相關推薦