那些JS中常見的面試題及知識點

2020-11-13 06:00:13

1.什麼是閉包

​ 當一個函數的返回值是另一個函數,返回的那個函數如果呼叫了父函數的內部變數,且在外部被執行就產生了閉包

特性

​ 1.函數套函數,

​ 2.內部函數存取外部函數變數,引數

​ 3.變數和引數不會被垃圾回收機制回收

優點

​ 1.變數長期住在在記憶體中

​ 2.不會造成全域性汙染

​ 3.私有成員的存在

缺點

​ 常駐記憶體增大記憶體的使用量,使用不當會造成記憶體的洩露

2.原型和原型鏈

​ 原型概念:

​ 原型概念:jsvascript都包含了一個proto內部屬性,這個屬性對應的是自身。

​ 除了原型proto之外,還有prototype屬性,當函數物件作為建構函式建立範例時,prototype屬性值將被作為 範例物件的原型proto

​ 原型鏈的概念:原型鏈當一個物件呼叫自身不存在的物件或者方法就會去自己proto關聯的前輩prototype物件上去找,如果沒有找到,就會去prototype原型proto關聯的前輩prototype,依次類推直到undefined,這就是原型鏈。

​ 例如:B繼承A的原型上的方法,C繼承B原型上的方法,這時C._proto_指向B的原型,B._proto指向A的原型這就行程了原型鏈

​ 隱式原型:用來構成原型鏈,實現基於原型的繼承

​ 顯示原型:用來實現原型的繼承與屬性共用

3.組合繼承

// 父

​ function Person(name, age) {

​ this.name = name

​ this.age = age

//方法一

// this.say=function(){

// console.log(this.name)

// }

​ }

//方法二

Person.prototype.say = function () { console.log(this.name) }

// 子

​ function stu(name, age) {

Person.call(this, name, age)

​ }

//繼承他的方法

stu.prototype.say = Person.prototype.say

​ var s = new stu(「張三」, 33)

​ console.log(s)

4.說一下JS原生事件如何繫結

​ 一、是html事件處理程式

​ html事件現在早已不用了,就是在html各種標籤上直接新增事件,類似於css的行內樣式,缺點是不好維護

​ 例如:<button οnclick="時間處理常式」>點我

​ 二、是DOM0級事件處理程式

​ 目前在PC端用的還是比較多的繫結事件方式,相容性也好,主要是先獲取dom元素,然後直接給dom元 素新增事件

		 DOM0事件如何移除呢?很簡單:btn.onclick=null;置為空就行

		優點:相容性好

		缺點:只支援冒泡,不支援捕獲

​ 三、是DOM2級事件處理程式

​ 行動端用的比較多,也有很多優點,提供了專門的繫結和移除方法

​ 優點:支援給個元素繫結多個相同事件,支援冒泡和捕獲事件機制

5.說一下JS原生常用dom操作方法?

​ 查詢:

​ getElementByid,

​ getElementsByTagName

​ querySelector

​ querySelectorAll

​ 插入:

​ appendChild

​ insertBefore

​ 刪除:

​ removeChild

​ 克隆:

​ cloneNode

​ 設定和獲取屬性:

​ setAttribute(「屬性名」,」值」)

​ getAttibute(「屬性名」)

6.ES6新增特性

​ 1.新增了塊級作用域(let,const)

​ 2.提供了定義類的語法糖(class)

​ 3.新增了一種基本資料型別(Symbol)

​ 4.新增了變數的解構賦值

​ 5.函數引數允許設定預設值,引入了rest引數,新增了箭頭函數

​ 6.陣列新增了一些API,如 isArray / from / of 方法;陣列範例新增了 entries(),keys() 和 values() 等方法

​ 7.物件和陣列新增了擴充套件運運算元

​ 8.ES6 新增了模組化(import/export)

​ 9.ES6 新增了 Set 和 Map 資料結構

​ 10.ES6 原生提供 Proxy 建構函式,用來生成 Proxy 範例

​ 11.ES6 新增了生成器(Generator)和遍歷器(Iterator)

7.JS設計模式有哪些(常見的三種)

​ 1.單例模式

​ 2.工廠模式

​ 3.建構函式模式

8.說一下你對JS物件導向的理解

JS物件導向主要基於function來實現的,通過function來模擬類,通過prototype來實現類方法的共用

9.說一下JS陣列常用方法

push

pop

unshift

shift

splice

join

concat

forEach

filter

map

sort

some

every

10.說一下JS陣列內建遍歷方法有哪些和區別

​ forEach

​ 這個方法是為了取代for迴圈遍歷陣列的,返回值為undefined

​ filter

​ 是一個過濾遍歷的方法,如果返回條件為true,則返回滿足條件為true的新陣列

​ map

​ 這個map方法主要對陣列的複雜邏輯處理時用的多,特別是react中遍歷資料,也經常用到,寫法和forEach 類似

​ some

​ 這個some方法用於只要陣列中至少存在一個滿足條件的結果返回值就為true,否則返回fasel

​ 寫法和forEach類似

​ every

​ 這個every方法用於陣列中每一項都得滿足條件時,才返回true,否則返回false, 寫法和forEach類似

11.說一下JS作用域

在 JavaScript 中, 作用域為可存取變數,物件,函數的集合。

1.JavaScript 區域性作用域

​ 變數在函數內宣告,變數為區域性作用域。

​ 區域性變數:只能在函數內部存取

2.JavaScript全域性作用域

​ 也就是定義在window下的變數範圍,在任何地方都可以存取,

3.JavaScript塊級作用域

​ 塊級作用域:簡單來說用let和const在任意的程式碼塊中定義的變數都認為是塊級作用域中的變數

注:

​ 1. 儘量不要使用全域性變數,因為容易導致全域性的汙染,命名衝突,對bug查詢不利。

  2. 而所謂的作用域鏈就是由最內部的作用域往最外部,查詢變數的過程.形成的鏈條就是作用域鏈

12. 從輸入URL到頁面載入完中間發生了什麼

​ 1.DNS解析(解析URL對應的IP

​ 2.TCP 連線(三次握手)

​ 3.傳送 HTTP 請求

​ 4.伺服器處理請求並返回需要的資料

​ 5.瀏覽器解析渲染頁面

​ 6.連線結束(四次揮手)

​ 三次握手

​ 三次握手是連線協定

​ 四次揮手

​ 關閉連線是四次協定

13.JS事件代理(也稱事件委託)是什麼,及實現原理

JS事件代理就是通過給父級元素繫結事件,不給子級元素繫結事件。然後當點選子級元素時,通過事件冒泡機制在其繫結的父元素上觸發事件處理常式主要目的是為了提升效能

特別是給動態新增的元素繫結事件,這個特別起作用

14.說一下js資料型別有哪些

js資料型別有:

​ 1.基本資料型別:

​ number

​ string

​ Boolean

​ null

​ undefined

​ symbol(ES6新增)

​ 2.複合型別

​ Object

​ function

15.說一下 call,apply,bind區別

​ call,apply,bind主要作用都是改變this指向的,但使用上略有區別

call和apply的主要區別是在傳遞引數上不同

​ 1.call後面傳遞的引數是以逗號的形式分開的

​ 2.apply傳遞的引數是陣列形式

bind返回的是一個函數形式如果要執行,則後面要再加一個小括號

16.JavaScript的作用域鏈理解

​ 其本質是JavaScript在執行過程中會創造可執行上下文,可執行上下文中的詞法環境中含有外部詞法環境的參照,我們可以通過這個參照獲取外部詞法環境的變數、宣告等,這些參照串聯起來一直指向全域性的詞法環境,因此形成了作用域鏈。

17.ES6模組與CommonJS模組有什麼區別

ES6 Module和CommonJS模組的區別:
CommonJS是對模組的淺拷貝,ES6 Module是對模組的參照,即ES6 Module只存唯讀,不能改變其值,具體點就是指標指向不能變,類似const
import的介面是read-only(唯讀狀態),不能修改其變數值。 即不能修改其變數的指標指向,但可以改變變數內部指標指向,可以對commonJS對重新賦值(改變指標指向),

ES6 Module和CommonJS模組的共同點:
CommonJS和ES6 Module都不可以對引入的物件進行賦值,即對物件內部屬性的值進行改變。

18.null與undefined的區別是什麼

​ null表示為空,代表此處不應該有值的存在,一個物件可以是null,代表是個空物件,而null本身也是物件。

​ undefined表示『不存在』,JavaScript是一門動態型別語言,成員除了表示存在的空值外,還有可能根本就不 存在(因為存不存在只在執行期才知道),這就是undefined的意義所在

19.箭頭函數的this指向

​ 箭頭函數並沒有屬於自己的this,它的所謂的this是捕獲其所在上下文的 this 值,作為自己的 this 值,並且由於 沒有屬於自己的this,而箭頭函數是不會被new呼叫的,這個所謂的this也不會被改變.

20.async/await

是一套關於非同步解決的方案

兩個作用1.求值關鍵字2.非同步操作變為同步操作

  1. async會返回一個promise物件,執行時遇到await就會先返回,觸發非同步操作完成後,再接著執行函數後面的語句
  2. 優勢就在於改善pramise的.then鏈
  3. await必須在async的函數內部使用
  4. awati後面必須要跟一個promise(不是的話用reslove轉換他)
  5. await的返回結果就是後面promise執行的結果

21.async/await相比於Promise的優勢

1.程式碼讀起來更加同步,改善Promise.then鏈

2.Promise傳遞中間值非常麻煩,async/await幾乎是同步的寫法,看著簡潔明瞭

3.錯誤處理友好,async/await可以用成熟的try/catch,Promise的錯誤捕獲非常冗餘

4.偵錯友好,Promise的偵錯很差。

22.JavaScript的基本型別和複雜型別是儲存在哪裡的

基本型別儲存在棧中

複雜型別會儲存在記憶體堆中

23.棧和堆的區別

棧:

1.儲存基本資料型別

2.儲存空間小

3.查詢迅速效能高

堆:

1.存多個值得複合型別

2.儲存空間大

3.查詢速度慢效能較低

24.深拷貝和淺拷貝的區別

深拷貝和淺拷貝是針對複雜的資料型別來說的淺拷貝只拷貝一層,深拷貝是層層拷貝

深拷貝:

複製變數值,對於非基本型別的變數,遞迴到基本型別再複製。與原物件完全隔離互不影響。

最簡單的實現是json.parse(json.stringfy(obj))

淺拷貝:

複製屬性,只拷貝第一層屬性,當前物件的屬性值是參照型別時,實質複製的是參照,參照的值也會發生變化

可以使用for in、object.assign、擴充套件運運算元、遞迴等來實現

25.瀏覽器是如何渲染頁面的

渲染的流程如下:

1.解析HTML檔案,建立DOM樹。

自上而下,遇到任何樣式(link、style)與指令碼(script)都會阻塞(外部樣式不阻塞後續外部指令碼的載入)。

2.解析CSS。優先順序:瀏覽器預設設定<使用者設定<外部樣式<內聯樣式<HTML中的style樣式;

3.將CSS與DOM合併,構建渲染樹(Render Tree)

4.佈局和繪製,重繪(repaint)和重排(reflow)

26.json和jsonp的區別

​ json返回的是一串json格式資料;而jsonp返回的是指令碼程式碼

​ jsonp跨域的一種方式

​ 原理:

​ 因為瀏覽器有同源策略,所有ajax不能請求資料。但script標籤不受同源策略的影響,所以通過動態建立script標籤來載入伺服器返回的資料,資料就是一個函數的呼叫

27.如何阻止冒泡

冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。

1.w3c的方法是e.stopPropagation()

2.IE則是使用e.cancelBubble = true

28.如何阻止預設事件

1.w3c的方法是e.preventDefault()

2.IE則是使用e.returnValue = false

29.JavaScript事件流模型都有什麼

「事件冒泡」:事件開始由最具體的元素接受,然後逐級向上傳播

「事件捕捉」:事件由最不具體的節點先接收,然後逐級向下,一直到最具體的

「DOM 事件流」:三個階段:事件捕捉,目標階段,事件冒泡

30.請你談談cookie的弊端

1.Cookie 數量和長度的限制。每個 domain 最多隻能有 20 條 cookie,每個 cookie 長度 不能超過 4KB,否則會被截掉。

2.安全性問題。如果 cookie 被人攔截了,那人就可以取得所有的 session 資訊。即使加密也與事無補,因為攔截者並不需要知道 cookie 的意義,他只要原樣轉發 cookie 就可以達到目的了。

3.有些狀態不可能儲存在使用者端。

31.哪些操作會造成記憶體漏失

  1. setTimeout 的第一個引數使用字串而非函數的話,會引發記憶體漏失。
  2. 閉包
  3. 控制檯紀錄檔
  4. 迴圈(在兩個物件彼此參照且彼此保留時,就會產生一個迴圈)

32.如何優化自己的程式碼

1.程式碼重用

2.避免全域性變數(名稱空間,封閉空間,模組化 mvc…)

3.拆分函數避免函數過於臃腫

33.解釋 JavaScript 中的相等性

JavaScript 中有嚴格比較和型別轉換比較:

  • 嚴格比較(例如 ===)在不允許強制轉型的情況下檢查兩個值是否相等;
  • 抽象比較(例如 ==)在允許強制轉型的情況下檢查兩個值是否相等。

34. 你能解釋一下 ES5 和 ES6 之間的區別嗎

  • ECMAScript 5(ES5):ECMAScript 的第 5 版,於 2009 年標準化。這個標準已在所有現代瀏覽器中完全實現。
  • ECMAScript 6(ES6)或 ECMAScript 2015(ES2015):第 6 版 ECMAScript,於 2015 年標準化。這個標準已在大多數現代瀏覽器中部分實現。

35.解釋 JavaScript 中「undefined」和「not defined」之間的區別

  1. not defined一般會出現在控制檯,提示錯誤:「xxx is not defined」表示xxxx沒有被定義,是未定義的。
  2. undefined一般是表示JS中變數宣告瞭如:var str;但是後續沒有對其進行賦值就直接alert等進行輸出操作,這時會提示undefined,即變數或者物件已經被定義但是沒有被賦值所以不知道該變數用來做什麼,此時console.log該變數會是undefined。

36.什麼是 JavaScript 中的提升操作

提升(hoisting)是 JavaScript 直譯器將所有變數和函數宣告移動到當前作用域頂部的操作。有兩種型別的提升:

  • 變數提升——非常少見
  • 函數提升——常見

無論 var(或函數宣告)出現在作用域的什麼地方,它都屬於整個作用域,並且可以在該作用域內的任何地方存取它。