javascript
36 个JS 面试题为你助力金九银十(面试必读)
來源:javapoint
譯者:前端小智
為了保證的可讀性,本文采用意譯而非直譯。
阿里云雙12已開啟,新老用戶均可參與,2核1G云服務器僅需79元,,更多服務器配置及價格請關注:Hi拼團,或點此了解“云上爆款1折特惠活動”。同時,建議在購買阿里云相關產品前?先領取阿里云2000元代金券會更優惠哦。
1.JS中`let`和`const`有什么用?
在現代js中,let&const是創建變量的不同方式。在早期的js中,咱們使用var關鍵字來創建變量。 let&const關鍵字是在ES6版本中引入的,其目的是在js中創建兩種不同類型的變量,一種是不可變的,另一種是可變的。
const:它用于創建一個不可變變量。不可變變量是指其值在程序的整個生命周期中永不改變的變量。
let: let用于創建一個可變變量,可變變量是像var這樣的普通變量,可以任意次數地更改。
?
2. JS 中的主要有哪幾類錯誤
JS有三類的錯誤:
加載時錯誤:加載web頁面時出現的錯誤(如語法錯誤)稱為加載時錯誤,它會動態生成錯誤。
運行時錯誤:由于濫用HTML語言中的命令而導致的錯誤。
邏輯錯誤:這些錯誤是由于對具有不同操作的函數執行了錯誤的邏輯而導致的
?
3. 如何通過類別名獲取 dom 元素
在 JS?中使用document.getElementsByClassName() 方法來獲取具有類名的元素。
?
4. JS的作用域鏈是什么及其作用
一般情況下,變量取值到創建這個變量的函數的作用域中取值。但是如果在當前作用域中沒有查到值,就會向上級作用域去查,直到查到全局作用域,這么一個查找過程形成的鏈條就叫做作用域鏈。
JS中的作用域鏈主要用于解析變量的值。如果沒有這個,在不同的作用域內定義了許多變量,JS很難為變量選擇某個值。
?
5. 解釋JS中的`MUL`函數
MUL表示數的簡單乘法。在這種技術中,將一個值作為參數傳遞給一個函數,而該函數將返回另一個函數,將第二個值傳遞給該函數,然后重復繼續。例如:x*y*z可以表示為
function?mul?(x)?{??return?function?(y)?{?return?function?(z)?{???return?x?*?y?*?z;}} }?
6.用純JS編寫一個程序來反轉字符串
使用內置函數:內置函數reverse()直接反轉字符串。
str="jQuery"; str?=?str.split("") str?=?str.reverse() str?=?str.join("") alert(str);首先將字符串拆分為數組,然后反轉數組,最近將字符連接起來形成字符串。
使用循環:首先,計算字符串中的字符數,然后對原始字符串應用遞減循環,該循環從最后一個字符開始,打印每個字符,直到count變為零。
?
7. JS中如何將頁面重定向到另一個頁面?
使用 location.href:window.location.href =“https://www.onlineinterviewquestions.com/”
使用 ?location.replace: window.location.replace(" https://www.onlineinterviewquestions.com/;");
?
8. 列出JS中的一些設計模式:
設計模式是軟件設計中常見問題的通用可重用解決方案,以下是一些設計模式是:
創建模式:該模式抽象了對象實例化過程。
結構型模式:這些模式處理不同的類和對象以提供新功能。
行為模式:也稱發布-訂閱模式,定義了一個被觀察者和多個觀察者的、一對多的對象關系。
并行設計模式:這些模式處理多線程編程范例。
架構設計模式:這些模式用于處理架構設計。
?
9. JS中的`Array.splice()`和`Array.slice()`方法有什么區別
話不多說,來看第一個例子:
var?arr=[0,1,2,3,4,5,6,7,8,9];//設置一個數組 console.log(arr.slice(2,7));//2,3,4,5,6 console.log(arr.splice(2,7));//2,3,4,5,6,7,8 //由此我們簡單推測數量兩個函數參數的意義, slice(start,end)第一個參數表示開始位置,第二個表示截取到的位置(不包含該位置) splice(start,length)第一個參數開始位置,第二個參數截取長度接著看第二個:
var?x=y=[0,1,2,3,4,5,6,7,8,9] console.log(x.slice(2,5));//2,3,4 console.log(x);[0,1,2,3,4,5,6,7,8,9]原數組并未改變 //接下來用同樣方式測試splice console.log(y.splice(2,5));//2,3,4,5,6 console.log(y);//[0,1,7,8,9]顯示原數組中的數值被剔除掉了slice和splice雖然都是對于數組對象進行截取,但是二者還是存在明顯區別,函數參數上slice和splice第一個參數都是截取開始位置,slice第二個參數是截取的結束位置(不包含),而splice第二個參數(表示這個從開始位置截取的長度),slice不會對原數組產生變化,而splice會直接剔除原數組中的截取數據!
?
10. 如何在JS中動態添加/刪除對象的屬性?
咱們可以使用object.property_name = value向對象添加屬性,delete object.property_name 用于刪除屬性。
例如:
let?user?=?new?Object(); //?adding?a?property user.name='Anil'; user.age??=25; console.log(user); delete?user.age; console.log(user);?
11. 解釋一下什么是 promise ?
promise是js中的一個對象,用于生成可能在將來產生結果的值。值可以是已解析的值,也可以是說明為什么未解析該值的原因。
promise 可以有三種狀態:
-
pending:初始狀態,既不是成功也不是失敗
-
fulfilled:意味著操作完全成功
-
rejected:意味著操作失敗
一個等待狀態的promise對象能夠成功后返回一個值,也能失敗后帶回一個錯誤
當這兩種情況發生的時候,處理函數會排隊執行通過then方法會被調用
?
12. 數組去重復的方法有哪些
1.使用 set
functionuniquearray(array) { let unique_array= Array.from(set(array)) return unique_array; }2.使用 filter
function?unque_array?(arr)?{let?unique_array?=?arr.filter(function(elem,?index,?self)?{return?index?==?self.indexOf(elem);})return?unique_array; }console.log(unique_array(array_with_duplicates));3.使用 for 循環
Array?dups_names?=?['Ron',?'Pal',?'Fred',?'Rongo',?'Ron']; function?dups_array(dups_names)?{let?unique?=?{};names.forEach(function(i)?{If?(!unique[i])?{unique[i]?=?true;????}}); return?Object.keys(unique);}???//?Ron,?Pal,?Fred,?Rongo Dups_array(names);?
13. undefined,null 和 undeclared 有什么區別?
1.null表示"沒有對象",即該處不應該有值,轉為數值時為0。典型用法是:
(1) 作為函數的參數,表示該函數的參數不是對象。
(2) 作為對象原型鏈的終點。
2.undefined表示"缺少值",就是此處應該有一個值,但是還沒有定義,轉為數值時為NaN。典型用法是:
(1)變量被聲明了,但沒有賦值時,就等于undefined。
(2) 調用函數時,應該提供的參數沒有提供,該參數等于undefined。
(3)對象沒有賦值的屬性,該屬性的值為undefined。
(4)函數沒有返回值時,默認返回undefined。
3.undeclared:js語法錯誤,沒有申明直接使用,js無法找到對應的上下文。
?
14. 列出JS基本和非基本數據類型之間的一些區別?
1.目前JS中有6種基本數據類型: Undefined、Null、Boolean、Number、Symbol 和 String。還有1種復雜的數據類型————Object,Object本質上是由一組無序的名值對組成的。Object、Array和Function則屬于引用類型。
2.基本數據類型是不可變的,而非基本數據類型是可變的。
3.基本數據類型是不可變的,因為它們一旦創建就無法更改,但非基本數據類型剛可更改,意味著一旦創建了對象,就可以更改它。
4.將基本數據類型與其值進行比較,這意味著如果兩個值具有相同的數據類型并具有相同的值,那么它們是嚴格相等的。
5.非基本數據類型不與值進行比較。例如,如果兩個對象具有相同的屬性和值,則它們嚴格不相等。
?
15. 如何在現有函數中添加新屬性
只需給現有函數賦值,就可以很容易地在現有函數中添加新屬性。例如,現有一個對象person,通過下面的代碼來為 person 添加新的屬性:
person.country=?“India”;?
16.? JS中的深拷貝與淺拷貝的區別?
-
深拷貝遞歸地復制新對象中的所有值或屬性,而拷貝只復制引用。
-
在深拷貝中,新對象中的更改不會影響原始對象,而在淺拷貝中,新對象中的更改,原始對象中也會跟著改。
-
在深拷貝中,原始對象不與新對象共享相同的屬性,而在淺拷貝中,它們具有相同的屬性。
?
17.? 如何在JavaScript中每x秒調用一個函數
在JS中,咱們使用函數 setInterval() 在每x秒內調用函數。如:
setInterval(function?(){?alert("Hello");?},?3000);?
18.? 解釋一下JS的展開操作符?
展開運算符在需要多個參數/變量/元素的位置展開表達式,它用三個點(...)。如:
var?mid?=?[3,?4];var?newarray?=?[1,?2,?...mid,?5,?6];console.log(newarray);//?[1,?2,?3,?4,?5,?6]?
19.? JS中的宿主對象與原生對象有何不同?
宿主對象:這些是運行環境提供的對象。這意味著它們在不同的環境下是不同的。例如,瀏覽器包含像windows這樣的對象,但是Node.js環境提供像Node List這樣的對象。
原生對象:這些是JS中的內置對象。它們也被稱為全局對象,因為如果使用JS,內置對象不受是運行環境影響。
?
20. 解釋JS中的高階函數?
高階函數是JS函數式編程的最佳特性。它是以函數為參數并返回函數作為結果的函數。一些內置的高階函數是map、filter、reduce 等等。
?
21. JS 中 == 和 === 區別是什么?
1、對于string,number等基礎類型,==和===有區別
1)不同類型間比較,==之比較“轉化成同一類型后的值”看“值”是否相等,===如果類型不同,其結果就是不等。
2)同類型比較,直接進行“值”比較,兩者結果一樣。
2、對于Array,Object等高級類型,==和===沒有區別
進行“指針地址”比較。
3、基礎類型與高級類型,==和===有區別
1)對于==,將高級轉化為基礎類型,進行“值”比較。
2)因為類型不同,===結果為false。
?
22. JS中的匿名函數是什么?
匿名函數:就是沒有函數名的函數,如:
(function(x,?y){alert(x?+?y);?? })(2,?3);這里創建了一個匿名函數(在第一個括號內),第二個括號用于調用該匿名函數,并傳入參數。
?
23. 是否可以在JS中執行301重定向?
JS完全運行在客戶端上。301是服務器作為響應發送的響應代碼。因此,在JS中不可能執行301重定向。
?
24. 解釋JS中的事件冒泡和事件捕獲
事件捕獲和冒泡: 在HTML DOM API中,有兩種事件傳播方法,它們決定了接收事件的順序。兩種方法是事件冒泡和事件捕獲。第一個方法事件冒泡將事件指向其預期的目標,第二個方法稱為事件捕獲,其中事件向下到達元素。
事件捕獲
捕獲過程很少被使用,但是當它被使用時,它被證明是非常有用的。這個過程也稱為滴流模式。在這個過程中,事件首先由最外層的元素捕獲,然后傳播到最內部的元素。例如:
<div><ul><li></li></ul> </div>從上面的示例中,假設單擊事件發生在li元素中,在這種情況下,捕獲事件將首先處理div,然后處理ul,最后命中目標元素li。
事件冒泡
冒泡的工作原理與冒泡類似,事件由最內部的元素處理,然后傳播到外部元素。
<div><ul><li></li></ul> </div>從上面的例子中,假設click事件確實發生在冒泡模型中的li元素中,該事件將首先由li處理,然后由ul處理,最后由div元素處理。
?
24. 如何將文件的所有導出作為一個對象?
import * as objectname from ‘./file.js’用于將所有導出的成員導入為對象。 可以使用對象的點(.)運算符來訪問導出的變量或方法,如:
objectname.member1; objectname.member2; objectname.memberfunc();?
25. 解釋一下什么是箭頭函數?
箭頭函數是在es6或更高版本中編寫函數表達式的簡明方法。箭頭函數不能用作構造函數,也不支持this,arguments,super或new.target關鍵字,它最適合非方法函數。 通常,箭頭函數看起來像 const function_name =()=> {}。
const?greet=()=>{console.log('hello');}greet();?
25 解釋 JS 中的函數提升
JS允許將聲明移動到頂部的默認行為稱為提升。JS中創建函數的兩種方法是函數聲明和函數表達式。
函數聲明
具有特定參數的函數稱為函數聲明,在JS中創建變量稱為聲明。如:
hoisted();?//?logs?"foo"function?hoisted()?{console.log('foo'); }函數表達式
當使用表達式創建函數時,稱為函數表達式。如:
notHoisted();?//?TypeError:?notHoisted?is?not?a?functionvar?notHoisted?=?function()?{console.log('bar'); };?
26. module.exports 和 exports 之間有什么區別?
module和exports是Node.js給每個js文件內置的兩個對象。可以通過console.log(module)和console.log(exports)打印出來。如果你在main.js中寫入下面兩行,然后運行$ node main.js:
console.log(exports);//輸出:{} console.log(module);//輸出:Module {..., exports:?{}, ...}?(注:...代表省略了其他一些屬性)從打印咱們可以看出,module.exports和exports一開始都是一個空對象{},實際上,這兩個對象指向同一塊內存。這也就是說module.exports和exports是等價的(有個前提:不去改變它們指向的內存地址)。
例如:exports.age = 18和module.export.age = 18,這兩種寫法是一致的(都相當于給最初的空對象{}添加了一個屬性,通過require得到的就是{age: 18})。
?
27. import 和 exports 是什么?
import和exports 幫助咱們編寫模塊化的JS代碼。使用import和exports,咱們可以將代碼分割成多個文件。import只允許獲取文件的某些特定變量或方法。可以導入模塊導出的方法或變量。
?//index.jsimport?name,age?from?'./person';?console.log(name);console.log(age);//person.jslet?name?='Sharad',?occupation='developer',?age?=26;export?{?name,?age};??
28. 列出一些單元測試框架
下面是一些最流行的JS單元測試框架:
-
Unit.js
-
Jasmine
-
Karma
-
Chai
-
AVA
-
Mocha
-
JSUnit
-
QUnit
-
Jest
?
29. JS中有哪些不同類型的彈出框可用
在JS中有三種類型的彈出框可用,分別是:
-
Alert
-
Confirm
-
Prompt
30. 如何將 JS 日期轉換為ISO標準
toISOString() 方法用于將js日期轉換為ISO標準。 它使用ISO標準將js Date對象轉換為字符串。如:
var?date?=?new?Date(); var?n?=?date.toISOString(); console.log(n); //?YYYY-MM-DDTHH:mm:ss.sssZ?
31. 如何在JS中克隆對象
Object.assign() 方法用于在JS中克隆對象。如:
var?x?=?{myProp:?"value"}; var?y?=?Object.assign({},?x);??
32. 如何在JS中編碼和解碼 URL
encodeURI() 函數用于在JS中對URL進行編碼。它將url字符串作為參數并返回編碼的字符串。
注意: encodeURI()不會編碼類似這樣字符: / ? : @ & = + $ #,如果需要編碼這些字符,請使用encodeURIComponent()。用法:
var?uri?=?"my?profile.php?name=sammer&occupation=pāntiNG"; var?encoded_uri?=?encodeURI(uri);decodeURI() 函數用于解碼js中的URL。它將編碼的url字符串作為參數并返回已解碼的字符串,用法:
var?uri?=?"my?profile.php?name=sammer&occupation=pāntiNG"; var?encoded_uri?=?encodeURI(uri); decodeURI(encoded_uri);?
33. BOM 和 DOM 的關系
BOM全稱Browser Object Model,即瀏覽器對象模型,主要處理瀏覽器窗口和框架。
DOM全稱Document Object Model,即文檔對象模型,是 HTML 和XML 的應用程序接口(API),遵循W3C 的標準,所有瀏覽器公共遵守的標準。
JS是通過訪問BOM(Browser Object Model)對象來訪問、控制、修改客戶端(瀏覽器),由于BOM的window包含了document,window對象的屬性和方法是直接可以使用而且被感知的,因此可以直接使用window對象的document屬性,通過document屬性就可以訪問、檢索、修改XHTML文檔內容與結構。因為document對象又是DOM的根節點。
可以說,BOM包含了DOM(對象),瀏覽器提供出來給予訪問的是BOM對象,從BOM對象再訪問到DOM對象,從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。
?
34. JS中的 `substr()`和`substring()`函數有什么區別
substr() ?函數的形式為substr(startIndex,length)。它從startIndex返回子字符串并返回'length'個字符數。
var?s?=?"hello"; (?s.substr(1,4)?==?"ello"?)?//?truesubstring() 函數的形式為substring(startIndex,endIndex)。 它返回從startIndex到endIndex - 1的子字符串。
var?s?=?"hello"; (?s.substring(1,4)?==?"ell"?)?//?true?
35. 解釋一下 "use strict" ?
“use strict”是Es5中引入的js指令。使用“use strict”指令的目的是強制執行嚴格模式下的代碼。在嚴格模式下,咱們不能在不聲明變量的情況下使用變量。早期版本的js忽略了“use strict”。
?
36. 解釋 JS 事件委托模型?
在JS中,有一些很酷的東西。其中之一是委托模型。當捕獲和冒泡時,允許函數在一個特定的時間實現一個處理程序到多個元素,這稱為事件委托。事件委托允許將事件偵聽器添加到父節點而不是指定的節點。這個特定的偵聽器分析冒泡事件,以找到子元素上的匹配項。
原文:https://www.javatpoint.com/javascript-tutorial
代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
總結
以上是生活随笔為你收集整理的36 个JS 面试题为你助力金九银十(面试必读)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: springboot智慧餐厅点餐餐桌预订
- 下一篇: Redis、ES、Nginx和Rabbi