1. 程式人生 > 實用技巧 >36個JS面試題

36個JS面試題

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/;");

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.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

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迴圈

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中的事件冒泡和事件捕獲

事件捕獲和冒泡: 在htmlDOM 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 function

var 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.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. 列出一些單元測試框架

下面是一些最流行的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" ) // true

substring()函式的形式為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中,有一些很酷的東西。其中之一是委託模型。當捕獲和冒泡時,允許函式在一個特定的時間實現一個處理程式到多個元素,這稱為事件委託。事件委託允許將事件偵聽器新增到父節點而不是指定的節點。這個特定的偵聽器分析冒泡事件,以找到子元素上的匹配項。