JavaScript作為前端開發三大要素之一,是前端面試中考察的一大重點。那么JavaScript面試時常見的問題有哪些?本文為大家對JavaScript常見面試題進行了梳理,主要有七個方便:JavaScript的數據類型及如何轉換、JavaScript內置對象、undefined與undeclared的區別、{}和[]的valueOf和toString的結果、Javascript的作用域和作用域鏈、Javascript創建對象的方式、Javascript延遲加載的方式。大家可以做一做下面的面試題,進行查漏補缺!
面試題一、JavaScript的數據類型有哪些?數據類型如何轉換?
JavaScript一共有8種數據類型,其中有7種基本數據類型:Undefined、Null、Boolean、Number、String、Symbo和BigInt。在JS中類型轉換只有三種情況,分別是:轉換為布爾值,轉換為數字以及轉換為字符串。此外還有一些操作符會存在隱式轉換。
面試題二、介紹一下JavaScript有哪些內置對象。
1.值屬性,這些全局屬性返回一個簡單值,這些值沒有自己的屬性和方法。例如:Infinity、NaN、undefined、null字面量。
2.函數屬性,全局函數可以直接調用,不需要在調用時指定所屬對象,執行結束后會將結果直接返回給調用者。例如:eval()、parseFloat()、parseInt()等。
3.基本對象,基本對象是定義或使用其他對象的基礎。基本對象包括一般對象、函數對象和錯誤對象。例如:Object、Function、Boolean、Symbol、Error等。
4.數字和日期對象,用來表示數字、日期和執行數學計算的對象。例如:Number、Math、Date。
5.字符串,用來表示和操作字符串的對象。例如:String、RegExp。
6.可索引的集合對象,這些對象表示按照索引值來排序的數據集合,包括數組和類型數組,以及類數組結構的對象。例如:Array。
7.使用鍵的集合對象,這些集合對象在存儲數據時會使用到鍵,支持按照插入順序來迭代元素。例如:Map、Set、WeakMap、WeakSet。
8.矢量集合,SIMD矢量集合中的數據會被組織為一個數據序列。例如:SIMD等。
9.結構化數據,這些對象用來表示和操作結構化的緩沖區數據,或使用JSON編碼的數據。例如JSON等。
10.控制抽象對象。例如:Promise、Generator等。
11.反射。例如:Reflect、Proxy。
12.國際化,為了支持多語言處理而加入ECMAScript的對象。例如:Intl、Intl.Collator等。
13.WebAssembly。
面試題三、undefined與undeclared的區別是什么?
已在作用域中聲明但還沒有賦值的變量,是undefined的。相反,還沒有在作用域中聲明過的變量,是undeclared的。對于undeclared變量的引用,瀏覽器會報引用錯誤,如ReferenceError:bisnotdefined。但是我們可以使用typeof的安全防范機制來避免報錯,因為對于undeclared(或者notdefined)變量,typeof會返回"undefined"。
面試題四、{}和[]的valueOf和toString的結果是什么?
{}的valueOf結果為{},toString的結果為"[objectObject]"
[]的valueOf結果為[],toString的結果為""
面試題五、描述一下Javascript的作用域和作用域鏈。
1.作用域:作用域是定義變量的區域,它有一套訪問變量的規則,這套規則來管理瀏覽器引擎如何在當前作用域以及嵌套的作用域中根據變量(標識符)進行變量查找。
2.作用域鏈:作用域鏈的作用是保證對執行環境有權訪問的所有變量和函數的有序訪問,通過作用域鏈,我們可以訪問到外層環境的變量和函數。作用域鏈的本質上是一個指向變量對象的指針列表。變量對象是一個包含了執行環境中所有變量和函數的對象。作用域鏈的前端始終都是當前執行上下文的變量對象。全局執行上下文的變量對象始終是作用域鏈的最后一個對象。
面試題六、Javascript創建對象的幾種方式?
1.工廠模式,工廠模式的主要工作原理是用函數來封裝創建對象的細節,從而通過調用函數來達到復用的目的。但是它有一個很大的問題就是創建出來的對象無法和某個類型聯系起來,它只是簡單的封裝了復用代碼,而沒有建立起對象和類型間的關系。
2.構造函數模式,Javascript中每一個函數都可以作為構造函數,只要一個函數是通過new來調用的,那么我們就可以把它稱為構造函數。執行構造函數首先會創建一個對象,然后將對象的原型指向構造函數的prototype屬性,然后將執行上下文中的this指向這個對象,最后再執行整個函數,如果返回值不是對象,則返回新建的對象。因為this的值指向了新建的對象,因此我們可以使用this給對象賦值。
3.原型模式,因為每一個函數都有一個prototype屬性,這個屬性是一個對象,它包含了通過構造函數創建的所有實例都能共享的屬性和方法。因此我們可以使用原型對象來添加公用屬性和方法,從而實現代碼的復用。這種方式相對于構造函數模式來說,解決了函數對象的復用問題。
4.組合使用構造函數模式和原型模式,這是創建自定義類型的最常見方式。因為構造函數模式和原型模式分開使用都存在一些問題,因此我們可以組合使用這兩種模式,通過構造函數來初始化對象的屬性,通過原型對象來實現函數方法的復用。這種方法很好的解決了兩種模式單獨使用時的缺點,但是有一點不足的就是,因為使用了兩種不同的模式,所以對于代碼的封裝性不夠好。
5.動態原型模式,這一種模式將原型方法賦值的創建過程移動到了構造函數的內部,通過對屬性是否存在的判斷,可以實現僅在第一次調用函數時對原型對象賦值一次的效果。這一種方式很好地對上面的混合模式進行了封裝。
6.寄生構造函數模式,這一種模式和工廠模式的實現基本相同。它主要是基于一個已有的類型,在實例化時對實例化的對象進行擴展。這樣既不用修改原來的構造函數,也達到了擴展對象的目的。它的一個缺點和工廠模式一樣,無法實現對象的識別。
面試題七、Javascript延遲加載的方式有哪些?
Javascript的加載、解析和執行會阻塞頁面的渲染過程,因此我們希望Javascript腳本能夠盡可能的延遲加載,提高頁面的渲染速度。
1.將js腳本放在文檔的底部,來使js腳本盡可能的在最后來加載執行。
2.給js腳本添加defer屬性,這個屬性會讓腳本的加載與文檔的解析同步解析,然后在文檔解析完成后再執行這個腳本文件,這樣的話就能使頁面的渲染不被阻塞。多個設置了defer屬性的腳本按規范來說最后是順序執行的,但是在一些瀏覽器中可能不是這樣。
3.給js腳本添加async屬性,這個屬性會使腳本異步加載,不會阻塞頁面的解析過程,但是當腳本加載完成后立即執行js腳本,這個時候如果文檔沒有解析完成的話同樣會阻塞。多個async屬性的腳本的執行順序是不可預測的,一般不會按照代碼的順序依次執行。
4.動態創建DOM標簽的方式,我們可以對文檔的加載事件進行監聽,當文檔加載完成后再動態的創建script標簽來引入js腳本。
以上就是JavaScript面試時常見的問題,其實關于JavaScript面試題還有很多,具體情況還要看公司崗位要求。想了解更多Java的信息,請繼續關注中培偉業。