面試是每一個前端人在求職過程中都需要面對的事情。在面試過程中,面試官沒有辦法通過實踐操作去了解應聘者的技能水準,是以他們更多地會通過“八股文”的考察來判斷你是否符合公司的招聘要求。是以作為一個前端人,在掌握好前端技能的同時,也需要掌握好一些基礎理論知識,這樣才能在面試中脫穎而出,拿到自己心儀的offer。
那麼,下面小職就整理了一些在前端面試過程中比較常見的JS面試題,有需要的朋友可以點贊收藏哦~
一、JS資料類型
JS資料類型通常分為基本資料類型和引用資料類型兩種。
基本資料類型:Number、String、Boolean、Null、Undefined、Symbol、bigInt七種,
引用資料類型:object、Array、Date、Function、RegExp。
二、JS變量和函數聲明的提升
1、在JS中變量和函數的聲明會提升到最頂部執行。
2、函數的提升高于變量的提升,
3、函數内部如果用 var 聲明了相同名稱的外部變量,函數将不再向上尋找。
4、匿名函數不會提升。
三、== 和 ===的差別
== 和 ===都是判斷等式兩邊是否相等,但是==是非嚴格意義上的相等,值相等就相等,而===是嚴格意義上的相等,會比較兩邊的資料類型和值大小,值和引用位址都相等才相等
四、閉包
閉包就是能夠讀取其他函數内部變量的函數,閉包基本上就是一個函數内部傳回一個函數。
優點:
1、可以讀取函數内部的變量;
2、将變量始終保持在記憶體中;
3、可以封裝對象的私有屬性和私有方法;
缺點:比較耗費記憶體、使用不當會造成記憶體溢出的問題。
五、this
this是 JavaScript 語言的一個關鍵字。在絕大多數情況下,函數的調用方式決定了 this 的值(運作時綁定)。this總是指向函數的直接調用者。如果有new關鍵字,this指向new出來的對象。在事件中,this指向觸發這個事件的對象。
六、map與forEach的差別
forEach 方法是最基本的方法,就是周遊與循環,預設有 3 個傳參。這三個傳參分别是周遊的數組内容 item、數組索引 index、和目前周遊數組 Array
map 方法基本用法與 forEach 一緻,但是它會傳回一個新的數組,是以 callback需要有 return 值,如果沒有,會傳回 undefined。
七、箭頭函數與普通函數
函數體内的 this 對象就是定義時所在的對象,而不是使用時所在的對象。不可以當作構造函數,也不可以使用 arguments 對象,該對象在函數體内不存在。如果一定要用,可以用 Rest 參數代替。不可以使用 yield 指令,是以箭頭函數不能用作 Generator 函數。
八、同源政策
同源政策是一種約定,它是浏覽器最核心也最基本的安全功能,如果缺少了同源政策,則浏覽器的正常功能可能都會受到影響。 可以說Web是建構在同源政策基礎之上的,浏覽器隻是針對同源政策的一種實作。 它是一個安全政策。所謂同源是指,域名、協定、端口相同。
九、嚴格模式的限制
嚴格模式主要有以下限制:
1、變量必須聲明後再使用
2、函數的參數不能有同名屬性,否則報錯
3、不能使用with語句
4、不能對隻讀屬性指派,否則報錯
5、不能使用字首0表示八進制數,否則報錯
6、不能删除不可删除的屬性,否則報錯
7、不能删除變量delete prop,會報錯,隻能删除屬性delete global[prop]
8、eval不會在它的外層作用域引入變量
9、eval和arguments不能被重新指派
10、arguments不會自動反映函數參數的變化
11、不能使用arguments.callee
12、不能使用arguments.caller
13、禁止this指向全局對象
14、不能使用fn.caller和fn.arguments擷取函數調用的堆棧
15、增加了保留字(比如protected、static和interface)
十、es6新增
1、新增模闆字元串
2、箭頭函數
3、for-of(用來周遊資料—例如數組中的值。)
4、ES6 将 Promise 對象納入規範,提供了原生的 Promise 對象。
5、增加了 let 和 const 指令,用來聲明變量。
6、引入 module 子產品的概念
十一、attribute 和 property 的差別
attribute 是 dom 元素在文檔中作為 html 标簽擁有的屬性,而property 就是 dom 元素在 JS 中作為對象擁有的屬性。對于 html 的标準屬性來說,attribute 和 property 是同步的,是會自動更新的,但是對于自定義的屬性來說,他們是不同步的。
十二、let和const 的差別
let和const很相似,但是let 指令不存在變量提升,如果在 let 前使用,會導緻報錯。如果塊區中存在 let 和 const 指令,就會形成封閉作用域。不允許重複聲明。const定義的是常量,不能修改,但是如果定義的是對象,可以修改對象内部的資料。
十三、記憶體洩漏
記憶體洩漏指的是程式中己動态配置設定的堆記憶體由于某種原因程式未釋放或無法釋放引發的各種問題。
記憶體洩漏結果:變慢,崩潰,延遲大等
記憶體洩漏原因:全局變量,dom 清空時,還存在引用,定時器未清除,子元素存在引起的記憶體洩露。
十四、數組(array)方法
map : 周遊數組,傳回回調傳回值組成的新數組
forEach : 無法 break ,可以用 try/catch 中 throw new Error 來停止
filter : 過濾
some : 有一項傳回 true ,則整體為 true
every : 有一項傳回 false ,則整體為 false
join : 通過指定連接配接符生成字元串
push / pop : 末尾推入和彈出,改變原數組, 傳回推入/彈出項
unshift / shift : 頭部推入和彈出,改變原數組,傳回操作項
sort(fn) / reverse : 排序與反轉,改變原數組
concat : 連接配接數組,不影響原數組, 淺拷貝
slice(start, end) : 傳回截斷後的新數組,不改變原數組
splice(start,number,value…): 傳回删除元素組成的數組,value 為插入項,改變原數組
indexOf / lastIndexOf(value, fromIndex) : 查找數組項,傳回對應的下标
reduce / reduceRight(fn(prev, cur) ,defaultPrev) : 兩兩執行,prev 為上次化簡函數的return 值,cur 為目前值(從第二項開始)
十五、JavaScript 深淺拷貝
淺拷貝:Object.assign
深拷貝:可以通過 JSON.parse(JSON.stringify(object)) 來解決
十六、異步程式設計的實作方式
1、回調函數
優點:簡單、容易了解
缺點:不利于維護、代碼耦合高
2、事件監聽
優點:容易了解,可以綁定多個事件,每個事件可以指定多個回調函數
缺點:事件驅動型,流程不夠清晰
3、釋出/訂閱(觀察者模式)
類似于事件監聽,但是可以通過‘消息中心’,了解現在有多少釋出者,多少訂閱者
4、Promise 對象
優點:可以利用 then 方法,進行鍊式寫法;可以書寫錯誤時的回調函數
缺點:編寫和了解,相對比較難
5、Generator 函數
優點:函數體内外的資料交換、錯誤處理機制
缺點:流程管理不友善
6、async 函數
優點:内置執行器、更好的語義、更廣的适用性、傳回的是 Promise、結構清晰
缺點:錯誤處理機制
十七、面向對象程式設計思想
基本思想是使用對象,類,繼承,封裝等基本概念來進行程式設計
優點:
1、易維護
2、易擴充
3、開發工作的重用性、繼承性高,降低重複工作量。
4、縮短了開發周期
十八、作用域鍊
作用域鍊可以了解為一組對象清單,包含 父級和自身的變量對象,是以我們便能通過作用域鍊通路到父級裡聲明的變量或者函數
十九、原型、原型鍊、繼承
原型:每一個構造函數都有一個 prototype 屬性,這個屬性會在生成執行個體的時候,成為執行個體對象的原型對象。javascript 的每個對象都繼承另一個對象,後者稱為“原型”(prototype)對象。
原型鍊:每一個對象都有一個 proto 屬性,對象的屬性和方法,有可能定義在自
身,也有可能定義在它的原型對象。由于原型本身也是對象,又有自己的原型,所
以形成了一條原型鍊(prototype chain)。
繼承:繼承就是在子類構造函數中繼承父類構造函數的私有屬性和原型屬性。我們
在子類構造函數中使用 call 或 apply 方法調用父類構造函數并改變其 this 指向為
子類構造函數的 this,此時子類的構造函數就繼承了父類的私有屬性和私有方法。
将父類的執行個體化對象指派給子類的原型對象,此時子類就繼承了父類的原型屬性和
原型方法。
二十、逐進增強和優雅降級
逐進增強:針對低版本浏覽器進行建構頁面,保證最基本的功能,然後再針對高版本浏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
優雅降級:一開始就建構完整的功能,然後再針對低版本浏覽器進行相容
前端開發雖然是一項實踐性較強的工作,但是理論知識也是非常重要的,想要在衆多求職者中脫穎而出,就要理論基礎與實操技能兩手抓。如果你連最基本的理論基礎都沒有掌握好,那面試官又怎麼會相信你的技能水準能又多高呢?是以,建議每個前端人在找工作之前都能熟記上面的知識點,能夠幫助你更輕松地拿到offer哦~