[TOC] ## 前言 總結面試中的一些常規的面試題 ，js方向的，包括基礎知識、設計模式、代碼技巧等。 ## 面試題匯總 ### 定義方法實現1+++n - 遞歸 ~~~ function sum(n){ if(n>1){ return sum(n-1)+1 }else{ return n } } ~~~ - 數學公式 ~~~ function sum(n){ return (1+n)*n/2 } ~~~ - for循環(略) ### 得到url參數中的鍵值對，'dsewf?a=1&b=2' 備注 ：前提 參數中其他位置無？ - qs模塊 ~~~ let str = urlStr.split('?')[1] qs.parse(str) ~~~ - split分組 ~~~ let str = urlStr.split('?')[1] let query = str.split("=") ~~~ - replace去除 `let str = urlStr.replace(/^\w+\?/,'')` ### 方法定義時this指向與運行環境有關 解釋 ：要注意的是函數中的this與運行環境強相關，與定義環境不相關。所以下面的代碼段中，當直接通過對象屬性方法中去調用時，其都可以訪問到對象的屬性，但是當其變為一個函數單獨調用時，就訪問不到對象的屬性了，而是從全局環境中找，所以變成未定義。 ~~~ let temp = { baz :function(){ return this.bar }, bar :1 } console.log(temp.baz());//1 var baz = temp.baz ; console.log(baz());//undefined (function(fn){ console.log(fn())//undefined })(temp.baz) ~~~ [參考地址：0621對象方法的this指向](https://codepen.io/robinson90/pen/qKozYj) ### 函數參數為對象時，傳入的為引用 解析：因為對象不是基本類型，所以當其作為參數傳入時，使用的是引用地址，所以當其進行值變更的時候，原始內存值也會變化。再之后通過等號或者賦值引用相同地址時，都會發生關聯性的改變哦。 ~~~ var a ={ b :1 } function demo(obj){ obj.b = 3 return obj } console.log(a.b)//1 var aa = demo(a) console.log(a.b)//3 console.log(aa.b)//3 aa.b = 4 console.log(a.b)//4 console.log(aa.b)//4 ~~~ [參考地址：0621對象方法的this指向](https://codepen.io/robinson90/pen/qKozYj) ### 對象的屬性不是全部可枚舉的 對象中的某些屬性時通過for in無法遍歷得到的，由enumerable屬性判斷，如果定義屬性為不可枚舉的那么就無法得到，propertyIsEnumerable可以判斷屬性是否是可枚舉屬性。如果你希望得到不可枚舉屬性，需要Object.getOwnPropertyNames(obj)或者Reflect.ownKeys(obj)。詳細的參考下面的六種對象屬性的查詢方法。 1.for ... in 循環遍歷對象自身的和繼承的可枚舉屬性(不含Symbol屬性). 2.Obejct.keys(obj),返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性). 3.Object.getOwnPropertyNames(obj),返回一個數組,包含對象自身的所有屬性(不含Symbol屬性,但是包括不可枚舉屬性). 4.Object.getOwnPropertySymbols(obj),返回一個數組,包含對象自身的所有Symbol屬性. 5.Reflect.ownKeys(obj),返回一個數組,包含對象自身的所有屬性,不管屬性名是Symbol或字符串,也不管是否可枚舉. 6.Reflect.enumerate(obj),返回一個Iterator對象,遍歷對象自身的和繼承的所有可枚舉屬性(不含Symbol屬性),與for ... in 循環相同. [參考地址：0621練習](https://codepen.io/robinson90/pen/qKozYj) ### 原型鏈對對象實例化的影響 我們都知道子類可以得到父類的屬性以及屬性方法，那么實例化的過程與實際運行時是否會依賴這個呢 ？請看下面的代碼執行結果.我們假設具有人類的父原型，再假設男人的子原型。 ~~~ let person = function(){ this.name = 'person' } let man = function(){ this.call = function(){ console.log(this.name) } } let xiaoli = new man(); xiaoli.call()//undefined man.prototype = new person(); xiaoli.call()//undefined let xiaoming = new man(); xiaoming.call()//'man' ~~~ 總結：從上述的結果中可以分析得出對象在實例化的時候建立好了其對應的屬性以及原型的引用關系，所以雖然man類原型有改變原型指向，但是并沒有影響其輸出。而xiaoming的實例在創建時原型的關系已經確定好，所以能輸出得到其父屬性。 ### js array:map方法是否需要返回 一般情況下，我們處理數組中map方法時知道其入參有三個，分別是元素，index,數組本身，而當我們使用箭頭函數直接處理元素時，并且只有一句時，那么會默認的將元素處理完然后自己會默認的返回這個元素，但是當用{}包圍之后，需要顯性的聲明返回值才可以返回對應的變化元素. ~~~ let arr = [1,6,67,90,'34'] let newArr = arr.map((ele,index,arr)=> parseInt(ele) ) console.log(newArr)//正確數組返回 let newArr2 = arr.map((ele,index,arr)=>{ parseInt(ele) } ) console.log(newArr2)//返回undefined數組，此時需要語句中追加return parseInt(ele) ~~~ ### parseInt(str,numberArg) 一般情況下，我們都將數字或者含有字符串的數字用這個方法進行轉換，而且默認是按照十進制轉換，在不含數字的字符串或者轉化失敗時會返回NaN.那么如果針對一些數據我們第二個參數如果傳入 0 1 2 3 8 10 16會返回什么呢？ ~~~ let arr = [1,6,67,90,'34','sdc'] let newArr2 = arr.map((ele,index,arr)=> parseInt(ele,0) ) console.log(newArr2)//正確 傳入 0 [1, 6, 67, 90, 34, NaN] 傳入1 [1, NaN, NaN, NaN, NaN, NaN] 傳入2 [1, NaN, NaN, NaN, NaN, NaN] 傳入9 [1, 6, 61, NaN, 31, NaN] ~~~ 總結：從上述的分析可以得出其首先會過濾出數字的部分，然后針對數字的部分進行進制的轉換，如果返回其進制那么進行返回，如果不是其用對應的進制可以轉換的，就會返回NaN ### 代碼實現promise 如果你要應付面試，如果不想或者不保證代碼寫出來，那么可以分別對關鍵部分進行偽代碼的了解與說明。 - 說明其狀態status的字段 ，以及其對應的返回值，錯誤原因，定義到構造器中 - 核心函數，resolve以及reject實現，進入每個函數時修改其狀態，進行結果或者原因的賦值 - 執行resolve,以及reject函數 - 支持then鏈式操作 - 支持異步的關鍵，定義傳入的回調函數，并修改then函數 ~~~ class Promise{ constructor(executor){ //控制狀態，使用了一次之后，接下來的都不被使用 this.status = 'pendding' this.value = undefined this.reason = undefined //定義resolve函數 let resolve = (data)=>{ //這里pendding，主要是為了防止executor中調用了兩次resovle或reject方法，而我們只調用一次 if(this.status==='pendding'){ this.status = 'resolve' this.value = data } } //定義reject函數 let reject = (data)=>{ if(this.status==='pendding'){ this.status = 'reject' this.reason = data } } //executor方法可能會拋出異常，需要捕獲 try{ //將resolve和reject函數給使用者 executor(resolve,reject) }catch(e){ //如果在函數中拋出異常則將它注入reject中 reject(e) } } } //then 函數主要是傳入其resove或者reject的結果 then(onFufilled,onRejected){ if(this.status === 'resolve'){ onFufilled(this.value) } if(this.status === 'reject'){ onRejected(this.reason) } } //異步函數 callback //存放成功回調的函數 this.onResolvedCallbacks = [] //存放失敗回調的函數 this.onRejectedCallbacks = [] let resolve = (data)=>{ if(this.status==='pendding'){ this.status = 'resolve' this.value = data //監聽回調函數 this.onResolvedCallbacks.forEach(fn=>fn()) } } let reject = (data)=>{ if(this.status==='pendding'){ this.status = 'reject' this.reason = data this.onRejectedCallbacks.forEach(fn=>fn()) } } ~~~ ~~~ //resolvePromise 重點源碼的參考 function resolvePromise(promise2,x,resolve,reject){ //判斷x和promise2之間的關系 //因為promise2是上一個promise.then后的返回結果，所以如果相同，會導致下面的.then會是同一個promise2，一直都是，沒有盡頭 if(x === promise2){//相當于promise.then之后return了自己，因為then會等待return后的promise，導致自己等待自己，一直處于等待 return reject(new TypeError('循環引用')) } //如果x不是null，是對象或者方法 if(x !== null && (typeof x === 'object' || typeof x === 'function')){ //為了判斷resolve過的就不用再reject了，（比如有reject和resolve的時候） let called try{//防止then出現異常，Object.defineProperty let then = x.then//取x的then方法可能會取到{then:{}},并沒有執行 if(typeof then === 'function'){ //我們就認為他是promise,call他,因為then方法中的this來自自己的promise對象 then.call(x,y=>{//第一個參數是將x這個promise方法作為this指向，后兩個參數分別為成功失敗回調 if(called) return; called = true //因為可能promise中還有promise，所以需要遞歸 resolvePromise(promise2,y,resolve,reject) },err=>{ if(called) return; called = true //一次錯誤就直接返回 reject(err) }) }else{ //如果是個普通對象就直接返回resolve作為結果 resolve(x) } }catch(e){ if(called) return; called = true reject(e) } }else{ //這里返回的是非函數，非對象的值,就直接放在promise2的resolve中作為結果 resolve(x) } } ~~~ [掘金promise函數分析：推薦](https://juejin.im/post/5b32f552f265da59991155f0) [廖雪峰promise了解與使用](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000) [promise原理的了解](http://bruce-xu.github.io/blogs/js/promise) ### 函數防抖和節流的區別分析 函數防抖與節流的區別，首先防抖最明顯的場景使用是避免重復點擊，尤其像登錄注冊時；而節流最明顯的場景是屏幕高頻的滾動。 那么在代碼具體實現上其差別會是什么呢？這里我們用偽代碼解釋下，首先兩個都是用計時函數實現的，區別在于： 防抖函數會清除掉之前的計時器如果之前有，所以其觸發頻率會更低；而節流函數是判斷其控制的相應時間，如果還在其時間內，那么會繼續執行原來的計時器，不會銷毀原來的。 然后我們在高頻操作的滾動函數觸發中分別進行了防抖以及節流的函數綁定，時間間隔均為300ms，最終發現防抖函數只執行了一次，而節流函數進行了若干次。 ### js實現瀑布流布局 這里同樣偽代碼跟大家說明：我們常見的一般是橫向流布局以及豎向流布局。 比如我們常見的百度圖片就是橫向瀑布流布局。 其主要的偽代碼邏輯： 1 制定出比較合適的行高度，以及每行適合存放的圖片數量 2 根據1得到的高度，計算出每個圖片所得到的渲染寬度，渲染高度。其中最后一張圖片，需要渲染為剩下的寬度+固定的高度（可能會有一定的變形）。 3 當剩余圖片的數量不符合規格的時候，需要靈活的讓其符合多種規格的布局 4 當只有一個圖片時，可以自由發揮，需要限制一些邊界情況即可。 特殊說明：對于瀑布流中的圖片固定的放4列然后其瀑布流布局的，只要保證四列的布局，然后圖片計算出圖片對應的渲染高度，然后放入對應的列即可，比橫向的瀑布流布局更簡單。 - [簡書圖片橫向流布局](https://www.jianshu.com/p/e6b37b7fff85)