基本思想是使用對(duì)象，類，繼承，封裝等基本概念來(lái)進(jìn)行程序設(shè)計(jì)

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

面向?qū)ο笈c面向過(guò)程的區(qū)別

1、面向過(guò)程代碼復(fù)用性不高，面向?qū)ο髲?fù)用性高

2、面向過(guò)程是對(duì)步驟進(jìn)行的操作及劃分，面向?qū)ο髣t是以功能去劃分，保證了功能的統(tǒng)一

014.typeof類型判斷

typeof 是否能正確判斷類型？instanceof 能正確判斷對(duì)象的原理是什么？

• typeof 對(duì)于原始類型來(lái)說(shuō)，除了 null 都可以顯示正確的類型

  typeof 1 // 'number' typeof '1' // 'string' typeof undefined // 'undefined' typeof true // 'boolean' typeof Symbol() // 'symbol'

• typeof 對(duì)于對(duì)象來(lái)說(shuō)，除了函數(shù)都會(huì)顯示 object，所以說(shuō) typeof 并不能準(zhǔn)確判斷變量到底是什么類型

  typeof [] // 'object' typeof {} // 'object' typeof console.log // 'function'

• 如果我們想判斷一個(gè)對(duì)象的正確類型，這時(shí)候可以考慮使用 instanceof，因?yàn)閮?nèi)部機(jī)制是通過(guò)原型鏈來(lái)判斷的

  const Person = function() {} const p1 = new Person() p1 instanceof Person // truevar str = 'hello world' str instanceof String // falsevar str1 = new String('hello world') str1 instanceof String // true

  對(duì)于原始類型來(lái)說(shuō)，你想直接通過(guò) instanceof來(lái)判斷類型是不行的

015.字符串的常用方法

1.計(jì)算字符串的長(zhǎng)度

• str.length，會(huì)計(jì)算空格數(shù)。

2.查找字符在字符串中的位置：

• Str.indexof("要找的字符"),從前往后找，只找第一個(gè)，返回值是索引。沒(méi)有找到返回值-1，兼容性很好。
• Str.lastIndexof("要找的字符"),從后往前找，只找第一個(gè)，返回值是索引。沒(méi)有找到返回值-1，兼容性很好。

3.根據(jù)傳入索引，查找該元素是什么

• Str.charAt(index)

4.根據(jù)傳入索引，查找該元素編碼是什么

• Str.charCodeAt(index)

5.根據(jù)字符編碼查找該字符

• String.fromCharCode()

6.字符串截取的方法

• Str.slice(start,end)

  • 作用：對(duì)字符串截取，start表示截取的開始元素，end表示截取的截止元素，包前不包后。

  • 返回值：截取的字符串

  • console.log(str.slice(0,4));//0是起始索引,4是結(jié)束索引,不包含4 console.log(str.slice(4));//表示從4到結(jié)束 console.log(str.slice(-3));//表示倒數(shù)第三到最后

• Str.substr(start,length)

  • 作用：對(duì)字符串截取，start表示截取的開始元素，length表示截取的長(zhǎng)度

  • 返回值：截取的字符串

  • console.log(str.substr(0,2));//從0開始截取2個(gè)console.log(str.substr(2));//從2開始到最后console.log(str.substr(-3,2))//從倒數(shù)第三個(gè),截取2個(gè)

• str.substring(start,end)

  • 作用:對(duì)字符串進(jìn)行截取
  • 參數(shù):start表示截取開始的索引,end表示截取結(jié)束的索引,end要大于start,不允許負(fù)數(shù)
  • 返回:從start到end的字符串,不包含end

7.字符串變小寫

• Str.toLowerCase()

8.字符串變大寫

• Str.toUpperCase()

9.去除前后空格

• str.trim()

016.數(shù)組的常用方法

1.1.增

• 數(shù)組.unshift(item); 從數(shù)組前面增加一個(gè)元素
  • 作用:從數(shù)組前面增加一個(gè)元素
  • 參數(shù):item要新增的那個(gè)元素
  • 返回值:數(shù)組的長(zhǎng)度
  • 注意點(diǎn):直接在原數(shù)組操作
• 數(shù)組.push(item)：從數(shù)組后面增加一個(gè)元素
  • 作用:從數(shù)組后面增加一個(gè)元素
  • 參數(shù):item要新增的那個(gè)元素
  • 返回值:數(shù)組的長(zhǎng)度
  • 注意點(diǎn):直接在原數(shù)組操作

1.2.刪

• 數(shù)組.shift()：刪除數(shù)組中的第一個(gè)元素

  • 作用：刪除數(shù)組中的第一個(gè)元素。
  • 返回值：被刪除的那個(gè)元素。
  • 參數(shù)：無(wú)
  • 注意：直接在原數(shù)組操作，不會(huì)生成新數(shù)組。

• 數(shù)組.pop()：刪除數(shù)組中的最后一個(gè)元素

  • 作用：刪除數(shù)組中的最后一個(gè)元素
  • 返回值：被刪除的那個(gè)元素。
  • 參數(shù)：無(wú)
  • 注意：直接在原數(shù)組操作，不會(huì)生成新數(shù)組。

• 數(shù)組.splice(start,n)：** 從數(shù)組的start位置開始刪除n個(gè)元素

  • 作用:從數(shù)組的start位置開始刪除n個(gè)元素
  • 參數(shù):start表示從哪個(gè)索引開始刪除,n表示要?jiǎng)h除幾個(gè)元素
  • 返回值:被刪除的元素的集合
  • 注意點(diǎn):直接在原數(shù)組操作

  數(shù)組.splice(start,n,.....)：從數(shù)組的start位置開始刪除n個(gè)元素，然后再添加什么元素

  • 作用:從數(shù)組的start位置開始刪除n個(gè)元素,新增m個(gè)元素
  • 參數(shù):start表示從哪個(gè)索引開始刪除或者增加,n表示要?jiǎng)h除幾個(gè)元素,后面由m個(gè)參數(shù),就是要增加要數(shù)組中的新元素,從索引是start位置開始增加。
  • 返回值:被刪除的元素的集合
  • 注意點(diǎn):直接在原數(shù)組操作

1.3.截取

• 數(shù)組.slice(start,end)：從數(shù)組中截取一部分
  • 作用:從數(shù)組中截取一部分
  • 參數(shù):start表示開始截取的索引,end表示結(jié)束截取的索引,包start,不包end，（包前不包后）
  • 返回值:返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 所有元素
  • 注意點(diǎn):返回一個(gè)新數(shù)組,原數(shù)組不變

1.4.顛倒數(shù)組

• 數(shù)組.reverse()：顛倒數(shù)組
  • 作用:顛倒數(shù)組
  • 參數(shù):無(wú)
  • 返回值:原數(shù)組
  • 注意點(diǎn):直接在原數(shù)組操作

1.5.連接數(shù)組

• 數(shù)組1.concat(數(shù)組2,數(shù)組3,......)：
  • 作用:用于連接多個(gè)數(shù)組
  • 參數(shù):要被連接的那些數(shù)組
  • 返回值:連接好的新數(shù)組
  • 注意點(diǎn):不在原數(shù)組操作,會(huì)產(chǎn)生新數(shù)組

1.6.數(shù)組變字符串

• 數(shù)組.join(“分割符”)：把數(shù)組變成字符串
  • 作用:把數(shù)組變成字符串
  • 參數(shù):默認(rèn)是逗號(hào),分隔符
  • 返回值:生成的那個(gè)字符串
  • 注意點(diǎn):不會(huì)改變?cè)瓟?shù)組

1.7.查詢

• 數(shù)組.indexof(ele,start)

  • 作用：查找數(shù)組中某個(gè)元素的索引

  • 返回值：如果沒(méi)找到就返回-1，如果找到了就返回該元素的索引值。

  • 參數(shù)：第一個(gè)參數(shù)ele是：要查找的那個(gè)元素

    ? 第二個(gè)參數(shù)start：從哪里開始查找，默認(rèn)從零開始找

• 數(shù)組.lastIndexof(ele,start)

  • 作用：查找數(shù)組中某個(gè)元素的索引

  • 返回值：如果沒(méi)找到就返回-1，如果找到了就返回該元素的索引值。

  • 參數(shù)：第一個(gè)參數(shù)ele是：要查找的那個(gè)元素

    ? 第二個(gè)參數(shù)start：從哪里開始查找，默認(rèn)從零開始找

1.8.數(shù)組排序

• 數(shù)組.sort(fn);

  • 作用:按照指定規(guī)則進(jìn)行排序

  • 參數(shù):如果不寫參數(shù),默認(rèn)是按照字符編碼的順序進(jìn)行排序,如果寫參數(shù),參數(shù)fn是表示排序 規(guī)則的函數(shù)

  • 返回值:返回值就是拍好序的數(shù)組

  • 注意點(diǎn):直接在原數(shù)組操作

  • 有參數(shù):參數(shù)是表示排序規(guī)則的函數(shù)

  • 示例“

017.數(shù)組的遍歷

1.for循環(huán)

2.for in 循環(huán)

3.forEach()循環(huán)

4.map()循環(huán)

5.fliter()循環(huán)

6.every()循環(huán)

7.some()循環(huán)

018.遍歷對(duì)象

1.for in()

• 主要用于遍歷對(duì)象，可枚舉屬性，包括自有屬性，繼承自原型的屬性

2.Object.keys()

• Object.keys主要用于遍歷對(duì)象自有的可枚舉屬性，不包括繼承自原型的屬性和不可枚舉的屬性。

  var obj = {"name":"tom","sex":"male"}；Object.defineProperty(obj, "age", {value:"18", enumerable:false});//增加不可枚舉的屬性ageObject.prototype.protoPer1 = function(){console.log("name is tom");};//通過(guò)原型鏈增加屬性，為一個(gè)函數(shù)Object.prototype.protoPer2 = 2;通過(guò)原型鏈增加屬性，為一個(gè)整型值2console.log("Object.keys:")console.log(Object.keys(obj));//["name",'sex']

3.Object.getOwnPropertyNames()

• Object.getOwnProperty主要用于返回對(duì)象的自有屬性，包括可枚舉和不可枚舉的屬性，不包括繼承自原型的屬性。

  var obj = {"name":"tom","sex":"male"}；Object.defineProperty(obj, "age", {value:"18", enumerable:false});//增加不可枚舉的屬性ageObject.prototype.protoPer1 = function(){console.log("name is tom");};//通過(guò)原型鏈增加屬性，為一個(gè)函數(shù)Object.prototype.protoPer2 = 2;通過(guò)原型鏈增加屬性，為一個(gè)整型值2 console.log("Object.getOwnPropertyNames: "); console.log(Object.getOwnPropertyNames(obj));//["name","sex","age"]

019.怎么判斷一個(gè)對(duì)象為空對(duì)象

020.數(shù)組去重

1.for循環(huán)嵌套，利用splice去重

2.建新數(shù)組，利用indexOf去重

3.ES6中利用Set，Array.from去重

4.ES6中利用Set，擴(kuò)展運(yùn)算符去重

021.阻止事件傳播/阻止瀏覽器默認(rèn)行為

1.事件捕獲

event.stopPropagation()

2.事件冒泡

event.cancelBubble=false 低版本IE

3.阻止瀏覽器默認(rèn)行為：火狐/谷歌

event.preventDefault()

4.阻止瀏覽器默認(rèn)行為：低版本IE

event.returnValue=false

022.ajax

• ajax的優(yōu)點(diǎn)：
• 頁(yè)面無(wú)刷新更新數(shù)據(jù)：ajax最大的優(yōu)點(diǎn)就是能夠在不刷新網(wǎng)頁(yè)的情況下與服務(wù)器通信維護(hù)數(shù)據(jù)；
• 異步與服務(wù)器通信：ajax使用異步方式與服務(wù)器通信 ，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力；
• 前端和后端負(fù)載平衡：ajax可以把以前一些服務(wù)端負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本；
• 基于標(biāo)準(zhǔn)被廣泛支持：ajax基本標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載瀏覽器插件；
• 界面與應(yīng)用分離：ajax使WEB中的數(shù)據(jù)與呈現(xiàn)分離，有利于分工合作，提高效率。
• ajax的缺點(diǎn)
• ajax干掉了Back和History功能：即對(duì)瀏覽器機(jī)制的破壞，在動(dòng)態(tài)頁(yè)面的情況下，用戶無(wú)法回到前面一個(gè)頁(yè)面狀態(tài)；
• ajax有安全問(wèn)題：ajax技術(shù)給用戶帶來(lái)了很好的用戶體驗(yàn)的同時(shí)也帶來(lái)了新的安全威脅，ajax技術(shù)就如同對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接的通道；
• 對(duì)搜索引擎支持較弱：對(duì)搜索引擎優(yōu)化不太好；
• 破壞程序的異常處理機(jī)制：像Ajax。dll，Ajaxpro.dll這些Ajax框架是會(huì)破壞程序的異常機(jī)制；
• AJAX不能很好支持移動(dòng)端設(shè)備；

更全面的 ajax 知識(shí)，詳細(xì)見(jiàn)網(wǎng)址 ：https://blog.csdn.net/weixin_47076989/article/details/107109094

023.get/post區(qū)別

024.async await

025.函數(shù)this指向

• this，普通函數(shù)執(zhí)行的時(shí)候產(chǎn)生，箭頭函數(shù)沒(méi)有自己的this，它的this指向上下文中的this(即所處環(huán)境的this）

026.原型：

• 每一個(gè)函數(shù)對(duì)象（Function.prototype除外）都有一個(gè)prototype屬性（這個(gè)屬性指向一個(gè)對(duì)象即原型）

三、Vue

001.Vue 項(xiàng)目?jī)?yōu)化:

002.說(shuō)一說(shuō) Vue 響應(yīng)式原理

• 基于ES5的object.definedProperty() 這個(gè)方法對(duì)數(shù)據(jù)做劫持。劫持?jǐn)?shù)據(jù)的set與get，然后結(jié)合watch監(jiān)聽（發(fā)布訂閱模式）在數(shù)據(jù)發(fā)生變化時(shí)，通知頁(yè)面進(jìn)行更新

特點(diǎn)：
由于ES5的object.definedProperty（）這個(gè)方法不兼容 IE8，所以我們的vue的兼容性也是不兼容 IE8 及以下版本

003.MVVM架構(gòu)思想

MVVM分為Model、View、ViewModel三者。
Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；

004.解釋單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定

• 單向數(shù)據(jù)流： 顧名思義，數(shù)據(jù)流是單向的。數(shù)據(jù)流動(dòng)方向可以跟蹤，流動(dòng)單一，追查問(wèn)題的時(shí)候可以更快捷。缺點(diǎn)就是寫起來(lái)不太方便。要使UI發(fā)生變更就必須創(chuàng)建各種 action 來(lái)維護(hù)對(duì)應(yīng)的 state雙向數(shù)據(jù)綁定：數(shù)據(jù)之間是相通的，將數(shù)據(jù)變更的操作隱藏在框架內(nèi)部。優(yōu)點(diǎn)是在表單交互較多的場(chǎng)景下，會(huì)簡(jiǎn)化大量與業(yè)務(wù)無(wú)關(guān)的代碼。缺點(diǎn)就是無(wú)法追蹤局部狀態(tài)的變化，增加了出錯(cuò)時(shí) debug 的難度

005.hash、history 的區(qū)別?

• vue-router 默認(rèn)使用 hash 模式，所以在路由加載的時(shí)候，項(xiàng)目中的 url 會(huì)自帶 #。如果不想使用 #， 可以使用 vue-router 的另一種模式 history

!!!需要注意的是，當(dāng)我們啟用 history 模式的時(shí)候，由于我們的項(xiàng)目是一個(gè)單頁(yè)面應(yīng)用，所以在路由跳轉(zhuǎn)的時(shí)候，就會(huì)出現(xiàn)訪問(wèn)不到靜態(tài)資源而出現(xiàn) 404 的情況，這時(shí)候就需要服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面

• url 展示上，hash 模式有“#”，history 模式?jīng)]有
• 刷新頁(yè)面時(shí)，hash 模式可以正常加載到 hash 值對(duì)應(yīng)的頁(yè)面，而 history 沒(méi)有處理的話，會(huì)返回 404，一般需要后端將所有頁(yè)面都配置重定向到首頁(yè)路由
• 兼容性，hash 可以支持低版本瀏覽器和 IE。

006.常用的Vue 指令有哪些?

007.常用的Vue 指令有哪些

008. computed 和 watch 有什么區(qū)別？

009. 介紹下 虛擬DOM

虛擬dom與diff運(yùn)算:

• 虛擬dom就是一個(gè)json對(duì)象，他用于對(duì)真實(shí)的dom進(jìn)行描述

diff運(yùn)算：

• 當(dāng)vue實(shí)例中的數(shù)據(jù)發(fā)生變化時(shí)，vue會(huì)獲得一份對(duì)虛擬dom的拷貝，如此我們就有兩份虛擬dom，一份是數(shù)據(jù)變化前的虛擬dom，一份是數(shù)據(jù)變化后的虛擬dom，所謂的diff運(yùn)算就是對(duì)著兩份虛擬dom進(jìn)行差異比較，從而找出他們最小的差異，再把這份最小的差異渲染到真實(shí)dom中去
• 同級(jí)比較，再比較子節(jié)點(diǎn)
  先判斷一方有子節(jié)點(diǎn)一方?jīng)]有子節(jié)點(diǎn)的情況(如果新的children沒(méi)有子節(jié)點(diǎn)，將舊的子節(jié)點(diǎn)移除)
  比較都有子節(jié)點(diǎn)的情況(核心diff)
  遞歸比較子節(jié)點(diǎn)

010.diff算法

011.vue生命周期的理解

• beforeCreate: vue實(shí)例的掛載元素el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化。
• created: vue實(shí)例的數(shù)據(jù)對(duì)象data有了，el還沒(méi)有
• beforeMount: vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。
• mounted: vue實(shí)例掛載完成，data.message成功渲染。
• beforeUpdate: 數(shù)據(jù)更新前調(diào)用
• Update: 數(shù)據(jù)更新后調(diào)用
• beforeDestroy：適合移除事件、定時(shí)器等等，否則可能會(huì)引起內(nèi)存泄露的問(wèn)題。
• destroyed: 進(jìn)行一系列的銷毀操作，如果有子組件的話，也會(huì)遞歸銷毀子組件，所有子組件都銷毀完畢后才會(huì)執(zhí)行

第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

• 會(huì)觸發(fā)下面這幾個(gè)beforeCreate、created、beforeMount、mounted

簡(jiǎn)單描述每個(gè)周期具體適合哪些場(chǎng)景？

• 生命周期鉤子的一些使用方法： beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā) created : 初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用 mounted : 掛載元素，獲取到DOM節(jié)點(diǎn) updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù) beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框 nextTick : 更新數(shù)據(jù)后立即操作dom;

012. 組件通信

013.vue-rotuer 路由實(shí)現(xiàn)

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

015.Vue組件中 data 為什么必須是函數(shù)？

• 組件時(shí)可以進(jìn)行復(fù)用的，如果 data直接寫成對(duì)象，復(fù)用的時(shí)候，會(huì)造成數(shù)據(jù)污染 (復(fù)用后影響其他實(shí)例) 因?yàn)閷?duì)象是引用數(shù)據(jù)類型
• data方法返回一個(gè)對(duì)象作為組件的屬性，這樣做的目的是為了每一個(gè)組件實(shí)例都擁有獨(dú)立的data屬性

016.vue 等單頁(yè)面應(yīng)用的優(yōu)缺點(diǎn)

017.$route和$router的區(qū)別

• $router 為 VueRouter 實(shí)例，想要導(dǎo)航到不同 URL，則使用 $router.push方法$route 為當(dāng)前 router 跳轉(zhuǎn)對(duì)象里面可以獲取 name 、 path 、 query 、 params 等

018.NextTick 是做什么的

• $nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM

019. 計(jì)算屬性computed 和 事件 methods 有什么區(qū)別

• computed: 計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值對(duì)于 method ，只要發(fā)生重新渲染，method 調(diào)用總會(huì)執(zhí)行該函數(shù)

020.對(duì)比 jQuery ， Vue 有什么不同

• jQuery 通過(guò)操作 DOM 去實(shí)現(xiàn)頁(yè)面的一些邏輯渲染；
• Vue 通過(guò)數(shù)據(jù)的雙向綁定，最終表現(xiàn)在 DOM 層面，減少了 DOM 操作Vue 使用了組件化思想，使得項(xiàng)目子集職責(zé)清晰，提高了開發(fā)效率，方便重復(fù)利用，便于協(xié)同開發(fā)

021.對(duì)keep-alive 的理解

keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染

• 如果你需要在組件切換的時(shí)候，保存一些組件的狀態(tài)防止多次渲染，就可以使用 keep-alive 組件包裹需要保存的組件。
• 對(duì)于 keep-alive 組件來(lái)說(shuō)，它擁有兩個(gè)獨(dú)有的生命周期鉤子函數(shù)，分別為 activated 和 deactivated 。用 keep-alive 包裹的組件在切換時(shí)不會(huì)進(jìn)行銷毀，而是緩存到內(nèi)存中并執(zhí)行 deactivated 鉤子函數(shù)，命中緩存渲染后會(huì)執(zhí)行 actived 鉤子函數(shù)。

022.Vue 中 key 的作用

• key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用 key，它會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除 key 不存在的元素。有相同父元素的子元素必須有獨(dú)特的 key。重復(fù)的 key 會(huì)造成渲染錯(cuò)誤

023.Vue 的核心是什么

024.hash模式與 history模式的區(qū)別？

025.

四、React

001.react 項(xiàng)目?jī)?yōu)化?

002.Vue 和 reacat 的區(qū)別?

003.React 的特點(diǎn)和優(yōu)勢(shì)?

004.函數(shù)式編程好處：

005.JSX 注意事項(xiàng)

006.生命周期

1.初始化階段

componentWillMount ：render之前最后一次修改狀態(tài)的機(jī)會(huì)

render : 只能訪問(wèn)this.props和 this.state，不允許修改狀態(tài)和Dom 輸出

componentDidMount ：成功render并渲染完成真實(shí)Dom之后觸發(fā)，可以修改DOM

2.運(yùn)行中階段

componentWillReceiveProps ：父組件修改屬性觸發(fā)

shouldComponentUpdate ：返回false會(huì)阻止render調(diào)用

componentWillUpdate ：不能修改屬性和狀態(tài)

render : 只能訪問(wèn)this.props和 this.state，不允許修改狀態(tài)和Dom 輸出

componentDidUpdate : 可以修改DOM

3.銷毀階段

componentWillUnmount ：在刪除這個(gè)組件前進(jìn)行清理操作

問(wèn)題：

解決：

007.react中性能優(yōu)化的方案

008.為什么虛擬 dom 會(huì)提高性能?(必考)

009.區(qū)分Real DOM和Virtual DOM

010.什么是React？

011.React 的一些主要特點(diǎn)是:

012.你怎樣理解“在React中，一切都是組件”這句話

• 組件是 React 應(yīng)用 UI 的構(gòu)建塊。這些組件將整個(gè) UI 分成小的獨(dú)立并可重用的部分。每個(gè)組件彼此獨(dú)立，而不會(huì)影響 UI 的其余部分。

013.什么是 Props?

• Props 是 React 中屬性的簡(jiǎn)寫。它們是只讀組件，必須保持純，即不可變。它們總是在整個(gè)應(yīng)用中從父組件傳遞到子組件。子組件永遠(yuǎn)不能將 prop 送回父組件。這有助于維護(hù)單向數(shù)據(jù)流，通常用于呈現(xiàn)動(dòng)態(tài)生成的數(shù)據(jù)。

014.react 中的高階函數(shù)

015.react 中的高階函數(shù)

016. 高階組件

• 高階組件就是一個(gè)函數(shù)，且該函數(shù)接受一個(gè)組件作為參數(shù)，并返回一個(gè)新的組件。基本上，這是從React的組成性質(zhì)派生的一種模式，我們稱它們?yōu)椤凹儭苯M件， 因?yàn)樗鼈兛梢越邮苋魏蝿?dòng)態(tài)提供的子組件，但它們不會(huì)修改或復(fù)制其輸入組件的任何行為。

父子通信

兄弟組件通信：
對(duì)于這種情況可以通過(guò)共同的父組件來(lái)管理狀態(tài)和事件函數(shù)，比如說(shuō)其中一個(gè)兄弟組件調(diào)用父組件傳遞過(guò)來(lái)的事件函數(shù)修改父組件中的狀態(tài)，然后父組件將狀態(tài)給另一個(gè)兄弟組件

跨多層次組件通信：
如果你使用16.3 以上版本的話，對(duì)于這種情況可以使用 Context API

任意組件:
這種方式可以通過(guò)Redux 或者 Event Bus 解決，另外如果你不怕麻煩的話，可以使用這種方式解決上述所有的通信情況

018. Hoc 高階組件

• 高階組件和高階函數(shù)就是同一個(gè)東西，我們實(shí)現(xiàn)一個(gè)函數(shù)，傳入一個(gè)組件，然后在函數(shù)內(nèi)部再實(shí)現(xiàn)一個(gè)函數(shù)去擴(kuò)展傳入的組件，最后返回一個(gè)新的組件，這就是高階組件的概念，作用就是為了更好的復(fù)用代碼

019. react中有多少種創(chuàng)建組件的方法？

020. jsx 語(yǔ)法糖:

021. React組件生命周期的階段是什么？

022. React 生命周期？

一些最重要的生命周期方法是：

componentWillMount 創(chuàng)建實(shí)例前

render 渲染數(shù)據(jù)

componentDidMount 創(chuàng)建實(shí)例完成

componentWillUpdate 更新前

componentDidUpdate 更新完成 這個(gè)每次都會(huì)重新請(qǐng)求 不會(huì)判斷如果是一樣的就不更新

shouldcomponentUpdate(nextProps,nextState) nextProps新的值 nextState老的值 這個(gè)可以判斷是否更新 默認(rèn)是true更新 就會(huì)一直更新 不應(yīng)該更新就返回false 這里就是要判斷應(yīng)不應(yīng)該更新 如果更新之后的值和之前的值是一樣的話 就返回 false 不讓他更新了

componentWillReceiveProps(nextProps) nextProps更改之后的值 這個(gè)生命周期 是在 父組件屬性發(fā)生改變才會(huì)觸發(fā)

componentWillunmount 銷毀就會(huì)觸發(fā)這個(gè)

新增生命周期：==========================
初始化： getDeriveStateFromProps(nextProps,nextState) nextState老數(shù)據(jù) nextProps更新之后的數(shù)據(jù) 使用的時(shí)候要加 static getDerivedStateFromProps(nextProps,nextState)

更新: getDeriveStateFromProps(nextProps,nextState) nextState老數(shù)據(jù) nextProps更新之后的數(shù)據(jù) 這個(gè)生命周期只要是父組件調(diào)用 setState 就會(huì)走整個(gè)的更新階段，
getDeriveStateFromProps 這個(gè)生命周期 相當(dāng)于兩個(gè)作用 一個(gè)是初始化的時(shí)候一個(gè)更新就的時(shí)候就是父組件屬性發(fā)生屬性發(fā)生改變就會(huì)觸發(fā)這里

更新：getSnapshotBeforeUpdate 這個(gè)就是更新之前會(huì)觸發(fā)的 ，但是的話就是先會(huì)執(zhí)行render渲染 然后立馬執(zhí)行 getSnapshotBeforeUpdate 然后這個(gè)必須有返回值 這個(gè)返回值可以在更新完成那個(gè)生命周期的第三個(gè)參數(shù)接收到

這個(gè)相當(dāng)于有個(gè)快照的感覺(jué)，就是一渲染立馬會(huì)記錄那個(gè)狀態(tài)，這個(gè)是渲染在更新，會(huì)記錄那個(gè)瞬間的值

023.受控組件和非受控組件的區(qū)別?

024. 純函數(shù)?

025.react 中key的作用是什么？

• key是React中用于追蹤哪些列表中元素被修改、刪除或者被添加的輔助標(biāo)識(shí)。在diff算法中，key用來(lái)判斷該元素節(jié)點(diǎn)是被移動(dòng)過(guò)來(lái)的還是新創(chuàng)建的元素，減少不必要的元素重復(fù)渲染。

026.setState

027.通信

028.傳入 setState 函數(shù)的第二個(gè)參數(shù)的作用是什么?

• 因?yàn)閟etState是一個(gè)異步的過(guò)程，所以說(shuō)執(zhí)行完setState之后不能立刻更改state里面的值。如果需要對(duì)state數(shù)據(jù)更改監(jiān)聽，setState提供第二個(gè)參數(shù)，就是用來(lái)監(jiān)聽state里面數(shù)據(jù)的更改，當(dāng)數(shù)據(jù)更改完成，調(diào)用回調(diào)函數(shù)。

029. React 中 refs 的作用是什么

• refs就想一個(gè)逃生窗，允許我們之間訪問(wèn)dom元素或者組件實(shí)例，可以向組件添加一個(gè)ref屬性的值是一個(gè)回調(diào)函數(shù)，它將接受地城dom元素或組件的已掛在實(shí)例，作為第一個(gè)參數(shù)

030. 在生命周期中的哪一步你應(yīng)該發(fā)起AJAX 請(qǐng)求

我們應(yīng)該將 AJAX 請(qǐng)求放到 componentDidMount 函數(shù)中執(zhí)行，主要原因有下：

031. shouldComponentUpdate 的作用

• shouldComponentUpdate 允許我們手動(dòng)地判斷是否要進(jìn)行組件更新，根據(jù)組件的應(yīng)用場(chǎng)景設(shè)置函數(shù)的合理返回值能夠幫我們避免不必要的更新

032.當(dāng)你調(diào)用setState的時(shí)候，發(fā)生了什么事？

• 當(dāng)調(diào)用 setState 時(shí)，React會(huì)做的第一件事情是將傳遞給 setState 的對(duì)象合并到組件的當(dāng)前狀態(tài)。這將啟動(dòng)一個(gè)稱為和解（reconciliation）的過(guò)程。和解（reconciliation）的最終目標(biāo)是以最有效的方式，根據(jù)這個(gè)新的狀態(tài)來(lái)更新UI。 為此，React將構(gòu)建一個(gè)新的 React 元素樹（您可以將其視為 UI 的對(duì)象表示）。

• 一旦有了這個(gè)樹，為了弄清 UI 如何響應(yīng)新的狀態(tài)而改變，React 會(huì)將這個(gè)新樹與上一個(gè)元素樹相比較（ diff ）。

• 通過(guò)這樣做， React 將會(huì)知道發(fā)生的確切變化，并且通過(guò)了解發(fā)生什么變化，只需在絕對(duì)必要的情況下進(jìn)行更新即可最小化 UI 的占用空間。

033.在 React 當(dāng)中 Element 和 Component 有何區(qū)別？

• 簡(jiǎn)單地說(shuō)，一個(gè) React element 描述了你想在屏幕上看到什么。換個(gè)說(shuō)法就是，一個(gè) React element 是一些 UI 的對(duì)象表示。
• 一個(gè) React Component 是一個(gè)函數(shù)或一個(gè)類，它可以接受輸入并返回一個(gè) React element t（通常是通過(guò) JSX ，它被轉(zhuǎn)化成一個(gè) createElement 調(diào)用）。

034. createElement 與 cloneElement 的區(qū)別是什么?

035.redux中間件

• 中間件提供第三方插件的模式， 自定義攔截 action -> reducer 的過(guò)程，變?yōu)?action -> middewares ->reducer . 這種機(jī)制可以讓我們改表數(shù)據(jù)流。實(shí)現(xiàn)如異步 action 、 action 過(guò)濾、日志輸出，異常報(bào)告等功能

redux-logger : 提供日志輸出
redux-thunk : 處理異步操作
redux-promise : 處理異步操作，actionCreator的返回值是 promise

036.redux的設(shè)計(jì)思想

037.redux？

是一個(gè)應(yīng)用數(shù)據(jù)流框架，集中式管理
**怎么用：**view調(diào)用 store 的 dispath 接收 action 傳入 store ，reducer 進(jìn)行 state 操作， view 通過(guò) store 提供的 getState 獲取最新的數(shù)據(jù)
缺點(diǎn): state必須由父組件傳過(guò)來(lái)，子組件相關(guān)數(shù)據(jù)更新，父組件會(huì)強(qiáng)制渲染

038.redux 有什么特點(diǎn)

039.Redux三大原則

040.Redux有四個(gè)組成部分

041.解釋 Reducer 的作用?

• Reducers 是純函數(shù)，它規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng) ACTION 而改變。Reducers 通過(guò)接受先前的狀態(tài)和 action 來(lái)工作，然后它返回一個(gè)新的狀態(tài)。它根據(jù)操作的類型確定需要執(zhí)行哪種更新，然后返回新的值。如果不需要完成任務(wù)，它會(huì)返回原來(lái)的狀態(tài)。

042.Store 在 Redux 中的意義是什么？

• Store 是一個(gè) JavaScript 對(duì)象，它可以保存程序的狀態(tài)，并提供一些方法來(lái)訪問(wèn)狀態(tài)、調(diào)度操作和注冊(cè)偵聽器。應(yīng)用程序的整個(gè)狀態(tài)/對(duì)象樹保存在單一存儲(chǔ)中。因此，Redux 非常簡(jiǎn)單且是可預(yù)測(cè)的。我們可以將中間件傳遞到 store 來(lái)處理數(shù)據(jù)，并記錄改變存儲(chǔ)狀態(tài)的各種操作。所有操作都通過(guò) reducer 返回一個(gè)新狀態(tài)。

043.為啥要用 redux？

044.react-redux?

045.Redux與Flux有何不同？

046.react性能優(yōu)化是哪個(gè)周期函數(shù)

047.虛擬DOM

048.diff算法?

049.react性能優(yōu)化方案

050.簡(jiǎn)述flux 思想?

051.Redux 有哪些優(yōu)點(diǎn)？

052.Hooks?

053.狀態(tài)提升？

• 如果多個(gè)組件需要反映相同的變化數(shù)據(jù)，建議將共享狀態(tài)提升到最近的共同父組件中去，從而依靠自上而下的數(shù)據(jù)流，而不是嘗試在不同組件間同步 state

054.高階組件(higher order component)

• 高階組件是一個(gè)以組件為參數(shù)并返回一個(gè)新組件的函數(shù)。HOC 運(yùn)行你重用代碼、邏輯和引導(dǎo)抽象。最常見(jiàn)的可能是 Redux 的 connect 函數(shù)。除了簡(jiǎn)單分享工具庫(kù)和簡(jiǎn)單的組合，HOC 最好的方式是共享 React 組件之間的行為。如果你發(fā)現(xiàn)你在不同的地方寫了大量代碼來(lái)做同一件事時(shí)，就應(yīng)該考慮將代碼重構(gòu)為可重用的 HOC。

055.State和props的區(qū)別

• state 和 props都直接和組件的UI渲染有關(guān)，它們的變化都會(huì)觸發(fā)組件重新渲染，
• 但props對(duì)于使用它的組件來(lái)說(shuō)是只讀的，是通過(guò)父組件傳遞過(guò)來(lái)的，要想修改props，只能在父組件中修改；而state是組件內(nèi)部自己維護(hù)的狀態(tài)，是可變的

五、微信小程序

六、其他

001.一次完整的HTTP事務(wù)是怎么一個(gè)過(guò)程?

• 域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請(qǐng)求 --> 服務(wù)器響應(yīng)http請(qǐng)求，瀏覽器得到html代碼 --> 瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶

002.HTTPS是如何實(shí)現(xiàn)加密?

003.瀏覽器是如何渲染頁(yè)面的?

004.響應(yīng)式布局原理?

• 響應(yīng)式布局指的是同一頁(yè)面在不同屏幕尺寸下有不同的布局。傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機(jī)端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就夠，缺點(diǎn)就是CSS比較重。

響應(yīng)式設(shè)計(jì)與自適應(yīng)設(shè)計(jì)的區(qū)別：

• 響應(yīng)式開發(fā)一套界面，通過(guò)檢測(cè)視口分辨率，針對(duì)不同客戶端在客戶端做代碼處理，來(lái)展現(xiàn)不同的布局和內(nèi)容；自適應(yīng)需要開發(fā)多套界面，通過(guò)檢測(cè)視口分辨率，來(lái)判斷當(dāng)前訪問(wèn)的設(shè)備是pc端、平板、手機(jī)，從而請(qǐng)求服務(wù)層，返回不同的頁(yè)面。

005.http協(xié)議和tcp協(xié)議?

• TCP是傳輸層協(xié)議，定義數(shù)據(jù)傳輸和連接方式的規(guī)范。握手過(guò)程中傳送的包里不包含數(shù)據(jù)，三次握手完畢后，客戶端與服務(wù)器才正式開始傳送數(shù)據(jù).
• HTTP 超文本傳送協(xié)議(Hypertext Transfer Protocol )是應(yīng)用層協(xié)議，定義的是傳輸數(shù)據(jù)的內(nèi)容的規(guī)范。
• HTTP協(xié)議中的數(shù)據(jù)是利用TCP協(xié)議傳輸?shù)?#xff0c;特點(diǎn)是客戶端發(fā)送的每次請(qǐng)求都需要服務(wù)器回送響應(yīng)，它是TCP協(xié)議族中的一種，默認(rèn)使用 TCP 80端口。
• 好比網(wǎng)絡(luò)是路，TCP是跑在路上的車，HTTP是車上的人。每個(gè)網(wǎng)站內(nèi)容不一樣，就像車上的每個(gè)人有不同的故事一樣。

006.如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?

007.你對(duì)web標(biāo)準(zhǔn)和W3C重要性的理解?

• web標(biāo)準(zhǔn)簡(jiǎn)單來(lái)說(shuō)可以分為結(jié)構(gòu)、表現(xiàn)和行為。其中結(jié)構(gòu)主要是有HTML標(biāo)簽組成?；蛟S通俗點(diǎn)說(shuō)，在頁(yè)面body里面我們寫入的標(biāo)簽都是為了頁(yè)面的結(jié)構(gòu)。表現(xiàn)即指css樣式表，通過(guò)css可以是頁(yè)面的結(jié)構(gòu)標(biāo)簽更具美感。行為是指頁(yè)面和用戶具有一定的交互，同時(shí)頁(yè)面結(jié)構(gòu)或者表現(xiàn)發(fā)生變化，主要是有js組成。

• web標(biāo)準(zhǔn)一般是將該三部分獨(dú)立分開，使其更具有模塊化。但一般產(chǎn)生行為時(shí)，就會(huì)有結(jié)構(gòu)或者表現(xiàn)的變化，也使這三者的界限并不那么清晰。

• W3C對(duì)web標(biāo)準(zhǔn)提出了規(guī)范化的要求，也就是在實(shí)際編程中的一些代碼規(guī)范：
  1.對(duì)于結(jié)構(gòu)要求：（標(biāo)簽規(guī)范可以提高搜索引擎對(duì)頁(yè)面的抓取效率，對(duì)SEO很有幫助）

  • 標(biāo)簽字母要小寫
  • 標(biāo)簽要閉合
  • 標(biāo)簽不允許隨意嵌套

  2.對(duì)于css和js來(lái)說(shuō)

• 盡量使用外鏈css樣式表和js腳本。是結(jié)構(gòu)、表現(xiàn)和行為分為三塊，符合規(guī)范。同時(shí)提高頁(yè)面渲染速度，提高用戶的體驗(yàn)。
• 樣式盡量少用行間樣式表，使結(jié)構(gòu)與表現(xiàn)分離，標(biāo)簽的id和class等屬性命名要做到見(jiàn)文知義，標(biāo)簽越少，加載越快，用戶體驗(yàn)提高，代碼維護(hù)簡(jiǎn)單，便于改版
  不需要變動(dòng)頁(yè)面內(nèi)容，便可提供打印版本而不需要復(fù)制內(nèi)容，提高網(wǎng)站易用性。

008.http的幾種請(qǐng)求方法和區(qū)別?

HTTP協(xié)議是一個(gè)廣泛應(yīng)用的Internet協(xié)議。在其中有8個(gè)不同的請(qǐng)求方法：
GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
GET：向特定的資源發(fā)出請(qǐng)求。
POST：向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求（例如提交表單或者上傳文件）。數(shù)據(jù)被包含在請(qǐng)求體中。POST請(qǐng)求可能會(huì)導(dǎo)致新的資源的創(chuàng)建和/或已有資源的修改。

009.瀏覽器緩存機(jī)制？

緩存策略的分類：

對(duì)于強(qiáng)緩存，瀏覽器在第一次請(qǐng)求的時(shí)候，會(huì)直接下載資源，然后緩存在本地，第二次請(qǐng)求的時(shí)候，直接使用緩存。
對(duì)于協(xié)商緩存，第一次請(qǐng)求緩存且保存緩存標(biāo)識(shí)與時(shí)間，重復(fù)請(qǐng)求向服務(wù)器發(fā)送緩存標(biāo)識(shí)和最后緩存時(shí)間，服務(wù)端進(jìn)行校驗(yàn)，如果失效則使用緩存

010.http 狀態(tài)碼？

011.說(shuō)說(shuō)從輸入U(xiǎn)RL到看到頁(yè)面發(fā)生的全過(guò)程?

012.http 與 https 的區(qū)別?

013.什么是內(nèi)存 ？

014.兼容問(wèn)題？

• png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8
• 瀏覽器默認(rèn)的margin和paddin不同。解決方案是body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{margin:00;padding:000;}
• IE下,event對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性
• Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性.

015.說(shuō)說(shuō)移動(dòng)端是如何調(diào)試的?

016.項(xiàng)目測(cè)試沒(méi)問(wèn)題。但是放到線上就有問(wèn)題了，你是怎么分析解決的？

017.對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？

018.說(shuō)一下瀏覽器的緩存機(jī)制？

• 瀏覽器緩存機(jī)制有兩種，一種為強(qiáng)緩存，一種為協(xié)商緩存
  • 對(duì)于強(qiáng)緩存，瀏覽器在第一次請(qǐng)求的時(shí)候，會(huì)直接下載資源，然后緩存在本地，第二次請(qǐng)求的時(shí)候，直接使用緩存。
  • 對(duì)于協(xié)商緩存，第一次請(qǐng)求緩存且保存緩存標(biāo)識(shí)與時(shí)間，重復(fù)請(qǐng)求向服務(wù)器發(fā)送緩存標(biāo)識(shí)和最后緩存時(shí)間，服務(wù)端進(jìn)行校驗(yàn)，如果失效則使用緩存

019.Tcp連接: TCP 三次握手/Tcp 四次揮手

020.怎么用css 實(shí)現(xiàn)一個(gè)三角形？

021.介紹一下 webpack

• webpack是一個(gè)前端模塊化打包工具，主要由入口，出口，loader，plugins四個(gè)部分。前端的打包工具還有一個(gè)gulp，不過(guò)gulp側(cè)重于前端開發(fā)的過(guò)程，而webpack側(cè)重于模塊，例如他會(huì)將css文件看作一個(gè)模塊，通過(guò)css-loader將css打包成符合css的靜態(tài)資源。

022.HTTP2.0

總結(jié)

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

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