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

來源：javapoint

譯者：前端小智

---

阿里雲最近在作活動，低至2折，有興趣能夠看看：promotion.aliyun.com/ntms/yunpar…

---

爲了保證的可讀性，本文采用意譯而非直譯。

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中如何將頁面重定向到另外一個頁面？

1. 使用 location.href：window.location.href =「https://www.onlineinterviewquestions.com/」

2. 使用 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 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 中 == 和 === 區別是什麼？

一、對於string,number等基礎類型，==和===有區別

1）不一樣類型間比較，==之比較「轉化成同一類型後的值」看「值」是否相等，===若是類型不一樣，其結果就是不等。 2）同類型比較，直接進行「值」比較，二者結果同樣。

二、對於Array,Object等高級類型，==和===沒有區別

進行「指針地址」比較。

三、基礎類型與高級類型，==和===有區別

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

原文：www.javatpoint.com/javascript-…

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

爲了回饋讀者，《大遷世界》不按期舉行(每月一到三次)，現金抽獎活動，保底200，外加用戶讚揚，但願你能成爲大遷世界的小錦鯉，快來試試吧

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。

每次整理文章，通常都到2點才睡覺，一週4次左右，挺苦的，還望支持，給點鼓勵