1.函數(shù)式編程和面向?qū)ο笞畲?的區(qū)別在于?
面向?qū)ο笾饕菙?shù)據(jù)和算法耦合在對象中,造成對象過大
函數(shù)式編程最基礎(chǔ)的在于λ演算,λ演算的函數(shù)可以接受函數(shù)當做輸入或者輸出
2.antd和forg的區(qū)別?
如 modal組件 若antd中的modal不想寫在jsx中,antd是無法實現(xiàn)的,單forg基于antd又封裝了一層方法,如modal.show等方法,使得運用更加簡單
3.js實現(xiàn)圓形區(qū)域可點擊
a.設(shè)置border-radious屬性
b.獲取鼠標點擊位,判斷其到原點的距離是否不大于圓的半徑,來判斷點擊位置是否在圓內(nèi)
4.拖拽
a.通過三個事件完成 onmousedown onmouseup onmousemove
b.鼠標按下時,需記錄鼠標按下時相對于操作元素內(nèi)部的偏移量 offsetX/Y || layerX/Y
c.鼠標移動時,需設(shè)置鼠標移動的left值和top值
? ? left:pageX - offsetX
????top:pageY - offsetY
d.鼠標抬起時,取消拖拽,取消鼠標移動
5.響應(yīng)式技術(shù)有哪些?
a.媒體查詢
b.移動端的meta標簽
6.typeof返回值
number? boolean? string? object? undefined? fuction
7. diff算法
a. 把樹形結(jié)構(gòu)按照層級分解,只比較同級元素
b. 給列表結(jié)構(gòu)的每個單元添加唯一的key屬性,方便比較
c. 合并操作,調(diào)用component 和setState 方法時, react 將其標記為 dirty ,到每一個事件循環(huán)結(jié)束, react檢查所有標記dirty的component重新繪制
d. 選擇性子樹渲染。 開發(fā)者可以重寫shouldComponentUpdate來提高diff性能
react生命周期render中:
render函數(shù)第一次執(zhí)行完畢就會將虛擬DOM在緩存中存儲起來,當this.state/this.props發(fā)生改變時,會將緩存中的虛擬Dom和需要更新的Dom做對比,這種對比叫做diff算法
8. PureComponent(純組件)
純組件是通過控制shouldComponentUpdate生命周期函數(shù),減少render調(diào)用次數(shù)來減少性能損耗的。這相對于Component來說,減少了手動判斷state變化的繁瑣操作,但該組件也具有一定的缺陷,因為它只能進行一層淺比較,簡單來說,它只比較props和state的內(nèi)存地址,如果內(nèi)存地址相同,則shouldComponentUpdate生命周期就返回false。PureComponent的使用場景應(yīng)該是局部數(shù)據(jù)發(fā)生改變的場景,比如帶有輸入框、switch開關(guān)等的UI組件就可以使用PureComponent組件封裝。PureComponent中如果有數(shù)據(jù)操作最好配合一個第三方組件——Immutable一起使用,Immutable需要使用npm安裝該插件才可以使用,因為Immutable可以保證數(shù)據(jù)的不變性。
9. React? ? super(props) ,super() ,不寫super()的區(qū)別
constructor()和super()的基本含義
constructor() —— 構(gòu)造方法
這是ES6對類的默認方法,通過new命令生成對象實例自動調(diào)用的方法。并且,該方法是類中必須要有的,如果沒有顯示定義,則會默認添加空的constructor()方法。
super() —— 繼承
在class方法中,繼承是使用extends關(guān)鍵字來實現(xiàn)繼承的。子類必須在constructor()中調(diào)用super()方法,否則新建實例時會報錯。
報錯的原因是,子類是沒有自己的this對象的,它只能繼承父類的this對象,然后對其進行加工,而super()就是將父類中的this對象繼承給子類的。沒有super,子類就得不到this對象。
如果你用到了constructor就必須寫super(),是用來初始化this的,可以綁定事件到this上
如果你在constructor中要使用this.props,就必須給super加參數(shù),super(props)
注意:無論有沒有constructor,在render中this.props都是可以使用的,這是react自動附帶的
如果沒用到constructor,是可以不寫的,react會默認添加一個空的constructor
9. 判斷變量的數(shù)據(jù)類型
a. Object.prototype.toString.call()
可以通過toString() 來獲取每個對象的類型。為了每個對象都能通過 Object.prototype.toString() 來檢測,需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調(diào)用,傳遞要檢查的對象作為第一個參數(shù),稱為thisArg。
封裝一個獲取變量準確類型的函數(shù)
function gettype(obj) {
? var type = typeof obj;
? if (type !== 'object') {
? ? return type;
? }
? //如果不是object類型的數(shù)據(jù),直接用typeof就能判斷出來
? //如果是object類型數(shù)據(jù),準確判斷類型必須使用Object.prototype.toString.call(obj)的方式才能判斷
? return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
}
b. constructor
constructor是prototype對象上的屬性,指向構(gòu)造函數(shù)。根據(jù)實例對象尋找屬性的順序,若實例對象上沒有實例屬性或方法時,就去原型鏈上尋找,因此,實例對象也是能使用constructor屬性的。
如果輸出一個類型的實例的constructor,就如下所示:
console.log(newNumber(123).constructor)//? Number() { [native code] }
可以看到它指向了Number的構(gòu)造函數(shù),因此,可以使用num.constructor==Number來判斷一個變量是不是Number類型的。
c. instanceof
除了使用typeof來判斷,還可以使用instanceof。instanceof運算符需要指定一個構(gòu)造函數(shù),或者說指定一個特定的類型,它用來判斷這個構(gòu)造函數(shù)的原型是否在給定對象的原型鏈上。
d.typeof
Array,Object,null,Date,RegExp,Error這幾個類型都被typeof判斷為object,所以如果想要判斷這幾種類型,就不能使用typeof了。
Number,String,Boolean,F(xiàn)unction,undefined,如果想判斷這幾種類型,那就可以使用typeof。
10. reduce(數(shù)組方法)
reduce() 方法接收一個函數(shù)作為累加器,數(shù)組中的每個值(從左到右)開始縮減,最終計算為一個值。
reduce() 可以作為一個高階函數(shù),用于函數(shù)的 compose。
注意:?reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。
語法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
參數(shù)描述
function(total,currentValue, index,arr)必需。用于執(zhí)行每個數(shù)組元素的函數(shù)。
函數(shù)參數(shù)描述:
total必需。初始值, 或者計算結(jié)束后的返回值。
currentValue必需。當前元素
currentIndex可選。當前元素的索引
arr可選。當前元素所屬的數(shù)組對象。
initialValue可選。傳遞給函數(shù)的初始值
返回值
返回計算結(jié)果