CSS
1 盒模型
頁(yè)面渲染時(shí)扬霜，dom 元素所采用的 布局模型腕扶∧嫒穑可通過(guò)box-sizing進(jìn)行設(shè)置。根據(jù)計(jì)算寬高的區(qū)域可分為：
content-box (W3C 標(biāo)準(zhǔn)盒模型)
border-box (IE 盒模型)
padding-box
margin-box (瀏覽器未實(shí)現(xiàn))
- 居中布局
水平居中
行內(nèi)元素: text-align: center
塊級(jí)元素: margin: 0 auto
absolute + transform
flex + justify-content: center
垂直居中
line-height: height
absolute + transform
flex + align-items: center
table
水平垂直居中
absolute + transform
flex + justify-content + align-items - 選擇器優(yōu)先級(jí)
!important > 行內(nèi)樣式 > #id > .class > tag > * > 繼承 > 默認(rèn)
選擇器 從右往左 解析
6.去除浮動(dòng)影響怀喉，防止父級(jí)高度塌陷
通過(guò)增加尾元素清除浮動(dòng)
:after /
: clear: both
創(chuàng)建父級(jí) BFC
父級(jí)設(shè)置高度
JavaScript
問(wèn)題一：原始類型有哪幾種书妻？null 是對(duì)象嘛？
在 JS 中躬拢，存在著 6 種原始值躲履，分別是：
boolean
null
undefined
number
string
symbol
問(wèn)題一：對(duì)象類型和基本類型的不同之處？
對(duì)象類型和原始類型不同的是聊闯，原始類型存儲(chǔ)的是值工猜，對(duì)象類型存儲(chǔ)的是地址（指針）
問(wèn)題一：下面的輸出結(jié)果？
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function
下面的計(jì)算結(jié)果
1 + '1' // '11'
true + true // 2
4 + [1,2,3] // "41,2,3"
4 * '3' // 12
4 * [] // 0
4 * [1, 2] // NaN
問(wèn)題一：== 和 === 有什么區(qū)別馅袁？
對(duì)于==來(lái)說(shuō)域慷，如果對(duì)比雙方的類型不一樣的話，就會(huì)進(jìn)行類型轉(zhuǎn)換
問(wèn)題一：什么是淺拷貝汗销？如何實(shí)現(xiàn)淺拷貝犹褒？什么是深拷貝？如何實(shí)現(xiàn)深拷貝弛针？
淺拷貝
首先可以通過(guò)Object.assign來(lái)解決這個(gè)問(wèn)題叠骑，很多人認(rèn)為這個(gè)函數(shù)是用來(lái)深拷貝的。其實(shí)并不是削茁，Object.assign只會(huì)拷貝所有的屬性值到新的對(duì)象中宙枷，如果屬性值是對(duì)象的話，拷貝的是地址
深拷貝
常用方法 JSON.parse(JSON.stringify(object))
局限性的：
會(huì)忽略u(píng)ndefined
會(huì)忽略symbol
不能序列化函數(shù)
不能解決循環(huán)引用的對(duì)象
Es6中箭頭函數(shù)與普通函數(shù)的區(qū)別茧跋？
1.普通function的聲明在變量提升中是最高的慰丛，箭頭函數(shù)沒(méi)有函數(shù)提升?2.箭頭函數(shù)沒(méi)有this，arguments?3.箭頭函數(shù)不能作為構(gòu)造函數(shù)瘾杭，不能被new诅病，沒(méi)有property,?4.call和apply方法只有參數(shù)，沒(méi)有作用域
什么是閉包？閉包有什么危害贤笆？如何解決閉包帶來(lái)的危害蝇棉？
簡(jiǎn)單來(lái)說(shuō)，閉包就是一個(gè)定義在函數(shù)內(nèi)部的函數(shù)芥永。因?yàn)閖s中存在作用域的問(wèn)題篡殷，所以在函數(shù)內(nèi)部定義的變量在函數(shù)外部是沒(méi)有辦法直接獲取到。而閉包就是溝通函數(shù)內(nèi)部和外部的橋梁埋涧，這樣在函數(shù)外部接可以得到函數(shù)內(nèi)部的值板辽。并且閉包可以實(shí)現(xiàn)函數(shù)屬性和方法的私有化。
閉包的危害：
因?yàn)殚]包會(huì)將內(nèi)部變量?jī)?chǔ)存在內(nèi)存中飞袋，如果長(zhǎng)時(shí)間不清除的話會(huì)造成內(nèi)存泄漏的問(wèn)題戳气，影響程序的性能链患。
解決方法：對(duì)于不使用的變量及時(shí)的清除巧鸭。
React-dva
app.model()用法
接受一個(gè)對(duì)象，把state麻捻、reducers纲仍、effects全部寫在這，便于維護(hù)贸毕。
React 中 keys 的作用是什么郑叠？
Keys 是 React 用于追蹤哪些列表中元素被修改、被添加或者被移除的輔助標(biāo)識(shí)明棍。
調(diào)用 setState 之后發(fā)生了什么乡革？
在代碼中調(diào)用 setState 函數(shù)之后，React 會(huì)將傳入的參數(shù)對(duì)象與組件當(dāng)前的狀態(tài)合并摊腋，然后觸發(fā)所謂的調(diào)和過(guò)程（Reconciliation）沸版。經(jīng)過(guò)調(diào)和過(guò)程，React 會(huì)以相對(duì)高效的方式根據(jù)新的狀態(tài)構(gòu)建 React 元素樹(shù)并且著手重新渲染整個(gè) UI 界面兴蒸。在 React 得到元素樹(shù)之后视粮，React 會(huì)自動(dòng)計(jì)算出新的樹(shù)與老樹(shù)的節(jié)點(diǎn)差異，然后根據(jù)差異對(duì)界面進(jìn)行最小化重渲染橙凳。在差異計(jì)算算法中蕾殴，React 能夠相對(duì)精確地知道哪些位置發(fā)生了改變以及應(yīng)該如何改變，這就保證了按需更新岛啸，而不是全部重新渲染钓觉。
react 生命周期函數(shù)
初始化階段：
getDefaultProps:獲取實(shí)例的默認(rèn)屬性
getInitialState:獲取每個(gè)實(shí)例的初始化狀態(tài)
componentWillMount：組件即將被裝載、渲染到頁(yè)面上
render:組件在這里生成虛擬的 DOM 節(jié)點(diǎn)
componentDidMount:組件真正在被裝載之后
運(yùn)行中狀態(tài)：
componentWillReceiveProps:組件將要接收到屬性的時(shí)候調(diào)用
shouldComponentUpdate:組件接受到新屬性或者新?tīng)顟B(tài)的時(shí)候（可以返回 false坚踩，接收數(shù)據(jù)后不更新荡灾，阻止 render 調(diào)用，后面的函數(shù)不會(huì)被繼續(xù)執(zhí)行了）
componentWillUpdate:組件即將更新不能修改屬性和狀態(tài)
render:組件重新描繪
componentDidUpdate:組件已經(jīng)更新
銷毀階段：
componentWillUnmount:組件即將銷毀
為什么虛擬 dom 會(huì)提高性能?(必考)
虛擬 dom 相當(dāng)于在 js 和真實(shí) dom 中間加了一個(gè)緩存，利用 dom diff 算法避免了沒(méi)有必要的 dom 操作卧晓，從而提高性能芬首。
用 JavaScript 對(duì)象結(jié)構(gòu)表示 DOM 樹(shù)的結(jié)構(gòu)；然后用這個(gè)樹(shù)構(gòu)建一個(gè)真正的 DOM 樹(shù)逼裆，插到文檔當(dāng)中當(dāng)狀態(tài)變更的時(shí)候郁稍，重新構(gòu)造一棵新的對(duì)象樹(shù)。然后用新的樹(shù)和舊的樹(shù)進(jìn)行比較胜宇，記錄兩棵樹(shù)差異把 2 所記錄的差異應(yīng)用到步驟 1 所構(gòu)建的真正的 DOM 樹(shù)上耀怜，視圖就更新了。
- 為什么瀏覽器無(wú)法讀取JSX桐愉？
瀏覽器只能處理 JavaScript 對(duì)象财破，而不能讀取常規(guī) JavaScript 對(duì)象中的 JSX。所以為了使瀏覽器能夠讀取 JSX从诲，首先左痢，需要用像 Babel 這樣的 JSX 轉(zhuǎn)換器將 JSX 文件轉(zhuǎn)換為 JavaScript 對(duì)象，然后再將其傳給瀏覽器系洛。 - 怎樣解釋 React 中 render() 的目的俊性。
每個(gè)React組件強(qiáng)制要求必須有一個(gè) render()。它返回一個(gè) React 元素描扯，是原生 DOM 組件的表示定页。如果需要渲染多個(gè) HTML 元素，則必須將它們組合在一個(gè)封閉標(biāo)記內(nèi)绽诚，例如 <form>典徊、<group>、<div> 等恩够。此函數(shù)必須保持純凈卒落，即必須每次調(diào)用時(shí)都返回相同的結(jié)果。
什么是 Props?
Props 是 React 中屬性的簡(jiǎn)寫玫鸟。它們是只讀組件导绷，必須保持純，即不可變屎飘。它們總是在整個(gè)應(yīng)用中從父組件傳遞到子組件妥曲。子組件永遠(yuǎn)不能將 prop 送回父組件。這有助于維護(hù)單向數(shù)據(jù)流钦购，通常用于呈現(xiàn)動(dòng)態(tài)生成的數(shù)據(jù)檐盟。
React 中 refs 的作用是什么？
Refs 是 React 提供給我們的安全訪問(wèn) DOM 元素或者某個(gè)組件實(shí)例的句柄押桃。我們可以為元素添加 ref 屬性然后在回調(diào)函數(shù)中接受該元素在 DOM 樹(shù)中的句柄葵萎，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回
應(yīng)該在 React 組件的何處發(fā)起 Ajax 請(qǐng)求
在 React 組件中，應(yīng)該在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求。這個(gè)方法會(huì)在組件第一次“掛載”(被添加到 DOM)時(shí)執(zhí)行羡忘，在組件的生命周期中僅會(huì)執(zhí)行一次谎痢。更重要的是，你不能保證在組件掛載之前 Ajax 請(qǐng)求已經(jīng)完成卷雕，如果是這樣节猿，也就意味著你將嘗試在一個(gè)未掛載的組件上調(diào)用 setState，這將不起作用漫雕。在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求將保證這有一個(gè)組件可以更新了滨嘱。
介紹redux
redux 是一個(gè)應(yīng)用數(shù)據(jù)流框架，主要是解決了組件間狀態(tài)共享的問(wèn)題浸间，原理是集中式管理太雨，主要有三個(gè)核心方法，action魁蒜，store囊扳，reducer，工作流程是 view 調(diào)用 store 的 dispatch 接收 action 傳入 store梅惯，reducer 進(jìn)行 state 操作宪拥，view 通過(guò) store 提供的 getState 獲取最新的數(shù)據(jù)仿野，flux 也是用來(lái)進(jìn)行數(shù)據(jù)操作的铣减，有四個(gè)組成部分 action，dispatch脚作，view葫哗，store，工作流程是 view 發(fā)出一個(gè) action球涛，派發(fā)器接收 action劣针，讓 store 進(jìn)行數(shù)據(jù)更新，更新完成以后 store 發(fā)出 change亿扁，view 接受 change 更新視圖捺典。Redux 和 Flux 很像。主要區(qū)別在于 Flux 有多個(gè)可以改變應(yīng)用狀態(tài)的 store从祝，在 Flux 中 dispatcher 被用來(lái)傳遞數(shù)據(jù)到注冊(cè)的回調(diào)事件襟己，但是在 redux 中只能定義一個(gè)可更新?tīng)顟B(tài)的 store，redux 把 store 和 Dispatcher 合并,結(jié)構(gòu)更加簡(jiǎn)單清晰
新增 state,對(duì)狀態(tài)的管理更加明確牍陌，通過(guò) redux擎浴，流程更加規(guī)范了，減少手動(dòng)編碼量毒涧，提高了編碼效率贮预，同時(shí)缺點(diǎn)時(shí)當(dāng)數(shù)據(jù)更新時(shí)有時(shí)候組件不需要，但是也要重新繪制，有些影響效率仿吞。一般情況下滑频，我們?cè)跇?gòu)建多交互，多數(shù)據(jù)流的復(fù)雜項(xiàng)目應(yīng)用時(shí)才會(huì)使用它們
redux 有什么缺點(diǎn)
一個(gè)組件所需要的數(shù)據(jù)唤冈，必須由父組件傳過(guò)來(lái)误趴，而不能像 flux 中直接從 store 取。
當(dāng)一個(gè)組件相關(guān)數(shù)據(jù)更新時(shí)务傲，即使父組件不需要用到這個(gè)組件凉当，父組件還是會(huì)重新 render，可能會(huì)有效率影響售葡，或者需要寫復(fù)雜的 shouldComponentUpdate 進(jìn)行判斷看杭。
- 解釋 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)谴供。
代碼題
數(shù)組去重
// 方法一
var norepeat = funtion(arr){
return arr.filter(function(val, index, array){
return array.indexOf(val) === index;
});
}
norepeat()
// 方法二
var set = new Set(arr);
JavaScript中如何對(duì)一個(gè)對(duì)象進(jìn)行深度clone
方法一：
function deepClone(obj){
var str = JSON.sringify(obj);
var newobj = JSON.parse(str);
return newobj;
}
方法二：
//深克隆
function deepClone(obj){
if (!obj) { return obj; }
var o = obj instanceof Array ? [] : {};
for(var k in obj){
if(obj.hasOwnProperty(k)){
o[k] = typeof obj[k] === "object" ? deepClone(obj[k]) : obj[k];
}
}
return o;
}
