36 個(gè)JS 面試題為你助力金九銀十(面試必讀)

1.JS中l(wèi)et和const有什么用?
在現(xiàn)代js中,let&const是創(chuàng)建變量的不同方式。 在早期的js中,咱們使用var關(guān)鍵字來創(chuàng)建變量。 let&const關(guān)鍵字是在ES6版本中引入的,其目的是在js中創(chuàng)建兩種不同類型的變量,一種是不可變的,另一種是可變的。
const:它用于創(chuàng)建一個(gè)不可變變量。不可變變量是指其值在程序的整個(gè)生命周期中永不改變的變量。
let: let用于創(chuàng)建一個(gè)可變變量,可變變量是像var這樣的普通變量,可以任意次數(shù)地更改。
2. JS 中的主要有哪幾類錯(cuò)誤
JS有三類的錯(cuò)誤:
- 加載時(shí)錯(cuò)誤:加載web頁面時(shí)出現(xiàn)的錯(cuò)誤(如語法錯(cuò)誤)稱為加載時(shí)錯(cuò)誤,它會(huì)動(dòng)態(tài)生成錯(cuò)誤。
- 運(yùn)行時(shí)錯(cuò)誤:由于濫用HTML語言中的命令而導(dǎo)致的錯(cuò)誤。
- 邏輯錯(cuò)誤:這些錯(cuò)誤是由于對(duì)具有不同操作的函數(shù)執(zhí)行了錯(cuò)誤的邏輯而導(dǎo)致的
3. 如何通過類別名獲取 dom 元素
在 JS 中使用document.getElementsByClassName() 方法來獲取具有類名的元素。
4.JS的作用域鏈?zhǔn)鞘裁醇捌渥饔?/strong>
一般情況下,變量取值到創(chuàng)建這個(gè)變量的函數(shù)的作用域中取值。但是如果在當(dāng)前作用域中沒有查到值,就會(huì)向上級(jí)作用域去查,直到查到全局作用域,這么一個(gè)查找過程形成的鏈條就叫做作用域鏈。
JS中的作用域鏈主要用于解析變量的值。 如果沒有這個(gè),在不同的作用域內(nèi)定義了許多變量,JS很難為變量選擇某個(gè)值。
5.解釋JS中的MUL函數(shù)
MUL表示數(shù)的簡(jiǎn)單乘法。在這種技術(shù)中,將一個(gè)值作為參數(shù)傳遞給一個(gè)函數(shù),而該函數(shù)將返回另一個(gè)函數(shù),將第二個(gè)值傳遞給該函數(shù),然后重復(fù)繼續(xù)。例如:x*y*z可以表示為
function mul (x) { return function (y) { return function (z) { return x * y * z; } } }
6.用純JS編寫一個(gè)程序來反轉(zhuǎn)字符串
使用內(nèi)置函數(shù):內(nèi)置函數(shù)reverse()直接反轉(zhuǎn)字符串。
str="jQuery"; str = str.split("") str = str.reverse() str = str.join("") alert(str);
首先將字符串拆分為數(shù)組,然后反轉(zhuǎn)數(shù)組,最近將字符連接起來形成字符串。
使用循環(huán):首先,計(jì)算字符串中的字符數(shù),然后對(duì)原始字符串應(yīng)用遞減循環(huán),該循環(huán)從最后一個(gè)字符開始,打印每個(gè)字符,直到count變?yōu)榱恪?/p>
7.JS中如何將頁面重定向到另一個(gè)頁面?
使用 location.href:window.location.href =“https://www.onlineinterviewquestions.com/”
使用 location.replace: window.location.replace(" https://www.onlineinterviewquestions.com/;");
8. 列出JS中的一些設(shè)計(jì)模式:
設(shè)計(jì)模式是軟件設(shè)計(jì)中常見問題的通用可重用解決方案,以下是一些設(shè)計(jì)模式是:
- 創(chuàng)建模式:該模式抽象了對(duì)象實(shí)例化過程。
- 結(jié)構(gòu)型模式:這些模式處理不同的類和對(duì)象以提供新功能。
- 行為模式:也稱發(fā)布-訂閱模式,定義了一個(gè)被觀察者和多個(gè)觀察者的、一對(duì)多的對(duì)象關(guān)系。
- 并行設(shè)計(jì)模式:這些模式處理多線程編程范例。
- 架構(gòu)設(shè)計(jì)模式:這些模式用于處理架構(gòu)設(shè)計(jì)。
9. JS中的Array.splice()和Array.slice()方法有什么區(qū)別
話不多說,來看第一個(gè)例子:
var arr=[0,1,2,3,4,5,6,7,8,9];//設(shè)置一個(gè)數(shù)組 console.log(arr.slice(2,7));//2,3,4,5,6 console.log(arr.splice(2,7));//2,3,4,5,6,7,8 //由此我們簡(jiǎn)單推測(cè)數(shù)量?jī)蓚€(gè)函數(shù)參數(shù)的意義, slice(start,end)第一個(gè)參數(shù)表示開始位置,第二個(gè)表示截取到的位置(不包含該位置)
splice(start,length)第一個(gè)參數(shù)開始位置,第二個(gè)參數(shù)截取長(zhǎng)度
接著看第二個(gè):
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]原數(shù)組并未改變 //接下來用同樣方式測(cè)試splice console.log(y.splice(2,5));//2,3,4,5,6 console.log(y);//[0,1,7,8,9]顯示原數(shù)組中的數(shù)值被剔除掉了
slice和splice雖然都是對(duì)于數(shù)組對(duì)象進(jìn)行截取,但是二者還是存在明顯區(qū)別,函數(shù)參數(shù)上slice和splice第一個(gè)參數(shù)都是截取開始位置,slice第二個(gè)參數(shù)是截取的結(jié)束位置(不包含),而splice第二個(gè)參數(shù)(表示這個(gè)從開始位置截取的長(zhǎng)度),slice不會(huì)對(duì)原數(shù)組產(chǎn)生變化,而splice會(huì)直接剔除原數(shù)組中的截取數(shù)據(jù)!
10.如何在JS中動(dòng)態(tài)添加/刪除對(duì)象的屬性?
咱們可以使用object.property_name = value向?qū)ο筇砑訉傩?,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中的一個(gè)對(duì)象,用于生成可能在將來產(chǎn)生結(jié)果的值。 值可以是已解析的值,也可以是說明為什么未解析該值的原因。
promise 可以有三種狀態(tài):
- pending:初始狀態(tài),既不是成功也不是失敗
- fulfilled:意味著操作完全成功
- rejected:意味著操作失敗
一個(gè)等待狀態(tài)的promise對(duì)象能夠成功后返回一個(gè)值,也能失敗后帶回一個(gè)錯(cuò)誤
當(dāng)這兩種情況發(fā)生的時(shí)候,處理函數(shù)會(huì)排隊(duì)執(zhí)行通過then方法會(huì)被調(diào)用
12. 數(shù)組去重復(fù)的方法有哪些
1.使用 set
function uniquearray(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 循環(huán)
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 有什么區(qū)別?
1.null表示"沒有對(duì)象",即該處不應(yīng)該有值,轉(zhuǎn)為數(shù)值時(shí)為0。典型用法是:
(1) 作為函數(shù)的參數(shù),表示該函數(shù)的參數(shù)不是對(duì)象。
(2) 作為對(duì)象原型鏈的終點(diǎn)。
2.undefined表示"缺少值",就是此處應(yīng)該有一個(gè)值,但是還沒有定義,轉(zhuǎn)為數(shù)值時(shí)為NaN。典型用法是:
(1)變量被聲明了,但沒有賦值時(shí),就等于undefined。
(2) 調(diào)用函數(shù)時(shí),應(yīng)該提供的參數(shù)沒有提供,該參數(shù)等于undefined。
(3)對(duì)象沒有賦值的屬性,該屬性的值為undefined。
(4)函數(shù)沒有返回值時(shí),默認(rèn)返回undefined。
3.undeclared:js語法錯(cuò)誤,沒有申明直接使用,js無法找到對(duì)應(yīng)的上下文。
14.列出JS基本和非基本數(shù)據(jù)類型之間的一些區(qū)別?
1.目前JS中有6種基本數(shù)據(jù)類型: Undefined、Null、Boolean、Number、Symbol 和 String。還有1種復(fù)雜的數(shù)據(jù)類型————Object,Object本質(zhì)上是由一組無序的名值對(duì)組成的。Object、Array和Function則屬于引用類型。
2.基本數(shù)據(jù)類型是不可變的,而非基本數(shù)據(jù)類型是可變的。
3.基本數(shù)據(jù)類型是不可變的,因?yàn)樗鼈円坏﹦?chuàng)建就無法更改,但非基本數(shù)據(jù)類型剛可更改,意味著一旦創(chuàng)建了對(duì)象,就可以更改它。
4.將基本數(shù)據(jù)類型與其值進(jìn)行比較,這意味著如果兩個(gè)值具有相同的數(shù)據(jù)類型并具有相同的值,那么它們是嚴(yán)格相等的。
5.非基本數(shù)據(jù)類型不與值進(jìn)行比較。例如,如果兩個(gè)對(duì)象具有相同的屬性和值,則它們嚴(yán)格不相等。
15. 如何在現(xiàn)有函數(shù)中添加新屬性
只需給現(xiàn)有函數(shù)賦值,就可以很容易地在現(xiàn)有函數(shù)中添加新屬性。例如,現(xiàn)有一個(gè)對(duì)象person,通過下面的代碼來為 person 添加新的屬性:
person.country= “India”;
16. JS中的深拷貝與淺拷貝的區(qū)別?
- 深拷貝遞歸地復(fù)制新對(duì)象中的所有值或?qū)傩裕截愔粡?fù)制引用。
- 在深拷貝中,新對(duì)象中的更改不會(huì)影響原始對(duì)象,而在淺拷貝中,新對(duì)象中的更改,原始對(duì)象中也會(huì)跟著改。
- 在深拷貝中,原始對(duì)象不與新對(duì)象共享相同的屬性,而在淺拷貝中,它們具有相同的屬性。
17. 如何在JavaScript中每x秒調(diào)用一個(gè)函數(shù)
在JS中,咱們使用函數(shù) setInterval() 在每x秒內(nèi)調(diào)用函數(shù)。如:
setInterval(function (){ alert("Hello"); }, 3000);
18. 解釋一下JS的展開操作符?
展開運(yùn)算符在需要多個(gè)參數(shù)/變量/元素的位置展開表達(dá)式,它用三個(gè)點(diǎn)(...)。如:
var mid = [3, 4]; var newarray = [1, 2, ...mid, 5, 6]; console.log(newarray); // [1, 2, 3, 4, 5, 6]
19. JS中的宿主對(duì)象與原生對(duì)象有何不同?
宿主對(duì)象:這些是運(yùn)行環(huán)境提供的對(duì)象。這意味著它們?cè)诓煌沫h(huán)境下是不同的。例如,瀏覽器包含像windows這樣的對(duì)象,但是Node.js環(huán)境提供像Node List這樣的對(duì)象。
原生對(duì)象:這些是JS中的內(nèi)置對(duì)象。它們也被稱為全局對(duì)象,因?yàn)槿绻褂肑S,內(nèi)置對(duì)象不受是運(yùn)行環(huán)境影響。
20. 解釋JS中的高階函數(shù)?
高階函數(shù)是JS函數(shù)式編程的最佳特性。它是以函數(shù)為參數(shù)并返回函數(shù)作為結(jié)果的函數(shù)。一些內(nèi)置的高階函數(shù)是map、filter、reduce 等等。
21. JS 中 == 和 === 區(qū)別是什么?
1、對(duì)于string,number等基礎(chǔ)類型,==和===有區(qū)別
1)不同類型間比較,==之比較“轉(zhuǎn)化成同一類型后的值”看“值”是否相等,===如果類型不同,其結(jié)果就是不等。
2)同類型比較,直接進(jìn)行“值”比較,兩者結(jié)果一樣。
2、對(duì)于Array,Object等高級(jí)類型,==和===沒有區(qū)別
進(jìn)行“指針地址”比較。
3、基礎(chǔ)類型與高級(jí)類型,==和===有區(qū)別
1)對(duì)于==,將高級(jí)轉(zhuǎn)化為基礎(chǔ)類型,進(jìn)行“值”比較。
2)因?yàn)轭愋筒煌?==結(jié)果為false。
22. JS中的匿名函數(shù)是什么?
匿名函數(shù):就是沒有函數(shù)名的函數(shù),如:
(function(x, y){ alert(x + y); })(2, 3);
這里創(chuàng)建了一個(gè)匿名函數(shù)(在第一個(gè)括號(hào)內(nèi)),第二個(gè)括號(hào)用于調(diào)用該匿名函數(shù),并傳入?yún)?shù)。
23. 是否可以在JS中執(zhí)行301重定向?
JS完全運(yùn)行在客戶端上。301是服務(wù)器作為響應(yīng)發(fā)送的響應(yīng)代碼。因此,在JS中不可能執(zhí)行301重定向。
24. 解釋JS中的事件冒泡和事件捕獲
事件捕獲和冒泡: 在HTML DOM API中,有兩種事件傳播方法,它們決定了接收事件的順序。兩種方法是事件冒泡和事件捕獲。第一個(gè)方法事件冒泡將事件指向其預(yù)期的目標(biāo),第二個(gè)方法稱為事件捕獲,其中事件向下到達(dá)元素。
事件捕獲
捕獲過程很少被使用,但是當(dāng)它被使用時(shí),它被證明是非常有用的。這個(gè)過程也稱為滴流模式。在這個(gè)過程中,事件首先由最外層的元素捕獲,然后傳播到最內(nèi)部的元素。例如:
<div> <ul> <li></li> </ul> </div>
從上面的示例中,假設(shè)單擊事件發(fā)生在li元素中,在這種情況下,捕獲事件將首先處理div,然后處理ul,最后命中目標(biāo)元素li。
事件冒泡
冒泡的工作原理與冒泡類似,事件由最內(nèi)部的元素處理,然后傳播到外部元素。
<div> <ul> <li></li> </ul> </div>
從上面的例子中,假設(shè)click事件確實(shí)發(fā)生在冒泡模型中的li元素中,該事件將首先由li處理,然后由ul處理,最后由div元素處理。
24. 如何將文件的所有導(dǎo)出作為一個(gè)對(duì)象?
import * as objectname from ‘./file.js’用于將所有導(dǎo)出的成員導(dǎo)入為對(duì)象。 可以使用對(duì)象的點(diǎn)(.)運(yùn)算符來訪問導(dǎo)出的變量或方法,如:
objectname.member1; objectname.member2; objectname.memberfunc();
25. 解釋一下什么是箭頭函數(shù)?
箭頭函數(shù)是在es6或更高版本中編寫函數(shù)表達(dá)式的簡(jiǎn)明方法。箭頭函數(shù)不能用作構(gòu)造函數(shù),也不支持this,arguments,super或new.target關(guān)鍵字,它最適合非方法函數(shù)。 通常,箭頭函數(shù)看起來像 const function_name =()=> {}。
const greet=()=>{console.log('hello');} greet();
25 解釋 JS 中的函數(shù)提升
JS允許將聲明移動(dòng)到頂部的默認(rèn)行為稱為提升。JS中創(chuàng)建函數(shù)的兩種方法是函數(shù)聲明和函數(shù)表達(dá)式。
函數(shù)聲明
具有特定參數(shù)的函數(shù)稱為函數(shù)聲明,在JS中創(chuàng)建變量稱為聲明。如:
hoisted(); // logs "foo" function hoisted() { console.log('foo'); }
函數(shù)表達(dá)式
當(dāng)使用表達(dá)式創(chuàng)建函數(shù)時(shí),稱為函數(shù)表達(dá)式。如:
notHoisted(); // TypeError: notHoisted is not a function var notHoisted = function() { console.log('bar'); };
26. module.exports 和 exports 之間有什么區(qū)別?
module和exports是Node.js給每個(gè)js文件內(nèi)置的兩個(gè)對(duì)象??梢酝ㄟ^console.log(module)和console.log(exports)打印出來。如果你在main.js中寫入下面兩行,然后運(yùn)行$ node main.js:
console.log(exports);//輸出:{} console.log(module);//輸出:Module {..., exports: {}, ...} (注:...代表省略了其他一些屬性)
從打印咱們可以看出,module.exports和exports一開始都是一個(gè)空對(duì)象{},實(shí)際上,這兩個(gè)對(duì)象指向同一塊內(nèi)存。這也就是說module.exports和exports是等價(jià)的(有個(gè)前提:不去改變它們指向的內(nèi)存地址)。
例如:exports.age = 18和module.export.age = 18,這兩種寫法是一致的(都相當(dāng)于給最初的空對(duì)象{}添加了一個(gè)屬性,通過require得到的就是{age: 18})。
27. import 和 exports 是什么?
import和exports 幫助咱們編寫模塊化的JS代碼。使用import和exports,咱們可以將代碼分割成多個(gè)文件。import只允許獲取文件的某些特定變量或方法。可以導(dǎo)入模塊導(dǎo)出的方法或變量。
//index.js import name,age from './person'; console.log(name); console.log(age); //person.js let name ='Sharad', occupation='developer', age =26; export { name, age};
28. 列出一些單元測(cè)試框架
下面是一些最流行的JS單元測(cè)試框架:
- Unit.js
- Jasmine
- Karma
- Chai
- AVA
- Mocha
- JSUnit
- QUnit
- Jest
29. JS中有哪些不同類型的彈出框可用
在JS中有三種類型的彈出框可用,分別是:
- Alert
- Confirm
- Prompt
30. 如何將 JS 日期轉(zhuǎn)換為ISO標(biāo)準(zhǔn)
toISOString() 方法用于將js日期轉(zhuǎn)換為ISO標(biāo)準(zhǔn)。 它使用ISO標(biāo)準(zhǔn)將js Date對(duì)象轉(zhuǎn)換為字符串。如:
var date = new Date(); var n = date.toISOString(); console.log(n); // YYYY-MM-DDTHH:mm:ss.sssZ
31. 如何在JS中克隆對(duì)象
Object.assign() 方法用于在JS中克隆對(duì)象。如:
var x = {myProp: "value"}; var y = Object.assign({}, x);
32. 如何在JS中編碼和解碼 URL
encodeURI() 函數(shù)用于在JS中對(duì)URL進(jìn)行編碼。它將url字符串作為參數(shù)并返回編碼的字符串。
注意: encodeURI()不會(huì)編碼類似這樣字符: / ? : @ & = + $ #,如果需要編碼這些字符,請(qǐng)使用encodeURIComponent()。 用法:
var uri = "my profile.php?name=sammer&occupation=pāntiNG"; var encoded_uri = encodeURI(uri);
decodeURI() 函數(shù)用于解碼js中的URL。它將編碼的url字符串作為參數(shù)并返回已解碼的字符串,用法:
var uri = "my profile.php?name=sammer&occupation=pāntiNG"; var encoded_uri = encodeURI(uri); decodeURI(encoded_uri);
33. BOM 和 DOM 的關(guān)系
BOM全稱Browser Object Model,即瀏覽器對(duì)象模型,主要處理瀏覽器窗口和框架。
DOM全稱Document Object Model,即文檔對(duì)象模型,是 HTML 和XML 的應(yīng)用程序接口(API),遵循W3C 的標(biāo)準(zhǔn),所有瀏覽器公共遵守的標(biāo)準(zhǔn)。
JS是通過訪問BOM(Browser Object Model)對(duì)象來訪問、控制、修改客戶端(瀏覽器),由于BOM的window包含了document,window對(duì)象的屬性和方法是直接可以使用而且被感知的,因此可以直接使用window對(duì)象的document屬性,通過document屬性就可以訪問、檢索、修改XHTML文檔內(nèi)容與結(jié)構(gòu)。因?yàn)閐ocument對(duì)象又是DOM的根節(jié)點(diǎn)。
可以說,BOM包含了DOM(對(duì)象),瀏覽器提供出來給予訪問的是BOM對(duì)象,從BOM對(duì)象再訪問到DOM對(duì)象,從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。
34. JS中的substr()和substring()函數(shù)有什么區(qū)別
substr() 函數(shù)的形式為substr(startIndex,length)。 它從startIndex返回子字符串并返回'length'個(gè)字符數(shù)。
var s = "hello"; ( s.substr(1,4) == "ello" ) // true
substring() 函數(shù)的形式為substring(startIndex,endIndex)。 它返回從startIndex到endIndex - 1的子字符串。
var s = "hello"; ( s.substring(1,4) == "ell" ) // true
35. 解釋一下 "use strict" ?
“use strict”是Es5中引入的js指令。 使用“use strict”指令的目的是強(qiáng)制執(zhí)行嚴(yán)格模式下的代碼。 在嚴(yán)格模式下,咱們不能在不聲明變量的情況下使用變量。 早期版本的js忽略了“use strict”。
36.解釋 JS 事件委托模型?
在JS中,有一些很酷的東西。其中之一是委托模型。當(dāng)捕獲和冒泡時(shí),允許函數(shù)在一個(gè)特定的時(shí)間實(shí)現(xiàn)一個(gè)處理程序到多個(gè)元素,這稱為事件委托。事件委托允許將事件偵聽器添加到父節(jié)點(diǎn)而不是指定的節(jié)點(diǎn)。這個(gè)特定的偵聽器分析冒泡事件,以找到子元素上的匹配項(xiàng)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了Vue.js的高級(jí)面試題(附答案),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-01-13
- 這篇文章主要介紹了nodejs常見面試題與參考答案,涉及nodejs常見的知識(shí)點(diǎn)、難點(diǎn)與概念分析,需要的朋友可以參考下2019-09-03
- JS 初學(xué)者總是對(duì)this關(guān)鍵字感到困惑,因?yàn)榕c其他現(xiàn)代編程語言相比,JS 中的這this關(guān)鍵字有點(diǎn)棘手。今天小編給大家?guī)?0個(gè)比較流行的JavaScript面試題 ,感興趣的朋友一起2019-07-12
- 這篇文章主要介紹了javascript作用域,作用域鏈,閉包的面試題,在一些前端面試中經(jīng)常會(huì)問題,今天小編特此整理分享到腳本之家平臺(tái),需要的朋友可以參考下2020-02-21