當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

面试题整理（全）

發(fā)布時(shí)間：2023/12/18 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了面试题整理（全）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

HTML/CSS

1.行內(nèi)元素和塊級(jí)元素的區(qū)別？

2.列舉塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽

3.css選擇器優(yōu)先級(jí)

JavaScript基礎(chǔ)

1.js有哪些數(shù)據(jù)類型？

2.type of和instance of的區(qū)別

3.怎么判斷兩個(gè)對(duì)象相等？

4.js中定義函數(shù)的方式

5.js中函數(shù)有哪些調(diào)用形式？

6.==和===的區(qū)別

7.null和undefined區(qū)別

8.列舉數(shù)組api

9.列舉字符串a(chǎn)pi

10.document.write和innerHTML區(qū)別

11.區(qū)分split（）slice（），splice（），join（）

12.列舉3強(qiáng)制轉(zhuǎn)換2隱式轉(zhuǎn)換

13.如何判斷一個(gè)變量foo是數(shù)組

14.創(chuàng)建函數(shù)，對(duì)象，數(shù)組的方法（常用）

?15.判斷是否是數(shù)組

16.深拷貝和淺拷貝

19.數(shù)組去重

JavaScript高級(jí)

1.什么是原型對(duì)象？

2.什么是原型鏈？

3.什么是構(gòu)造函數(shù)？

4.js實(shí)現(xiàn)繼承的方式

5.什么是閉包？有什么作用？注意

6.什么是內(nèi)存泄露？哪些操作會(huì)引起內(nèi)存泄露

7.什么是預(yù)解析？

8.this關(guān)鍵字指向問(wèn)題

9.call（）apply（）和bind（）的區(qū)別

10.caller和callee的區(qū)別

11.new操作符具體做了什么？

12.js中eval的功能是什么？缺點(diǎn)是什么？

13.封裝，繼承，多態(tài)

14.事件模型

15.宏任務(wù)和微任務(wù)

16.判斷數(shù)據(jù)類型的方法

17.字面量和new出來(lái)的對(duì)象和Object.create（）創(chuàng)建出來(lái)的對(duì)象有什么區(qū)別

18.為什么JS是單線程的

19.箭頭函數(shù)和普通函數(shù)的區(qū)別

20.模塊化的好處

21.e.target和e.currentTarget的區(qū)別

22.exports和moudle.export的區(qū)別

23.JS性能優(yōu)化

24.回流和重繪

25.link標(biāo)簽和@import標(biāo)簽

26.進(jìn)程，線程

27.src和herf的區(qū)別

28.內(nèi)存泄露以及解決

HTML5

1.html5有哪些新增標(biāo)簽？

2.html5有哪些新增屬性？

3.readyonly和disabled的區(qū)別

4.哪些標(biāo)簽存在偽元素？

5.html5的網(wǎng)頁(yè)為什么要寫

6.h5新增了哪些新特性？

7.sessionstorage，localstorage和cookie的區(qū)別

CSS3

1.px，em，rem的區(qū)別

2.CSS3新增偽類

3.pposition幾個(gè)屬性的作用

4:怎么讓一個(gè)不定寬高的div元素，垂直水平居中

5.清除浮動(dòng)有哪些方式？

6.讓兩個(gè)塊級(jí)元素在一行顯示有哪些辦法？

7.如何設(shè)置一個(gè)元素垂直居中？

8.圖片懶加載的原理，圖片懶加載的插件

9.CSS3新增了哪些新特性？

10.display:none和visibility:hidden區(qū)別

11.less和scss

BOM/DOM

1.在一個(gè)頁(yè)面中給多個(gè)元素設(shè)置相同的id，會(huì)導(dǎo)致什么問(wèn)題？

2.列舉dom元素增刪改查的api

3.bom中有哪些常用對(duì)象

4.什么是事件委托？原理？

5.js的幾種定時(shí)器，區(qū)別？

web

1.列舉常見(jiàn)的瀏覽器兼容問(wèn)題

2.如何實(shí)現(xiàn)多個(gè)標(biāo)簽頁(yè)的通信？

jQuery

1.$each（）和$（selector）.each()有什么不同？

2.$each（）和foreach區(qū)別

3.原生js的window.onload與jQuery的$（document）.ready（function（）｛｝，$function（）｛｝）區(qū)別

4.jQuery實(shí)現(xiàn)連式編程的原理

5.jQuery如何多次給同一個(gè)標(biāo)簽綁定同一個(gè)事件？

6.如何開發(fā)jQuery插件？

7.jQuery哪些方法不支持鏈?zhǔn)讲僮?#xff1f;

vue

1.vue如何封裝一個(gè)組件？

2.computed和watch的區(qū)別

3.對(duì)vue中插槽的理解？

4.v-if和v-show的區(qū)別

5.什么是vuex，在什么場(chǎng)景下使用

6.vue路由的使用步驟

7.常見(jiàn)的vue組件庫(kù)

8.對(duì)mvvm的理解

9.vue的生命周期

10.vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理？

11.vue創(chuàng)建組件的時(shí)候，data為什么要使用匿名函數(shù)return一個(gè)對(duì)象？

12.vue組件傳參

13.vue有幾種路由模式？

14.路由傳參之query和params

15.vue的優(yōu)點(diǎn)

16.vue路由導(dǎo)航守衛(wèi)和應(yīng)用場(chǎng)景

17.vue如何定義一個(gè)過(guò)濾器？

18.vue如何自定義一個(gè)vue指令？

19.vue路由模塊中$route和$router的區(qū)別？

20.v-for指令循環(huán)遍歷時(shí)key屬性的作用？

21.vue和react的區(qū)別

22.vue有哪些常用的事件修飾符

23.vue常用的指令

24.vue如何解決插值表達(dá)式閃爍問(wèn)題？

25.vue如何實(shí)現(xiàn)通過(guò)錨點(diǎn)值的改變切換組件？

26.vue中如何避免組件間樣式?jīng)_突

27.vue如何動(dòng)態(tài)添加一個(gè)路由規(guī)則？

28.vue優(yōu)化頁(yè)面加載效率的辦法

28.路由懶加載，組件懶加載

29.vue如何觸發(fā)一個(gè)自定義事件？

30.vue如何監(jiān)聽(tīng)自定義事件的執(zhí)行？

31.vue如何移除自定義事件？

32.vm.$mount(selector)方法的作用

33.keep-alive組件的作用是什么？

34.vue如何手動(dòng)銷毀一個(gè)vue實(shí)例

35.vue有哪些內(nèi)置的組件？

36.vue實(shí)例中有哪些屬性？

37.vue.use(plugin)的作用？注意問(wèn)題？

38.vm.$nextTick(fn)的作用

39.vue中混入（mixin）有什么作用

40.如何開發(fā)一個(gè)vue插件？

41.什么是ssr？如何實(shí)現(xiàn)ssr？

42.什么是spa？

43.首屏加載慢怎么解決

44.vue中data的屬性可以和methods中方法同名嗎，為什么？

45.vue權(quán)限管理

46.vue性能優(yōu)化

47.組件中name的作用 ?

48.虛擬dom的優(yōu)缺點(diǎn)

50.$refs

51.全局事件總線

?52.數(shù)據(jù)代理

?53.關(guān)于state和...mapState輔助函數(shù)

http/Ajax

1.常見(jiàn)http狀態(tài)碼

2.http請(qǐng)求方式

3.Ajax工作原理

4.如何解決跨域？

5.jsonp跨域原理

6.什么是同步和異步，哪種執(zhí)行方式好？

7.get和post的區(qū)別

8.localstorage，sessionstorage和cookie的區(qū)別

9.一個(gè)頁(yè)面從輸入url到頁(yè)面加載顯示完成，整個(gè)過(guò)程發(fā)生了什么

10.http切換到https需要做什么？

11.什么是restfulapi？

12.什么是漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

13.什么是頁(yè)面的回流和重繪？

14.如何優(yōu)化頁(yè)面性能？

15.什么是cdn加速？

16.什么是seo？

17.為什么利用多個(gè)域名存儲(chǔ)靜態(tài)資源更有效？

18.移動(dòng)端點(diǎn)擊事件有多少秒的延遲？原因？解決？

19.網(wǎng)站攻擊方式有哪些？

20.js中的垃圾回收機(jī)制

21.JS是單線程嗎？

22.JS如何實(shí)現(xiàn)異步操作？

23.分別介紹mvc，mvvm，mvp三種模式

24.清理瀏覽器緩存的方式

25.cookie機(jī)制，session機(jī)制，token機(jī)制

es6新特性

1.es6新增了哪些數(shù)據(jù)類型？

2.es6新增了哪些特性？

3.let和var的區(qū)別

4.async/await的使用場(chǎng)景

5.箭頭函數(shù)作用和使用

6.對(duì)promise的理解

微信小程序

1.微信小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)？

2.簡(jiǎn)單描述小程序的生命周期

3.微信小程序如何請(qǐng)求數(shù)據(jù)接口？

4.如何優(yōu)化小程序代碼包的體積？

HTML/CSS

1.行內(nèi)元素和塊級(jí)元素的區(qū)別？

塊級(jí)元素:

獨(dú)占一行

水平垂直方向的內(nèi)外邊距有效，可設(shè)置

行內(nèi)元素:

可以和其他非塊級(jí)元素共占一行

水平內(nèi)外邊距有效，垂直內(nèi)外邊距無(wú)效

2.列舉塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽

塊級(jí)標(biāo)簽:

div，p，h1-h6，section，header，footer

行內(nèi)標(biāo)簽:

span，em（i），strong（b），u，a

3.css選擇器優(yōu)先級(jí)

!important

行內(nèi)樣式

id選擇器

類選擇器

標(biāo)簽選擇器

通配符選擇器

---權(quán)重比較---

JavaScript基礎(chǔ)

1.js有哪些數(shù)據(jù)類型？

基本類型:number，string，Boolean，null，undefined，bigint，symbol

引用類型:object

2.type of和instance of的區(qū)別

type of判斷變量數(shù)據(jù)類型，返回字符串

a? instance of b判斷b是不是在a的原型鏈上，可以判斷數(shù)據(jù)類型，返回布爾值

3.怎么判斷兩個(gè)對(duì)象相等？

先判斷兩者是不是對(duì)象

再判斷兩個(gè)對(duì)象的所有key值是否相等

最后判斷兩個(gè)對(duì)象的key對(duì)應(yīng)的值是否相等

4.js中定義函數(shù)的方式

函數(shù)聲明:function fn（）｛｝
函數(shù)表達(dá)式:var fn = function（）｛｝
構(gòu)造函數(shù):var fn = new Function（參數(shù)1，參數(shù)2，函數(shù)體）

5.js中函數(shù)有哪些調(diào)用形式？

普通函數(shù)

對(duì)象的方法

事件處理函數(shù)

構(gòu)造函數(shù)

回調(diào)函數(shù)

6.==和===的區(qū)別

==比較值

===比較值和類型

7.null和undefined區(qū)別

數(shù)據(jù)類型不一樣?，用typeof進(jìn)行判斷，

null的數(shù)據(jù)類型是object，

undefined的數(shù)據(jù)類型是undefined

比較

==時(shí)，二者相等

===時(shí)，二者不相等

轉(zhuǎn)化成數(shù)字

null轉(zhuǎn)數(shù)字為0

undefined轉(zhuǎn)數(shù)字為nan

定義

null代表空對(duì)象，是一個(gè)空指針

undefined代表定義了沒(méi)賦值

應(yīng)用場(chǎng)景

null

作為函數(shù)的參數(shù)，表示該參數(shù)不是對(duì)象

作為對(duì)象原型鏈的終點(diǎn)

定義變量用來(lái)保存對(duì)象，初始化

undefined

變量聲明，沒(méi)有賦值

定義了形參，沒(méi)傳實(shí)參

對(duì)象的屬性不存在

函數(shù)沒(méi)有返回值

函數(shù)有返回值，沒(méi)有賦值

8.列舉數(shù)組api

push將元素添加到數(shù)組末尾，返回?cái)?shù)組長(zhǎng)度

pop將數(shù)組最右一個(gè)元素刪除，返回被刪除的元素

unshift在數(shù)組開頭添加一個(gè)元素，返回?cái)?shù)組長(zhǎng)度

shift刪除數(shù)組開頭的元素，返回被刪除的元素

splice（index，lenght）刪除數(shù)組元素，index是指定位置的下標(biāo)，length是刪除的長(zhǎng)度

concat連接數(shù)組

reverse翻轉(zhuǎn)數(shù)組

9.列舉字符串a(chǎn)pi

substr（start，length）截取字符串

substring（start，end）截取字符串

slice截取一段字符串

indexof查找字符串是否含有某元素，有，返回下標(biāo)，沒(méi)有，返回-1

lastindexof從后往前查找是否含有某元素

replace替換字符串

touppercase字符串轉(zhuǎn)大寫

tolowercase字符串轉(zhuǎn)小寫

charat獲取字符串指定索引的字符

10.document.write和innerHTML區(qū)別

document.write是指定在整個(gè)頁(yè)面區(qū)域的內(nèi)容

innerHTML是指定某個(gè)元素的內(nèi)容

11.區(qū)分split（）slice（），splice（），join（）

split（）字符串轉(zhuǎn)數(shù)組

join（）數(shù)組轉(zhuǎn)字符串

slice（）從數(shù)組/字符串截取一段

splice（）刪除指定的數(shù)組元素

12.列舉3強(qiáng)制轉(zhuǎn)換2隱式轉(zhuǎn)換

強(qiáng)制轉(zhuǎn)換:

轉(zhuǎn)number:Number（）parseInt（）parseFLoat（）

轉(zhuǎn)字符串:String（）toString（）

轉(zhuǎn)布爾:Boolean（）

隱式轉(zhuǎn)換:

隱式拼接字符串

數(shù)字+布爾自動(dòng)轉(zhuǎn)數(shù)字

13.如何判斷一個(gè)變量foo是數(shù)組

foo instance of Array
foo.constructor==Array
Array.isArray（foo）
Object.prototype.toString.call（foo）=="[Object Array]"

14.創(chuàng)建函數(shù)，對(duì)象，數(shù)組的方法（常用）

函數(shù):

函數(shù)聲明創(chuàng)建:function 函數(shù)名（參數(shù)）｛｝
變量聲明創(chuàng)建:var a = function（參數(shù)）｛｝
構(gòu)造函數(shù)創(chuàng)建:var a = new Function（參數(shù)）

對(duì)象:

字面量:var obj = ｛name:xxx，age:xxx｝
構(gòu)造函數(shù):var obj= new Object（）
構(gòu)造函數(shù)+原型:

數(shù)組：

?15.判斷是否是數(shù)組

16.深拷貝和淺拷貝

?17.es5新特性

嚴(yán)格模式
對(duì)象的屬性
新增object接口
新增數(shù)組api
新增函數(shù)接口bind

18.es6新特性

let，const
塊級(jí)作用域
箭頭函數(shù)
擴(kuò)展運(yùn)算符
class類
參數(shù)增強(qiáng)
解構(gòu)賦值
模板字符串 promise

19.數(shù)組去重

js數(shù)組去重的10種方法_sun6sian的博客-CSDN博客_js數(shù)組去重

JavaScript高級(jí)

1.什么是原型對(duì)象？

原型對(duì)象:函數(shù)的prototype屬性指向的對(duì)象，又用來(lái)存放實(shí)例對(duì)象的公有屬性和方法。所有的原型對(duì)象都是Object的實(shí)例

每一個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性的值是一個(gè)對(duì)象，叫做構(gòu)造函數(shù)的原型對(duì)象。一般把構(gòu)造函數(shù)的成員屬性綁定在prototype上，因?yàn)閜rototype上的屬性默認(rèn)可以通過(guò)實(shí)例對(duì)象訪問(wèn)到。好處就是每次通過(guò)new關(guān)鍵字創(chuàng)建實(shí)例對(duì)象的時(shí)候，這些方法不會(huì)在內(nèi)存中北重復(fù)創(chuàng)建

2.什么是原型鏈？

原型:

顯式原型prototype 隱式原型__proto__

原型鏈:

如果某個(gè)對(duì)象查找屬性，自己和原型對(duì)象上都沒(méi)有，那就會(huì)繼續(xù)往原型對(duì)象的原型對(duì)象上去找，這個(gè)例子里就是Object.prototype，這里就是查找的終點(diǎn)站了，在這里找不到，就沒(méi)有更上一層了（null里面啥也沒(méi)有），直接返回undefined。整個(gè)查找過(guò)程都是順著__proto__屬性，一步一步往上查找，形成了像鏈條一樣的結(jié)構(gòu)，這個(gè)結(jié)構(gòu)，就是原型鏈。所以，原型鏈也叫作隱式原型鏈。

3.什么是構(gòu)造函數(shù)？

構(gòu)造函數(shù)定義的時(shí)候，首字母一般大寫

構(gòu)造函數(shù)調(diào)用的時(shí)候，必須用new關(guān)鍵字

使用時(shí)，用的是構(gòu)造函數(shù)構(gòu)造出來(lái)的實(shí)例對(duì)象，而不是構(gòu)造函數(shù)

4.js實(shí)現(xiàn)繼承的方式

原型繼承

使用構(gòu)造函數(shù)繼承

組合繼承

extends關(guān)鍵字繼承

es5繼承

先創(chuàng)建子類的實(shí)例對(duì)象，在實(shí)例化父類并添加到子類this中原理:原型或構(gòu)造函數(shù)機(jī)制具體操作:

?es6繼承

先創(chuàng)建父類的實(shí)例對(duì)象this（所以必須先調(diào)用父類的super()方法），然后再用子類的構(gòu)造函數(shù)修改this 原理: class關(guān)鍵字定義類，里面有構(gòu)造方法 extends實(shí)現(xiàn)類之間的繼承子類在constructor方法中調(diào)用super方法繼承父類的this對(duì)象（super指代父類的實(shí)例對(duì)象）具體操作:

5.什么是閉包？有什么作用？注意

一個(gè)外層函數(shù)，包裹著一個(gè)內(nèi)層函數(shù)和外層函數(shù)作用域的變量，內(nèi)層函數(shù)通過(guò)return返回給外層函數(shù)，內(nèi)層函數(shù)可以使用外層函數(shù)作用域的變量，當(dāng)從外部調(diào)用內(nèi)層函數(shù)時(shí)，外層函數(shù)組用域的變量被引用著無(wú)法釋放，形成閉包。

好處:

要保護(hù)的變量可以反復(fù)使用并且不會(huì)被外界篡改

延長(zhǎng)變量的作用范圍

壞處:

內(nèi)存泄露（變量用完不被釋放，占用內(nèi)存）

在處理速度和內(nèi)存消耗方面對(duì)腳本性能具有負(fù)面影響

6.什么是內(nèi)存泄露？哪些操作會(huì)引起內(nèi)存泄露

內(nèi)存泄漏:指本應(yīng)該被垃圾回收機(jī)制回收的內(nèi)存空間由于某種特殊原因沒(méi)被回收

引起:濫用全局變量和閉包導(dǎo)致內(nèi)存泄露

7.什么是預(yù)解析？

js代碼執(zhí)行前，解析引擎先對(duì)代碼進(jìn)行一個(gè)預(yù)先檢查，主要對(duì)變量和函數(shù)的聲明進(jìn)行提升，將變量和函數(shù)的聲明提到代碼最前面。變量只提升聲明，不提升賦值

8.this關(guān)鍵字指向問(wèn)題

普通函數(shù)，this指向window
構(gòu)造函數(shù)，this指向new出來(lái)的實(shí)例對(duì)象
事件處理函數(shù)，this指向事件源
回調(diào)函數(shù)，this指向window
對(duì)象的成員方法，誰(shuí)調(diào)用方法，this就指向誰(shuí)

9.call（）apply（）和bind（）的區(qū)別

相同點(diǎn):

都是改變this指向

第一個(gè)參數(shù)都是this指向的新對(duì)象

不同點(diǎn):

傳參

call和bind可接收多個(gè)參數(shù)，第一個(gè)是this指向的新對(duì)象，后面的參數(shù)按順序引入

apply只能接收兩個(gè)參數(shù)，第一個(gè)是this指向的新對(duì)象，第二個(gè)是數(shù)組

函數(shù)調(diào)用

call和apply都是直接調(diào)用，立即執(zhí)行

bind會(huì)創(chuàng)建一個(gè)新的函數(shù)，當(dāng)被調(diào)用的時(shí)候，將其this關(guān)鍵字設(shè)置為提供的值，我們必須手動(dòng)去調(diào)用

call用于對(duì)象的繼承、偽數(shù)組轉(zhuǎn)換成真數(shù)組

apply用于找出數(shù)組中的最大值和最小值以及數(shù)組合并

bind用于vue或者react框架中改變函數(shù)的this指向?

10.caller和callee的區(qū)別

fun.caller返回調(diào)用這個(gè)fun函數(shù)的對(duì)象，即fun的執(zhí)行環(huán)境，如果執(zhí)行環(huán)境是window，返回null

callee是arguments的一個(gè)屬性，指向函數(shù)本身

11.new操作符具體做了什么？

?new的作用

訪問(wèn)構(gòu)造函數(shù)的屬性

訪問(wèn)構(gòu)造函數(shù)prototype的屬性

12.js中eval的功能是什么？缺點(diǎn)是什么？

功能:將一個(gè)字符串當(dāng)做js代碼執(zhí)行

缺點(diǎn):執(zhí)行效率低，不安全

13.封裝，繼承，多態(tài)

封裝:

將方法和屬性寫到同一個(gè)類中，并將屬性私有化，生成 get set方法，外部訪問(wèn)屬性需要通過(guò)get和set方法,內(nèi)部可以直接訪問(wèn)屬性

繼承:

子類繼承父類，子類實(shí)例可以調(diào)用父類除private修飾以外的所有屬性和方法，一個(gè)子類只能繼承一個(gè)父類，但是可以多重繼承，一個(gè)父類可以擁有多個(gè)子類

多態(tài):

父類的引用指向子類的實(shí)例，多個(gè)子類繼承同一個(gè)父類實(shí)現(xiàn)了這些類共通的方法，每一個(gè)子類實(shí)現(xiàn)的結(jié)果都不同

14.事件模型

事件捕獲階段

事件目標(biāo)階段

事件冒泡階段

15.宏任務(wù)和微任務(wù)

宏任務(wù):

script（整體代碼），定時(shí)器（setTimeout,setInterval,setImmediate），UIrendering

微任務(wù):

process.NextTick（），promise，MutationObserver

宏任務(wù)中的事件放在callback queue中，由事件觸發(fā)線程維護(hù)；

微任務(wù)的事件放在微任務(wù)隊(duì)列中，由js引擎線程維護(hù)

執(zhí)行過(guò)程:

執(zhí)行宏任務(wù)script，
進(jìn)入script后，
所有的同步任務(wù)主線程執(zhí)行
所有宏任務(wù)放入宏任務(wù)執(zhí)行隊(duì)列所有微任務(wù)放入微任務(wù)執(zhí)行隊(duì)列
先清空微任務(wù)隊(duì)列，
再取一個(gè)宏任務(wù)，執(zhí)行，再清空微任務(wù)隊(duì)列
依次循環(huán)

16.判斷數(shù)據(jù)類型的方法

type of
instanceof
constructor
object.prototype.toString.call（）

17.字面量和new出來(lái)的對(duì)象和Object.create（）創(chuàng)建出來(lái)的對(duì)象有什么區(qū)別

字面量和new:

創(chuàng)建的對(duì)象會(huì)繼承原對(duì)象的屬性和方法，它們的隱式原型會(huì)指向Object的顯式原型

Object.create（）:

創(chuàng)建的對(duì)象原型為null，沒(méi)有繼承原對(duì)象的方法和屬性

18.為什么JS是單線程的

因?yàn)镴S里面有可視的Dom，如果是多線程的話，這個(gè)線程正在刪除DOM節(jié)點(diǎn)，另一個(gè)線程正在編輯Dom節(jié)點(diǎn)，導(dǎo)致瀏覽器不知道該聽(tīng)誰(shuí)的

19.箭頭函數(shù)和普通函數(shù)的區(qū)別

this指向它定義時(shí)所在的對(duì)象（作用域）
不會(huì)進(jìn)行函數(shù)提升
沒(méi)有arguments對(duì)象
不能new

20.模塊化的好處

防止命名沖突
更好的分離，按需加載
更好的復(fù)用性
更高的維護(hù)性

21.e.target和e.currentTarget的區(qū)別

前者指事件的目標(biāo)元素

后者指當(dāng)前監(jiān)聽(tīng)的元素

22.exports和moudle.export的區(qū)別

exports.xxx=“xxx”

moudle.export =｛｝

require能看到的只有moudle.export

23.JS性能優(yōu)化

垃圾回收
防抖節(jié)流
分批加載
事件委托
少用with
script標(biāo)簽中的defer和async
cdn加速

24.回流和重繪

回流:

render樹中一部分或全部元素需要改變尺寸、布局、或著需要隱藏而需要重新構(gòu)建，這個(gè)過(guò)程叫做回流

重繪:

render樹中一部分元素改變，而不影響布局的，只影響外觀的，比如顏色。該過(guò)程叫做重繪

回流必將引起重繪

25.link標(biāo)簽和@import標(biāo)簽

link屬于html，@import屬于css
頁(yè)面加載時(shí)，link會(huì)被同時(shí)加載，@import會(huì)等頁(yè)面加載完再加載
link的權(quán)重高于@import
dom可以使用link，不能使用@import

26.進(jìn)程，線程

進(jìn)程: 一個(gè)在內(nèi)存中運(yùn)行的應(yīng)用程序，有自己獨(dú)立的內(nèi)存，一個(gè)進(jìn)程可有多個(gè)線程

線程: 進(jìn)程中的一個(gè)執(zhí)行任務(wù)，負(fù)責(zé)當(dāng)前進(jìn)程的執(zhí)行一個(gè)進(jìn)程可運(yùn)行多個(gè)線程，多個(gè)線程共享數(shù)據(jù)

27.src和herf的區(qū)別

src:

指向的內(nèi)容會(huì)嵌入到文檔當(dāng)前標(biāo)簽所在位置

瀏覽器解析時(shí)，暫停，先加載src資源

herf:

超文本引用，用來(lái)建立當(dāng)前元素和文檔的鏈接

瀏覽器解析時(shí)，同時(shí)進(jìn)行，并行加載?

28.內(nèi)存泄露以及解決

?29.防抖節(jié)流

HTML5

1.html5有哪些新增標(biāo)簽？

布局標(biāo)簽:

header，footer，aside，section，article

表單標(biāo)簽:

datalist，input的type類型（date，week，time，datatime，number，search，url，tel，email，color，range）

多媒體標(biāo)簽:

audio，video

其他標(biāo)簽:

progress（進(jìn)度條），meter（度量器）

2.html5有哪些新增屬性？

hidden（隱藏元素）

required（必填）

minlength（最小長(zhǎng)度）/maxlength（最大長(zhǎng)度）

pattern（正則表達(dá)式）

placeholder（提示文本）

autocomplete（自動(dòng)填充）

autofocus（自動(dòng)獲取焦點(diǎn)）

3.readyonly和disabled的區(qū)別

readyonly:設(shè)置表單元素為只讀狀態(tài)

disabled:設(shè)置表單元素為禁用狀態(tài)

4.哪些標(biāo)簽存在偽元素？

大部分容器標(biāo)簽有偽元素，iframe沒(méi)有

大部分單標(biāo)簽沒(méi)有偽元素，img有

偽元素不能用js操作

5.html5的網(wǎng)頁(yè)為什么要寫<!DOCTYOE HTML>

html5不基于SGML，不需要對(duì)DTD引用，需要用doctype規(guī)范瀏覽器的行為

6.h5新增了哪些新特性？

語(yǔ)義化標(biāo)簽（header，footer，nav，aside，article，section）

本地存儲(chǔ)（localstorage，sessionstorage）

拖拽釋放（drag and drop），音頻視頻

畫布（canvas）api

地理位置api

表單控件（calendar，date，time，email，url，search）

websocket

7.sessionstorage，localstorage和cookie的區(qū)別

共同點(diǎn):都是瀏覽器的存儲(chǔ)介質(zhì)，可存儲(chǔ)數(shù)據(jù)

不同點(diǎn):

sessionstorage把數(shù)據(jù)存儲(chǔ)在頁(yè)面內(nèi)存，頁(yè)面關(guān)閉數(shù)據(jù)銷毀，只能存字符串，存儲(chǔ)5m左右

localstorage把數(shù)據(jù)存儲(chǔ)在電腦磁盤，需手動(dòng)刪除，只能存字符串，存儲(chǔ)20m左右

cookie是http協(xié)議重要組成部分，可設(shè)置過(guò)期時(shí)間，時(shí)間到，自動(dòng)銷毀，沒(méi)有設(shè)置時(shí)間會(huì)隨頁(yè)面關(guān)閉而銷毀，存儲(chǔ)4k左右，存儲(chǔ)數(shù)據(jù)會(huì)伴隨http請(qǐng)求發(fā)送到服務(wù)器端，所以不能存儲(chǔ)大量數(shù)據(jù)

CSS3

1.px，em，rem的區(qū)別

px:是一個(gè)絕對(duì)單位

em和rem是相對(duì)單位，

em相對(duì)于自身元素字體大小，

rem相對(duì)于根元素html字體大小

2.CSS3新增偽類

:first-of-type選擇屬于父元素的首個(gè)元素

:last-of-type選擇屬于父元素的最后一個(gè)元素

:nth-child（n）選擇屬于父元素的第n個(gè)元素

:nth-type-of（）選擇屬于父元素的第n個(gè)元素

:enabled，:disabled控制表單控件禁用狀態(tài)

:checked單選框或復(fù)選框被選中

3.position幾個(gè)屬性的作用

static:

默認(rèn)位置，不常用，不脫離文檔流

relative:

相對(duì)定位，相對(duì)于元素本身位置偏移，不脫離文檔流

absolute:

絕對(duì)定位，相對(duì)于離它最近的父元素定位，沒(méi)有就找body，脫離文檔流

fixed:

固定定位，相對(duì)于瀏覽器窗口，脫離文檔流

4:怎么讓一個(gè)不定寬高的div元素，垂直水平居中

方法1:transform

.父元素｛樣式屬性

position：relative

｝

.子元素｛

position:absolute

top:50%

left:50%

transform:translate（-50%，-50%）

其他樣式屬性

子寬高為父寬高一半

｝

方法2:flex彈性布局

.父元素｛

display:flex

justify-content:center

align-items:center

其他樣式屬性

｝

.子元素｛

樣式屬性

子寬高為父寬高一半

｝

方法3:絕對(duì)定位

.父元素｛

position:relative

其他樣式屬性

｝

.子元素｛

position:absolute

top:0

bottom:0

left:0

right:0

margin:auto

子寬高為父寬高一半

｝

5.清除浮動(dòng)有哪些方式？

給浮動(dòng)父元素設(shè)置高度:不太靈活，x子元素高度不確定
給浮動(dòng)父元素設(shè)置overflow:hidden
額外標(biāo)簽法:在浮動(dòng)元素最后加一個(gè)塊級(jí)標(biāo)簽，并設(shè)置clear:both屬性:會(huì)在頁(yè)面上產(chǎn)生很多空白標(biāo)簽
使用偽元素法.clear :after｛content:‘’，display:block，overflow:hidden，visibility:hidden，clear:both｝

6.讓兩個(gè)塊級(jí)元素在一行顯示有哪些辦法？

用display:inline/inline-block
flex布局:給父元素設(shè)置display:flex

7.如何設(shè)置一個(gè)元素垂直居中？

給父元素設(shè)置垂直內(nèi)邊距
給需要垂直的子元素設(shè)置垂直外邊距
如果是文本，行高等于標(biāo)簽高度
flex布局，align-items:center
絕對(duì)定位子元素在相對(duì)定位父元素垂直對(duì)齊

8.圖片懶加載的原理，圖片懶加載的插件

原理:img圖片加載通過(guò)src屬性指向的文件來(lái)實(shí)現(xiàn)，當(dāng)把src屬性暫時(shí)改成自己的一個(gè)自定義屬性，頁(yè)面就不會(huì)去加載圖片。當(dāng)img標(biāo)簽進(jìn)入屏幕可視區(qū)域后，從存放圖片路徑的自定義屬性中獲取圖片地址，并動(dòng)態(tài)的設(shè)置給src屬性，瀏覽器就會(huì)幫助我們?nèi)フ?qǐng)求圖片資源，實(shí)現(xiàn)懶加載

插件:jQuery.lazyload，vue-lazyload

9.CSS3新增了哪些新特性？

媒體查詢（@media）
transform系列:translate平移，scale縮放，rotating旋轉(zhuǎn)
動(dòng)畫（animate）
過(guò)渡（transition）
flex
盒模型box-sizing:border-box
線性漸變（line-gradient）
偽元素，文字陰影，邊框陰影，圓角

10.display:none和visibility:hidden區(qū)別

display:none隱藏元素，不占位

visibility:hidden隱藏元素占位

11.less和scss

less是一種css預(yù)處理語(yǔ)言，目的是提高開發(fā)效率以及提高代碼的可維護(hù)性

scss是一種css預(yù)處理語(yǔ)言，作用和less一樣

BOM/DOM

1.在一個(gè)頁(yè)面中給多個(gè)元素設(shè)置相同的id，會(huì)導(dǎo)致什么問(wèn)題？

通過(guò)is獲取dom元素的時(shí)候，只能獲取到第一個(gè)元素，后面元素?zé)o法正常獲取

2.列舉dom元素增刪改查的api

創(chuàng)建dom:document.createElement（）

查找dom:

document.getElementById()

document.getElementByClassName()

document.getElementByName()

document.querySelector()

document.querySelectorAll()

追加dom:parentDom.appendChid()

移除dom:parentDom.removeChild()

3.bom中有哪些常用對(duì)象

location:

location.href頁(yè)面url地址

location.hash頁(yè)面url#后面的部分

location.search頁(yè)面url？后面的部分

location.reload()刷新頁(yè)面

navigator:

navigator.userAgent瀏覽器的userAgent信息

history:

history.go(1)前進(jìn)1步

history.go(-1)后退1步

history.forward()前進(jìn)

history.back()后退

screen:

screen.availWidth屏幕有效寬度

screen.availHeight屏幕有效高度

4.什么是事件委托？原理？

本應(yīng)該注冊(cè)給子元素的事件，注冊(cè)給父元素（兒子要做的事情，不想做，交給老子做）

原理:事件冒泡，子元素的事件向外冒泡，觸發(fā)父元素的相同事件，根據(jù)事件對(duì)象找到真正的事件源

優(yōu)點(diǎn):

節(jié)省內(nèi)存，減少事件注冊(cè)
新增子對(duì)象時(shí)，無(wú)需對(duì)其進(jìn)行事件綁定

缺點(diǎn):

如果把所有事件都用事件代理，可能會(huì)出現(xiàn)事件誤判。即本不該被觸發(fā)的事件被綁定上了事件。

5.js的幾種定時(shí)器，區(qū)別？

setInterval:周期定時(shí)器，間隔一定時(shí)間執(zhí)行多次

setTimeout:延時(shí)定時(shí)器，只執(zhí)行一次

?

web

1.列舉常見(jiàn)的瀏覽器兼容問(wèn)題

https://blog.csdn.net/blackhehaha/article/details/108593638

創(chuàng)建異步對(duì)象

主流瀏覽器發(fā)送Ajax，使用xmlhttprequest創(chuàng)建異步對(duì)象

ie瀏覽器用xactive創(chuàng)建異步對(duì)象

注冊(cè)事件

主流瀏覽器:

addEventListener("eventType","handler","true/false")

removeEventListener("eventType","handler","true/false")

ie瀏覽器:

attachEvent("eventType",handler)

detachEvent("eventType",handler)

阻止冒泡

主流瀏覽器:event.stopPropagation()

ie瀏覽器:event.cancleBubble=true

獲取事件源

主流瀏覽器:event.target

ie瀏覽器:event.srcElement

2.如何實(shí)現(xiàn)多個(gè)標(biāo)簽頁(yè)的通信？

localstorage

localstorage是storage對(duì)象的實(shí)例，對(duì)storage對(duì)象進(jìn)行任何修改，都會(huì)觸發(fā)storage事件。當(dāng)通過(guò)屬性或setItem()方法保存數(shù)據(jù)，使用delete操作符或removeItem()刪除數(shù)據(jù)，或者調(diào)用clear（）都會(huì)觸發(fā)該事件

jQuery

1.$each（）和$（selector）.each()有什么不同？

$each（）可循環(huán)任何數(shù)組和jQuery對(duì)象組成的偽數(shù)組

$（selector）.each（）只能循環(huán)jQuery對(duì)象組成的偽數(shù)組

2.$each（）和foreach區(qū)別

$each（）可循環(huán)任何數(shù)組和jQuery對(duì)象組成的偽數(shù)組

foreach只能循環(huán)普通數(shù)組

$each（arr，function（索引，循環(huán)單項(xiàng)，數(shù)組本身）｛｛｝）

arr.foreach(function (循環(huán)單項(xiàng)，索引，數(shù)組本身)｛｝)

3.原生js的window.onload與jQuery的$（document）.ready（function（）｛｝，$function（）｛｝）區(qū)別

執(zhí)行時(shí)機(jī)不一樣

前者會(huì)等頁(yè)面元素渲染完畢并且資源文件加載完畢后才會(huì)執(zhí)行

后者會(huì)在當(dāng)前頁(yè)面元素加載完畢之后就會(huì)執(zhí)行

4.jQuery實(shí)現(xiàn)連式編程的原理

jQuery的方法最后都會(huì)return一個(gè)this，這個(gè)this就是當(dāng)前元素的jQuery對(duì)象

5.jQuery如何多次給同一個(gè)標(biāo)簽綁定同一個(gè)事件？

使用addEventListener（事件名，function（）｛｝）注冊(cè)的事件，不會(huì)出現(xiàn)事件覆蓋

6.如何開發(fā)jQuery插件？

$.fn:可以通過(guò)任意jQuery對(duì)象來(lái)調(diào)用

$.extend:只能通過(guò)$頂級(jí)對(duì)象來(lái)調(diào)用

7.jQuery哪些方法不支持鏈?zhǔn)讲僮?#xff1f;

$.trim()? $.each()? $(selector).html()??

$(selector).text()

vue

1.vue如何封裝一個(gè)組件？

定義一個(gè)后綴名為.vue的組件

template模板部分：引入組件標(biāo)簽

script邏輯部分：

improt? 組件名?from?組件位置

export?default{

component：{組件名}

}

style樣式部分：設(shè)置組件樣式

2.computed和watch的區(qū)別

computed存放不帶參數(shù)的方法，使用時(shí)不用（） methods存放帶參數(shù)的方法，使用時(shí)用（）

computed是計(jì)算屬性，可以根據(jù)data中的數(shù)據(jù)成員，動(dòng)態(tài)計(jì)算出一個(gè)新的數(shù)據(jù)成員，這個(gè)數(shù)據(jù)成員在data中并不存在，計(jì)算屬性的函數(shù)必須有返回值

watch是監(jiān)聽(tīng)器，可以監(jiān)視data中某一個(gè)數(shù)據(jù)成員的改變或路由中某些屬性的改變，根據(jù)這個(gè)改變，做一些其他操作

3.對(duì)vue中插槽的理解？

插槽分三種:匿名插槽，具名插槽，作用域插槽

定義:是子組件提供給父組件使用的一個(gè)占位符

子組件:寫一個(gè)插槽

父組件:引入子組件后，給占位符填充內(nèi)容

4.v-if和v-show的區(qū)別

v-show通過(guò)css方式來(lái)隱藏元素，元素隱藏占據(jù)頁(yè)面空間

v-if根據(jù)條件是否成立決定是否創(chuàng)建元素，元素刪除后不占據(jù)頁(yè)面空間

如果某個(gè)元素需要頻繁切換顯示狀態(tài)，用v-show，因?yàn)轭l繁創(chuàng)建銷毀dom需要性能開銷

5.什么是vuex，在什么場(chǎng)景下使用

全局組件狀態(tài)管理，實(shí)現(xiàn)組件間數(shù)據(jù)共享

state存放數(shù)據(jù)的狀態(tài)，但是不能修改數(shù)據(jù)

Getters用來(lái)獲取數(shù)據(jù)

mutations同步操作數(shù)據(jù)

actions異步操作數(shù)據(jù)

moudles讓每一個(gè)模塊都有自己的state，Getters，mutations，actions，結(jié)構(gòu)清晰，便于修改

補(bǔ)充:構(gòu)建大中型頁(yè)面使用vuex，一般的就用store 為什么mutations不能異步？如果mutation支持異步操作，就沒(méi)有辦法知道狀態(tài)是何時(shí)更新的，無(wú)法很好的進(jìn)行狀態(tài)的追蹤，給調(diào)試帶來(lái)困難。

6.vue路由的使用步驟

下載路由模塊
創(chuàng)建路由對(duì)象
配置路由規(guī)則
將路由對(duì)象注冊(cè)為vue實(shí)例對(duì)象的成員屬性

7.常見(jiàn)的vue組件庫(kù)

PC端:element-ui，ant-design，iview

移動(dòng)端:mint-ui，vant，vux

8.對(duì)mvvm的理解

mvvm由三部分組成

m數(shù)據(jù)層---負(fù)責(zé)初始化數(shù)據(jù)

v視圖層---負(fù)責(zé)頁(yè)面展示

vm視圖模型層---將數(shù)據(jù)層的數(shù)據(jù)傳遞給視圖層，將視圖層的行為傳遞到數(shù)據(jù)層進(jìn)行持久化

9.vue的生命周期

過(guò)程:開始創(chuàng)建-初始化數(shù)據(jù)-編譯模板-掛載dom-渲染-更新-渲染-卸載

詳解:

必經(jīng)階段:

beforeCreated:沒(méi)有data，沒(méi)有訪問(wèn)器屬性（methods），沒(méi)有虛擬dom樹（el）

created:有data，有訪問(wèn)器屬性，沒(méi)有虛擬dom樹

beforeMounted:有data，有訪問(wèn)器屬性，有虛擬dom樹，頁(yè)面內(nèi)容未加載

mounted:有data，有訪問(wèn)器屬性，有虛擬dom樹，頁(yè)面內(nèi)容加載完成

不必經(jīng)階段:

beforeUpdated，updated:通過(guò)訪問(wèn)器屬性修改屬性值，觸發(fā)通知函數(shù)，掃描虛擬dom樹，只更新受影響的元素

beforeDestroyed，destroyed:只刪除虛擬dom樹，打斷與new vue（）頁(yè)面的聯(lián)系，它還在內(nèi)存中

10.vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理？

通過(guò)數(shù)據(jù)劫持和發(fā)布者訂閱者功能來(lái)實(shí)現(xiàn) 利用Object.defineProperty()對(duì)屬性添加get，set方法，實(shí)現(xiàn)數(shù)據(jù)變化視圖跟著變化利用事件監(jiān)聽(tīng)，實(shí)現(xiàn)視圖變化數(shù)據(jù)跟著變化

執(zhí)行過(guò)程:

實(shí)現(xiàn)一個(gè)監(jiān)聽(tīng)器Observer，用來(lái)劫持并監(jiān)聽(tīng)所有屬性，如果有變動(dòng)的，就通知訂閱者
實(shí)現(xiàn)一個(gè)訂閱者Watcher，每個(gè)Watcher都綁定一個(gè)更新函數(shù)，Watcher可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖
實(shí)現(xiàn)一個(gè)消息訂閱器 Dep ,主要收集訂閱者，當(dāng) Observe監(jiān)聽(tīng)到發(fā)生變化，就通知Dep 再去通知Watcher去觸發(fā)更新
實(shí)現(xiàn)一個(gè)解析器Compile，可以掃描和解析每個(gè)節(jié)點(diǎn)的相關(guān)指令，若節(jié)點(diǎn)存在指令，則Compile初始化這類節(jié)點(diǎn)的模板數(shù)據(jù)（使其顯示在視圖上），以及初始化相應(yīng)的訂閱者?

11.vue創(chuàng)建組件的時(shí)候，data為什么要使用匿名函數(shù)return一個(gè)對(duì)象？

起因:

data數(shù)據(jù)是Vue原型上的屬性，存在于內(nèi)存當(dāng)中，對(duì)象是對(duì)于內(nèi)存地址的引用，如果data以對(duì)象的形式保存數(shù)據(jù)，每個(gè)組件使用了data會(huì)改變data原有屬性，造成組件之間數(shù)據(jù)相互影響

用函數(shù):

函數(shù)可以封裝屬性和方法
構(gòu)造函數(shù)會(huì)實(shí)例化一個(gè)對(duì)象，相當(dāng)于data副本，繼承data的屬性和方法
組件使用data對(duì)象副本，互不影響

12.vue組件傳參

父?jìng)髯?

每個(gè)組件的數(shù)據(jù)都需要向服務(wù)器發(fā)請(qǐng)求，每次都發(fā)，浪費(fèi)性能，所以讓父組件發(fā)送一次請(qǐng)求，子組件通過(guò)父組件傳遞數(shù)據(jù)就行

方法:給父組件里的子組件標(biāo)簽自定義一個(gè)屬性，值為要傳遞的屬性或方法，子組件用props來(lái)接收

子傳父:

先在父組件methods里面聲明一個(gè)方法（帶參）在父組件里的子組件標(biāo)簽加個(gè)自定義事件把方法賦給那個(gè)自定義事件在子組件中用this.$emit（方法，this.數(shù)據(jù)）

兄弟傳參:

創(chuàng)建一個(gè)事件中心，傳遞和接收事件 const eventBus=new Vue（）

使用$emit（）發(fā)布事件-傳遞值

使用$on（）訂閱事件-接收值

使用$off（）移除事件監(jiān)聽(tīng)

13.vue有幾種路由模式？

hash模式:是默認(rèn)的

history模式:可以在創(chuàng)建路由對(duì)象的時(shí)候，使用mode屬性來(lái)切換路由模式

哈希模式:

優(yōu)點(diǎn): ?

項(xiàng)目打包部署到云服務(wù)器，主頁(yè)面刷新不會(huì)報(bào)錯(cuò)
路由修改的是#中的信息，對(duì)后端沒(méi)影響

缺點(diǎn): ?

有#，不美觀瀏覽器無(wú)法把哈希值傳遞給服務(wù)器，不利于seo搜索

history模式:

優(yōu)點(diǎn):

? 美觀

缺點(diǎn): ?

服務(wù)器運(yùn)行時(shí)進(jìn)行刷新容易出現(xiàn)404錯(cuò)誤（原因是刷新需要向服務(wù)器發(fā)請(qǐng)求，服務(wù)器找不到對(duì)應(yīng)的響應(yīng)或資源就會(huì)報(bào)錯(cuò)）

14.路由傳參之query和params

query傳參:

類似get請(qǐng)求

參數(shù)拼接在地址欄中（？id=123）

可配合path和name

例子:

編程式傳參 data:{ username: '' }, login() { ... this.$router.push({ path: '/home', query: { username: this.username }, }) }

聲明式傳參 <router-link :to="{ path: '/home', query: { username: username } }">

取值:this.$route.query.username

params傳參:

類似post請(qǐng)求

參數(shù)不在地址欄

只能配合name，否則失效

params傳參頁(yè)面刷新后會(huì)失效

例子:

編程式傳參 data:{ username: '' }, login() { ... this.$router.push({ name: 'home', //注意使用 params 時(shí)一定不能使用 path params: { username: this.username }, }) }

聲明式傳參 <router-link :to="{ name: 'home', params: { username: username } }">

取值:this.$route.params.username

補(bǔ)充:name是給path取的別名，地址欄中顯示的是path名

15.vue的優(yōu)點(diǎn)

輕量級(jí)框架，大小只有幾十kb
單頁(yè)面應(yīng)用
組件化開發(fā)
雙向數(shù)據(jù)綁定
簡(jiǎn)單易學(xué)，國(guó)人開發(fā)，便于理解
視圖，數(shù)據(jù)分離
虛擬dom，提高性能和運(yùn)行速度

16.vue路由導(dǎo)航守衛(wèi)和應(yīng)用場(chǎng)景

路由守衛(wèi)是在頁(yè)面進(jìn)行路由跳轉(zhuǎn)時(shí)進(jìn)行一些處理

1.全局路由

全局前置守衛(wèi)（beforeEach）

全局后置鉤子（afterEach）

2.路由獨(dú)享守衛(wèi)

beforeEnter（to，from，next）｛｝

?meta：路由元信息，也就是每個(gè)路由身上攜帶的信息，用來(lái)存放自定義配置

3.組件內(nèi)的導(dǎo)航鉤子

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

17.vue如何定義一個(gè)過(guò)濾器？

定義全局過(guò)濾器

Vue.filter('過(guò)濾器名稱'，function（input）｛return input｝)

定義局部過(guò)濾器

18.vue如何自定義一個(gè)vue指令？

定義全局指令

定義私有指令

19.vue路由模塊中$route和$router的區(qū)別？

$route中存儲(chǔ)跟路由相關(guān)的屬性如$route.params,$route.query

$router中存儲(chǔ)的是和路由相關(guān)的方法如$router.push(),$router.go()

20.v-for指令循環(huán)遍歷時(shí)key屬性的作用？

舊虛擬DOM中找到了與新虛擬DOM相同的key:若虛擬DOM中內(nèi)容沒(méi)變,直接使用之前的真實(shí)DOM，
若虛擬DOM中內(nèi)容變了,則生成新的真實(shí)DOM,隨后替換掉頁(yè)面中之前的真實(shí)DOM。
舊虛擬DOM中未找到與新虛擬DOM相同的key 創(chuàng)建新的真實(shí)DOM,隨后渲染到頁(yè)面。

補(bǔ)充：用index作為key可能引發(fā)的問(wèn)題

若對(duì)數(shù)據(jù)進(jìn)行：逆序添加、逆序刪除等破壞順序操作，產(chǎn)生沒(méi)有必要的真實(shí)DOM更新 ==> 界面效果沒(méi)問(wèn)題, 但效率低。
如果結(jié)構(gòu)中還包含輸入類的DOM，會(huì)產(chǎn)生錯(cuò)誤DOM更新 ==> 界面有問(wèn)題。

21.vue和react的區(qū)別

vue實(shí)現(xiàn)了雙向數(shù)據(jù)綁定，提供了指令，使用插值表達(dá)式進(jìn)行數(shù)據(jù)渲染

react是單向數(shù)據(jù)流，沒(méi)有指令，用jsx渲染數(shù)據(jù)

22.vue有哪些常用的事件修飾符

23.vue常用的指令

v-model:實(shí)現(xiàn)雙向數(shù)據(jù)綁定

v-bind:綁定屬性

v-on:注冊(cè)事件，綁定方法

v-html:設(shè)置標(biāo)簽內(nèi)容

v-text:設(shè)置標(biāo)簽內(nèi)容

v-clack:解決插值表達(dá)式閃爍問(wèn)題

v-for:循環(huán)遍歷數(shù)組或?qū)ο?/p>

24.vue如何解決插值表達(dá)式閃爍問(wèn)題？

使用v-html或v-text

使用v-clack解決插值閃爍

第一步:聲明屬性選擇器[v-clack]｛display:none｝

第二步:在插值表達(dá)式所在標(biāo)簽添加屬性v-clack

25.vue如何實(shí)現(xiàn)通過(guò)錨點(diǎn)值的改變切換組件？

監(jiān)聽(tīng)hashchange事件

window.addEventListener('hashchange',function（）｛｝)

26.vue中如何避免組件間樣式?jīng)_突

scoped

給父元素添加class名

scoped原理:給組件內(nèi)的所有標(biāo)簽添加data自定義屬性，實(shí)現(xiàn)樣式私有化

27.vue如何動(dòng)態(tài)添加一個(gè)路由規(guī)則？

使用router.addRoutes([｛path:",component:"｝])

28.vue優(yōu)化頁(yè)面加載效率的辦法

使用路由懶加載和組件懶加載
不要打包一些公共的依賴（vue，組件庫(kù)）
使用cdn加載依賴文件

28.路由懶加載，組件懶加載

路由懶加載:

是通過(guò)異步的方式來(lái)加載對(duì)應(yīng)的路由組件，默認(rèn)是將所有的組件全部加載并打包

好處:

可以提高頁(yè)面的加載速度，尤其是首頁(yè)的加載速度。因?yàn)槭褂脩屑虞d后，加載首頁(yè)的時(shí)候，就不需要加載其他頁(yè)面對(duì)應(yīng)的組件，在需要的時(shí)候再加載

組件懶加載：

當(dāng)用到某個(gè)路徑時(shí)，觸發(fā)箭頭函數(shù)，臨時(shí)加載組件

path:路徑名

name:xxx

component:（）=>import（組件位置）

29.vue如何觸發(fā)一個(gè)自定義事件？

this.$emit(event,'數(shù)據(jù)')

30.vue如何監(jiān)聽(tīng)自定義事件的執(zhí)行？

this.$on(event,callback)

31.vue如何移除自定義事件？

this.$off(event,callback)

32.vm.$mount(selector)方法的作用

手動(dòng)把一個(gè)vue實(shí)例掛載到頁(yè)面上

33.keep-alive組件的作用是什么？

是vue的內(nèi)置組件，保留組件在內(nèi)存中，防止重復(fù)渲染dom

actived

deactived

34.vue如何手動(dòng)銷毀一個(gè)vue實(shí)例

調(diào)用vm.$destory()可銷毀一個(gè)vue實(shí)例

35.vue有哪些內(nèi)置的組件？

component，slot，transition，transition-group，keep-alive

36.vue實(shí)例中有哪些屬性？

vm.$data可以獲取vm實(shí)例對(duì)象data中的數(shù)據(jù)

vm.$props可以獲取vm組件接收到的props對(duì)象數(shù)據(jù)

vm.$el可以獲取vm實(shí)例對(duì)象的根dom元素

vm.$refs可以獲取vm實(shí)例中注冊(cè)過(guò)得ref特性的所有dom組件和組件實(shí)例

37.vue.use(plugin)的作用？注意問(wèn)題？

作用是安裝一個(gè)vue插件

該方法需要在調(diào)用new vue（）之前被調(diào)用

38.vm.$nextTick(fn)的作用

語(yǔ)法:this.$nextTick（回調(diào)函數(shù)）

延遲某個(gè)操作的執(zhí)行，直到dom更新以后再執(zhí)行

是專門在vue所有生命周期執(zhí)行完之后才觸發(fā)的一個(gè)回調(diào)函數(shù)（數(shù)據(jù)更新完畢，dom渲染完畢，自動(dòng)執(zhí)行這個(gè)函數(shù)）

原理:Vue 在更新 DOM 時(shí)是異步執(zhí)行的，在修改數(shù)據(jù)后，視圖不會(huì)立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新。所以修改完數(shù)據(jù)，立即在方法中獲取DOM，獲取的仍然是未修改的DOM。 $nextTick的作用是：該方法中的代碼會(huì)在當(dāng)前渲染完成后執(zhí)行，就解決了異步渲染獲取不到更新后DOM的問(wèn)題了。 $nextTick的原理：$nextTick本質(zhì)是返回一個(gè)Promise 。應(yīng)用場(chǎng)景：在鉤子函數(shù)created()里面想要獲取操作Dom，把操作DOM的方法放在$nextTick中

39.vue中混入（mixin）有什么作用

分發(fā)組件中的可復(fù)用功能

一個(gè)混入對(duì)象可以包含任意組件對(duì)象

40.如何開發(fā)一個(gè)vue插件？

vue.js的插件應(yīng)該暴露一個(gè)install方法

這個(gè)方法的第一個(gè)參數(shù)是vue構(gòu)造器

第二個(gè)參數(shù)是可選的選項(xiàng)對(duì)象

41.什么是ssr？如何實(shí)現(xiàn)ssr？

ssr是服務(wù)器渲染，讓頁(yè)面的渲染在服務(wù)器端完成，環(huán)境為nodejs。vue中可以使用nuxt實(shí)現(xiàn)服務(wù)端渲染。

42.什么是spa？

優(yōu)點(diǎn):

用戶體驗(yàn)好，內(nèi)容改變不需要重新加載整個(gè)頁(yè)面
良好的前后端分離，分工明確

缺點(diǎn):

不利于搜索引擎的抓取
首屏加載速度慢

43.首屏加載慢怎么解決

首屏加載:瀏覽器從響應(yīng)用戶輸入網(wǎng)址地址，到首屏內(nèi)容渲染完成的時(shí)間，

原因:

網(wǎng)絡(luò)延遲
資源文件體積過(guò)大
資源重復(fù)發(fā)送請(qǐng)求
加載腳本時(shí)，渲染內(nèi)容阻塞

解決:

減少入口文件體積-路由懶加載
靜態(tài)資源本地緩存-localstorage
UI框架按需加載
組件重復(fù)打包-minChunks3，表示會(huì)把使用3次及以上的包抽離出來(lái)，放進(jìn)公共依賴文件，避免了重復(fù)加載組件
圖片資源壓縮
gzip壓縮
使用SSR

44.vue中data的屬性可以和methods中方法同名嗎，為什么？

可以，methods里面的方法會(huì)被data的屬性覆蓋

45.vue權(quán)限管理

后端-對(duì)接口訪問(wèn)權(quán)限

前端-對(duì)菜單訪問(wèn)權(quán)限?

菜單管理：可以實(shí)現(xiàn)對(duì)后臺(tái)管理系統(tǒng)左側(cè)菜單的管理，支持更換圖標(biāo)、更換名稱、控制菜單顯示和排序；
資源管理：實(shí)現(xiàn)了基于訪問(wèn)路徑的后臺(tái)動(dòng)態(tài)權(quán)限控制，控制的權(quán)限可以精確到接口級(jí)別；
角色管理：可以自定義角色，并為角色分配菜單和資源；
后臺(tái)用戶管理：可以對(duì)后臺(tái)用戶進(jìn)行管理并分配角色，支持分配多個(gè)角色。

46.vue性能優(yōu)化

編碼階段

盡量減少data中的數(shù)據(jù)，data中的數(shù)據(jù)都會(huì)增加getter和setter，會(huì)收集對(duì)應(yīng)的watcher
v-if和v-for不能連用如果需要使用v-for給每項(xiàng)元素綁定事件時(shí)使用事件代理
SPA 頁(yè)面采用keep-alive緩存組件
在更多的情況下，使用v-if替代v-show
key保證唯一
使用路由懶加載、異步組件
防抖、節(jié)流
第三方模塊按需導(dǎo)入
長(zhǎng)列表滾動(dòng)到可視區(qū)域動(dòng)態(tài)加載
圖片懶加載

SEO優(yōu)化

服務(wù)端渲染SSR
預(yù)渲染
打包優(yōu)化

壓縮代碼

使用cdn加載第三方模塊
splitChunks抽離公共文件

47.組件中name的作用 ?

使用keep-alive時(shí)，可搭配組件name進(jìn)行緩存過(guò)濾
dom作遞歸組件時(shí)需要調(diào)用自身name
vue-devtools調(diào)試工具里顯示的組件名稱是由name決定的

48.虛擬dom的優(yōu)缺點(diǎn)

優(yōu)點(diǎn): ?

減少了dom操作，減少了回流重繪

具有局部更新能力，提高性能

缺點(diǎn): ?

首次渲染dom時(shí)，加載慢

49.vuex持久化處理

把數(shù)據(jù)存儲(chǔ)在localstorage或sessionstorage
數(shù)據(jù)很多的話，用插件vuex-persistedstate和vuex-persist

50.$refs

用ref給普通標(biāo)簽添加屬性或方法，用this.$refs.屬性名/方法名讀取

用ref給組件標(biāo)簽添加屬性或方法，this指的是ref所在的組件對(duì)象，this.$refs.屬性名/方法名讀取的就是ref所在組件的屬性或方法

總結(jié):

ref是用來(lái)給元素或子組件注冊(cè)引用信息的，用在html標(biāo)簽上獲取的就是對(duì)應(yīng)dom元素，用在組件標(biāo)簽上獲取的就是組件實(shí)例對(duì)象。

使用方式: 打標(biāo)識(shí):ref=xxx（寫在標(biāo)簽里面）獲取:this.$refs.xxx

51.全局事件總線

實(shí)現(xiàn)任意組件間通信?

?52.數(shù)據(jù)代理

給對(duì)象添加屬性: Object.defineProperty（對(duì)象名，屬性名，配置項(xiàng)）

配置項(xiàng):

value:屬性值

enumerable:是否可枚舉

writable:是否可修改

configurable:是否可刪除

get:讀取屬性

set:修改屬性

數(shù)據(jù)代理定義: 通過(guò)一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象中屬性的操作

?53.關(guān)于state和...mapState輔助函數(shù)

state：

state和data類似，都是存儲(chǔ)數(shù)據(jù)/狀態(tài)值的，但是要想實(shí)現(xiàn)響應(yīng)式，要把state掛載到computed計(jì)算屬性上，有利于state的值發(fā)生改變的時(shí)候及時(shí)響應(yīng)給子組件（data接收的值不能及時(shí)響應(yīng)更新,用computed就可以.）

...mapState：

輔助函數(shù)，從vuex里的state里拿數(shù)據(jù)，用什么數(shù)據(jù)就拿什么，不用每次都用this.$store.state

http/Ajax

1.常見(jiàn)http狀態(tài)碼

100---正在初始化（一般看不到）

101---正在切換協(xié)議

200---響應(yīng)主體內(nèi)容已經(jīng)成功返回

202---表示接受

301---請(qǐng)求的url永久重定向

302---請(qǐng)求的url臨時(shí)轉(zhuǎn)移

304---獲取的內(nèi)容是讀取緩存中的數(shù)據(jù)

400---客戶端傳給服務(wù)器端的參數(shù)出現(xiàn)錯(cuò)誤

401---未認(rèn)證，沒(méi)有登錄網(wǎng)站

403---禁止訪問(wèn)，沒(méi)有權(quán)限

404---客戶端訪問(wèn)的資源不存在

500---未知的服務(wù)器錯(cuò)誤

503---服務(wù)器超負(fù)荷

2.http請(qǐng)求方式

get請(qǐng)求指定的頁(yè)面信息，并返回實(shí)體主體
head類似get，返回的響應(yīng)沒(méi)有具體內(nèi)容，用于獲取報(bào)頭
post向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求，如提交表單，上傳文件，數(shù)據(jù)在請(qǐng)求體中，post可能會(huì)導(dǎo)致新的資源建立和原有資源的修改
put從客戶端向服務(wù)器端傳送的數(shù)據(jù)取代指定的文檔內(nèi)容
其他略

3.Ajax工作原理

創(chuàng)建對(duì)象var xhr = new XMLHTTPRequeat（）
設(shè)置請(qǐng)求行xhr.open(請(qǐng)求方式，請(qǐng)求地址)
發(fā)送get方式xhr.send()

如果是post還要設(shè)置請(qǐng)求頭信息

4.如何解決跨域？

同源策略:

瀏覽器的的一個(gè)網(wǎng)站只能訪問(wèn)本網(wǎng)站的資源，不能訪問(wèn)其他網(wǎng)站的資源（script，src，href，img，iframe除外），必須是同協(xié)議，同域名，同端口

解決:

jsonp:利用的原理是script標(biāo)簽可以跨域請(qǐng)求資源，將回調(diào)函數(shù)作為參數(shù)拼接在url中。后端收到請(qǐng)求，調(diào)用該回調(diào)函數(shù)，并將數(shù)據(jù)作為參數(shù)返回去，注意設(shè)置響應(yīng)頭返回文檔類型，應(yīng)該設(shè)置成javascript。優(yōu)點(diǎn)是簡(jiǎn)單，兼容性好。缺點(diǎn)是只能用get方法，不安全
cors:設(shè)置后端來(lái)實(shí)現(xiàn)，服務(wù)端設(shè)置 Access-Control-Allow-Origin
postMessage:異步方式進(jìn)行通信，跨文本，多窗口，跨域傳遞。關(guān)鍵字:message發(fā)送的數(shù)據(jù)，targetOrigin指定接收的url
websocket:持久化雙向通信協(xié)議，WebSocket 在建立連接時(shí)需要借助 HTTP 協(xié)議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無(wú)關(guān)了
node中間件代理
nginx反向代理:和node中間件代理類似，需要搭建一個(gè)nginx服務(wù)器。只需要修改nginx的配置即可解決跨域問(wèn)題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會(huì)影響服務(wù)器性能
window.name+iframe
location.hash+iframe
document.domain+iframe

5.jsonp跨域原理

在頁(yè)面動(dòng)態(tài)創(chuàng)建script標(biāo)簽，使其src屬性指向后端數(shù)據(jù)接口，后端數(shù)據(jù)接口必須返回一個(gè)js函數(shù)的調(diào)用字符串，將要返回給前端的json數(shù)據(jù)作為函數(shù)的實(shí)參，當(dāng)script標(biāo)簽加載完畢后會(huì)在瀏覽器中執(zhí)行后端返回的函數(shù)調(diào)用。所以前端必須先對(duì)調(diào)用的函數(shù)進(jìn)行聲明。因?yàn)楹瘮?shù)是在js中聲明的，所以可以在函數(shù)內(nèi)部拿到服務(wù)器端調(diào)用時(shí)傳入的實(shí)參，所以就間接實(shí)現(xiàn)了跨域請(qǐng)求數(shù)據(jù)。

6.什么是同步和異步，哪種執(zhí)行方式好？

同步指一個(gè)程序執(zhí)行完了去執(zhí)行另外一個(gè)程序

異步指多個(gè)程序同時(shí)執(zhí)行

異步效率高，因?yàn)楫惒讲粫?huì)出現(xiàn)阻塞現(xiàn)象，程序的執(zhí)行互不影響

7.get和post的區(qū)別

get是把要傳遞的參數(shù)拼在url中，傳遞數(shù)量少，不安全

post是把要傳遞的參數(shù)放在請(qǐng)求體里，傳遞數(shù)據(jù)大，安全

8.localstorage，sessionstorage和cookie的區(qū)別

9.一個(gè)頁(yè)面從輸入url到頁(yè)面加載顯示完成，整個(gè)過(guò)程發(fā)生了什么

瀏覽器查找域名對(duì)應(yīng)的IP地址
瀏覽器向web服務(wù)器發(fā)送http請(qǐng)求
服務(wù)器處理請(qǐng)求（通過(guò)路由讀取資源）
服務(wù)器返回一個(gè)http響應(yīng)（content-type設(shè)置為text/html）
瀏覽器進(jìn)行dom樹構(gòu)建
瀏覽器發(fā)送請(qǐng)求獲取嵌在html中的資源
瀏覽器顯示完成頁(yè)面

10.http切換到https需要做什么？

只需要在web服務(wù)器中加入一個(gè)ssl的安全認(rèn)證模塊

11.什么是restfulapi？

restfulapi的核心思想就是使用http請(qǐng)求方式配合資源對(duì)象的方式來(lái)完成對(duì)服務(wù)器某個(gè)資源的操作（http動(dòng)詞+資源對(duì)象）

動(dòng)詞通常就是5種http方法

get讀取

post創(chuàng)建

put更新

patch更新，部分更新

delete刪除

12.什么是漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng):

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本功能，再針對(duì)高級(jí)瀏覽器進(jìn)行效果，交互等的改進(jìn)和追加功能，給用戶更好的體驗(yàn)。

優(yōu)雅降級(jí):

一開始就構(gòu)建完整的功能，然后針對(duì)低版本瀏覽器進(jìn)行兼容。

13.什么是頁(yè)面的回流和重繪？

回流:

當(dāng)頁(yè)面結(jié)構(gòu)或標(biāo)簽尺寸發(fā)生變化，瀏覽器需要對(duì)頁(yè)面進(jìn)行重排并且重新渲染

重繪:

當(dāng)頁(yè)面上標(biāo)簽的外觀發(fā)生改變，瀏覽器對(duì)頁(yè)面進(jìn)行重新渲染

關(guān)系:回流一定會(huì)引起重繪，重繪不一定引起回流

要提高頁(yè)面性能，就要盡量減少頁(yè)面的回流和重繪

14.如何優(yōu)化頁(yè)面性能？

資源加載方面:

減少http請(qǐng)求次數(shù)---代碼合并，使用精靈圖
減少http請(qǐng)求數(shù)據(jù)量---代碼壓縮，合理設(shè)置緩存
啟用cdn加速服務(wù)

代碼層面:

避免濫用全局變量，減少作用域查找，不要濫用閉包
減少dom操作，對(duì)已經(jīng)查找到的dom對(duì)象進(jìn)行緩存，避免重復(fù)查找
使用圖片懶加載，避免單次加載圖片數(shù)量過(guò)多導(dǎo)致頁(yè)面卡頓
將script標(biāo)簽寫在頁(yè)面底部，因?yàn)镴S會(huì)阻塞頁(yè)面的渲染
不要在本地書寫大量cookie，因?yàn)閏ookie會(huì)伴隨每一次http請(qǐng)求

15.什么是cdn加速？

主要是對(duì)網(wǎng)站靜態(tài)資源加速，需要購(gòu)買，cdn會(huì)對(duì)客戶的網(wǎng)頁(yè)靜態(tài)資源進(jìn)行緩存處理，當(dāng)有人第二次訪問(wèn)時(shí)，就從cdn節(jié)點(diǎn)上獲取網(wǎng)站所需靜態(tài)資源。

16.什么是seo？

seo是搜索引擎優(yōu)化，讓搜索引擎抓取網(wǎng)頁(yè)。方法:合理設(shè)置網(wǎng)頁(yè)的title，keywords，description

17.為什么利用多個(gè)域名存儲(chǔ)靜態(tài)資源更有效？

瀏覽器對(duì)請(qǐng)求靜態(tài)資源文件有并發(fā)數(shù)量限制，每次只能請(qǐng)求同一個(gè)域名下的若干個(gè)資源文件，如果把資源文件存放在多個(gè)不同的域名下面就會(huì)突破瀏覽器的限制。而且，啟用多個(gè)靜態(tài)資源服務(wù)器，可以減輕主服務(wù)器的壓力。

18.移動(dòng)端點(diǎn)擊事件有多少秒的延遲？原因？解決？

300ms

原因:瀏覽器為了保留雙擊縮放的功能

解決:

使用touch觸摸事件模擬點(diǎn)擊事件

使用fastclick解決

禁止頁(yè)面縮放功能

19.網(wǎng)站攻擊方式有哪些？

xss跨站腳本攻擊

csrf跨站請(qǐng)求偽造

20.js中的垃圾回收機(jī)制

標(biāo)記清除（mark and sweep）

大部分瀏覽器用此方法，當(dāng)變量進(jìn)入執(zhí)行環(huán)境，垃圾回收機(jī)制將其標(biāo)記為“進(jìn)入環(huán)境”，當(dāng)變量離開環(huán)境，將其標(biāo)記為“離開環(huán)境”，在離開環(huán)境之后還有的變量就是要被刪除的變量。

垃圾收集器給內(nèi)存中所有變量都加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量標(biāo)記。在此之后，再被加上的標(biāo)記的變量即為需要回收的變量，因?yàn)榄h(huán)境中的變量已經(jīng)無(wú)法訪問(wèn)這些變量

引用計(jì)數(shù)（reference coynting）

此方法會(huì)引起內(nèi)存泄漏，低版本ie用。

原理:追蹤一個(gè)值的引用次數(shù)，當(dāng)聲明一個(gè)變量并且給它賦值引用類型，次數(shù)加1，當(dāng)這個(gè)變量指向其他引用類型，次數(shù)減1，當(dāng)該值引用次數(shù)為0時(shí)，回收

21.JS是單線程嗎？

是

單位時(shí)間內(nèi)只能處理一個(gè)進(jìn)程

22.JS如何實(shí)現(xiàn)異步操作？

由瀏覽器提供的子線程完成

回調(diào)函數(shù)、事件監(jiān)聽(tīng)、setTimeout、Promise、生成器Generators/yield、async/await

所有異步任務(wù)都是在同步任務(wù)執(zhí)行結(jié)束之后，從任務(wù)隊(duì)列中依次取出執(zhí)行。

回調(diào)函數(shù)是異步操作最基本的方法，比如AJAX回調(diào)，回調(diào)函數(shù)的優(yōu)點(diǎn)是簡(jiǎn)單、容易理解和實(shí)現(xiàn)，缺點(diǎn)是不利于代碼的閱讀和維護(hù)，各個(gè)部分之間高度耦合，使得程序結(jié)構(gòu)混亂、流程難以追蹤（尤其是多個(gè)回調(diào)函數(shù)嵌套的情況），而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。此外它不能使用 try catch 捕獲錯(cuò)誤，不能直接 return
Promise包裝了一個(gè)異步調(diào)用并生成一個(gè)Promise實(shí)例，當(dāng)異步調(diào)用返回的時(shí)候根據(jù)調(diào)用的結(jié)果分別調(diào)用實(shí)例化時(shí)傳入的resolve 和 reject方法，then接收到對(duì)應(yīng)的數(shù)據(jù)，做出相應(yīng)的處理。Promise不僅能夠捕獲錯(cuò)誤，而且也很好地解決了回調(diào)地獄的問(wèn)題，缺點(diǎn)是無(wú)法取消 Promise，錯(cuò)誤需要通過(guò)回調(diào)函數(shù)捕獲。
Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，Generator 函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)，可暫停函數(shù), yield可暫停，next方法可啟動(dòng)，每次返回的是yield后的表達(dá)式結(jié)果。優(yōu)點(diǎn)是異步語(yǔ)義清晰，缺點(diǎn)是手動(dòng)迭代`Generator` 函數(shù)很麻煩，實(shí)現(xiàn)邏輯有點(diǎn)繞
async/await是基于Promise實(shí)現(xiàn)的，async/awt使得異步代碼看起來(lái)像同步代碼，所以優(yōu)點(diǎn)是，使用方法清晰明了，缺點(diǎn)是awt 將異步代碼改造成了同步代碼，如果多個(gè)異步代碼沒(méi)有依賴性卻使用了 awt 會(huì)導(dǎo)致性能上的降低，代碼沒(méi)有依賴性的話，完全可以使用 Promise.all 的方式。

JS 異步編程進(jìn)化史：callback -> promise -> generator/yield -> async/awt。

async/awt函數(shù)對(duì) Generator 函數(shù)的改進(jìn)，體現(xiàn)在以下三點(diǎn)：

- 內(nèi)置執(zhí)行器。 Generator 函數(shù)的執(zhí)行必須靠執(zhí)行器，而 async 函數(shù)自帶執(zhí)行器。也就是說(shuō)，async 函數(shù)的執(zhí)行，與普通函數(shù)一模一樣，只要一行。

- 更廣的適用性。 yield 命令后面只能是 Thunk 函數(shù)或 Promise 對(duì)象，而 async 函數(shù)的 awt 命令后面，可以跟 Promise 對(duì)象和原始類型的值（數(shù)值、字符串和布爾值，但這時(shí)等同于同步操作）。 - -更好的語(yǔ)義。 async 和 awt，比起星號(hào)和 yield，語(yǔ)義更清楚了。async 表示函數(shù)里有異步操作，awt 表示緊跟在后面的表達(dá)式需要等待結(jié)果。目前使用很廣泛的就是promise和async/aw

23.分別介紹mvc，mvvm，mvp三種模式

mvc

是后端語(yǔ)言的一種設(shè)計(jì)模式，主要實(shí)現(xiàn)對(duì)代碼分層。

m是數(shù)據(jù)模型，主要負(fù)責(zé)操作數(shù)據(jù)庫(kù)。

v是視圖層，主要負(fù)責(zé)頁(yè)面展示。

c是業(yè)務(wù)控制層，主要負(fù)責(zé)控制業(yè)務(wù)邏輯，將m數(shù)據(jù)層的數(shù)據(jù)交給v視圖層展示。

mvvm

是前端的一種設(shè)計(jì)模式，從mvc演變而來(lái)

m數(shù)據(jù)層，主要負(fù)責(zé)數(shù)據(jù)和方法初始化

v視圖層

vm視圖模型層，負(fù)責(zé)連接數(shù)據(jù)層和視圖層，將數(shù)據(jù)層的數(shù)據(jù)給視圖層展示，將視圖層的行為傳遞給數(shù)據(jù)層

mvp

后端設(shè)計(jì)模式，應(yīng)用于安卓開發(fā)

m數(shù)據(jù)層

v視圖層

p業(yè)務(wù)邏輯

24.清理瀏覽器緩存的方式

緩存:

第一次訪問(wèn)網(wǎng)站的時(shí)候，電腦會(huì)把網(wǎng)站上的圖片和數(shù)據(jù)下載到電腦上，當(dāng)再次訪問(wèn)該網(wǎng)站的時(shí)候，網(wǎng)站就會(huì)從電腦中直接加載出來(lái)

好處: 緩解服務(wù)器壓力提升性能

緩存位置:

memory cache:存儲(chǔ)操作系統(tǒng)緩存文件等資源，在內(nèi)存

disk cache:存續(xù)圖像和網(wǎng)頁(yè)等資源，在硬盤

清理方式:

強(qiáng)緩存:當(dāng)訪問(wèn)URL時(shí)，不會(huì)向服務(wù)器發(fā)送請(qǐng)求，直接從緩存中讀取資源，但是會(huì)返回200的狀態(tài)碼協(xié)商緩存:強(qiáng)緩存失效后，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)送請(qǐng)求，由服務(wù)器根據(jù)緩存標(biāo)識(shí)來(lái)決定是否使用緩存的過(guò)程

強(qiáng)緩存過(guò)程:

協(xié)商緩存過(guò)程:

協(xié)商緩存生效，返回304

協(xié)商緩存失效，返回200和請(qǐng)求結(jié)果

如何設(shè)置強(qiáng)緩存和協(xié)商緩存

強(qiáng)緩存: ?

express:設(shè)置緩存到期時(shí)間
cache-control:設(shè)置誰(shuí)可以緩存

public:資源和客戶端都可以緩存

privite：資源只有客戶端可以緩存

no-cache：客戶端緩存資源，但是是否緩存需要經(jīng)過(guò)協(xié)商緩存來(lái)驗(yàn)證

no-store：不使用緩存

max-age：緩存保質(zhì)期 ?

pragma:值為no-cache，效果一樣

協(xié)商緩存: ?

last-modified:服務(wù)器響應(yīng)請(qǐng)求時(shí)，返回文件最后被修改的時(shí)間
if-modified-since:客戶端再次發(fā)起該請(qǐng)求時(shí)，攜帶上次請(qǐng)求返回的Last-Modified值，服務(wù)器收到該請(qǐng)求，發(fā)現(xiàn)請(qǐng)求頭含有If-Modified-Since字段，則會(huì)根據(jù)If-Modified-Since的字段值與該資源在服務(wù)器的最后被修改時(shí)間做對(duì)比，若服務(wù)器的資源最后被修改時(shí)間大于If-Modified-Since的字段值，則重新返回資源，狀態(tài)碼為200；否則則返回304，代表資源無(wú)更新，可繼續(xù)使用緩存文件
etag:服務(wù)器響應(yīng)請(qǐng)求時(shí)，返回資源文件的唯一標(biāo)識(shí)
if-none-match:客戶端再次發(fā)起該請(qǐng)求時(shí)，攜帶上次請(qǐng)求返回的唯一標(biāo)識(shí)Etag值，服務(wù)器收到該請(qǐng)求后，發(fā)現(xiàn)該請(qǐng)求頭中含有If-None-Match，則會(huì)根據(jù)If-None-Match的字段值與該資源在服務(wù)器的Etag值做對(duì)比，一致則返回304，代表資源無(wú)更新，繼續(xù)使用緩存文件；不一致則重新返回資源文件，狀態(tài)碼為200

25.cookie機(jī)制，session機(jī)制，token機(jī)制

cookie機(jī)制: ?

客戶端向服務(wù)器發(fā)送第一次請(qǐng)求，服務(wù)器接收并處理請(qǐng)求
服務(wù)器端處理后，返回響應(yīng)數(shù)據(jù)，相應(yīng)數(shù)據(jù)中攜帶cookie信息希望客戶端儲(chǔ)存
客戶端接收響應(yīng)，把cookie存入本地。下次發(fā)送請(qǐng)求時(shí)，自動(dòng)攜帶cookie
服務(wù)器端第二次接收請(qǐng)求，解析到cookie信息，知道客戶端是誰(shuí)，完成http狀態(tài)管理

session機(jī)制:

?客戶端向服務(wù)器發(fā)送第一次請(qǐng)求，服務(wù)器接收并處理請(qǐng)求
服務(wù)器端分配一個(gè)sessionID，把它對(duì)應(yīng)的用戶端信息存在服務(wù)器端，以cookie的方式把sessionID和數(shù)據(jù)返回客戶端
客戶端保存sessionID，下次發(fā)請(qǐng)求時(shí)，攜帶
服務(wù)器端接收請(qǐng)求，解析到sessionID獲取到以前存過(guò)的客戶端信息，完成http狀態(tài)管理

token機(jī)制:

Token登錄認(rèn)證詳解_吉諾比利20的博客-CSDN博客_token認(rèn)證

es6新特性

1.es6新增了哪些數(shù)據(jù)類型？

基本:symbol，set，map

復(fù)雜:weakset，weakmap，typearray

2.es6新增了哪些特性？

let聲明變量

const聲明常量

map和set數(shù)據(jù)類型

模板字符串

對(duì)象數(shù)組解構(gòu)賦值

展開運(yùn)算符

函數(shù)默認(rèn)參數(shù)

對(duì)象字面量的增強(qiáng)（屬性名=屬性值，寫一個(gè)）

promise異步對(duì)象

calss類

3.let和var的區(qū)別

let聲明的變量有塊級(jí)作用域，沒(méi)有變量提升

var聲明的變量沒(méi)有塊級(jí)作用域，有變量提升

4.async/await的使用場(chǎng)景

async用來(lái)修飾函數(shù)的聲明，會(huì)變成一個(gè)異步函數(shù)

await用來(lái)修飾函數(shù)的調(diào)用，必須返回一個(gè)promise異步對(duì)象，用await修飾后，會(huì)將promise異步對(duì)象轉(zhuǎn)換為同步操作

5.箭頭函數(shù)作用和使用

箭頭函數(shù)使函數(shù)內(nèi)部的this指向和函數(shù)外部保持一致

箭頭函數(shù)內(nèi)部沒(méi)有this指向，可以在Ajax的回調(diào)函數(shù)中使用，讓回調(diào)函數(shù)的this指向事件源

可以在定時(shí)器的第二個(gè)參數(shù)使用箭頭函數(shù)，避免函數(shù)內(nèi)部的this指向全局window

6.對(duì)promise的理解

promise可以解決傳統(tǒng)的回調(diào)地獄

promise提供一個(gè)構(gòu)造函數(shù)，在使用時(shí)必須通過(guò)new創(chuàng)建一個(gè)實(shí)例對(duì)象，在創(chuàng)建實(shí)例對(duì)象時(shí)需要傳遞一個(gè)匿名函數(shù)，這個(gè)匿名函數(shù)需要兩個(gè)參數(shù)（resolve，reject），resolve成功處理函數(shù)，reject失敗處理函數(shù)。成功/失敗的處理函數(shù)觸發(fā)由具體業(yè)務(wù)邏輯決定。

resolve和reject需要通過(guò)promise實(shí)例對(duì)象提供的then方法傳遞。promise提供兩個(gè)靜態(tài)方法all和race。all可以一次執(zhí)行多個(gè)promise實(shí)例，返回?cái)?shù)組。race也可以一次執(zhí)行多個(gè)promise實(shí)例。

微信小程序

1.微信小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)？

小程序頁(yè)面跳轉(zhuǎn):

使用組件

使用api

wx.navigateTo(｛url:'../home/home'｝)

tabbar頁(yè)面跳轉(zhuǎn)

使用組件

使用api

wx.switchTabbar(｛url:'../index/index'｝)

2.簡(jiǎn)單描述小程序的生命周期

分為應(yīng)用生命周期和頁(yè)面生命周期

應(yīng)用生命周期:

onLaunch:應(yīng)用啟動(dòng)，只執(zhí)行一次

onShow:應(yīng)用切換到前臺(tái)

onHide:應(yīng)用切換到后臺(tái)

noError:運(yùn)行階段出現(xiàn)錯(cuò)誤

onPageNotFound:找不到頁(yè)面

頁(yè)面生命周期:

onLoad:頁(yè)面開始加載

onReady:頁(yè)面加載完畢

onShow:頁(yè)面進(jìn)入焦點(diǎn)狀態(tài)

onHide:頁(yè)面進(jìn)入后臺(tái)狀態(tài)

3.微信小程序如何請(qǐng)求數(shù)據(jù)接口？

通過(guò)wx.request

4.如何優(yōu)化小程序代碼包的體積？

分包加載，使用分包加載可以讓小程序代碼體積達(dá)到8m

將資源文件盡量放在遠(yuǎn)程服務(wù)器端

總結(jié)

以上是生活随笔為你收集整理的面试题整理（全）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

面试题

上一篇： Android开发项目管理7宗罪之五——
下一篇：网页代码优化html标签,通过优化网页H