50 個JS 必須懂的面試題爲你助力金九銀十

時間  2019-11-06
標籤 必須 懂的 面試 題爲 助力 欄目 JavaScript 简体版
原文   原文鏈接

做者：Kenmenjavascript

譯者：前端小智css

來源：hackr.iohtml

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

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

問題1：Java和JavaScript有什麼不一樣

Java JavaScript
Java是一種OOP編程語言。 JavaScript是一種OOP腳本語言。
它建立在虛擬機或瀏覽器中運行的應用程序。 代碼在瀏覽器或node環境上運行。
須要編譯Java代碼。 JS代碼都是文本的形式。

問題2：什麼 Javascript

JavaScript 是一種輕量級的解釋型編程語言，具備面向對象的特性，容許各位在其餘靜態HTML頁面中構建交互性。 該語言的通用核心已嵌入Netscape，Internet Explorer和其餘Web瀏覽器中。node

問題3： JS 支持哪些數據類型

JS 支持的數據類型:git

  • Undefined
  • Null
  • Boolean
  • String
  • Symbol
  • Number
  • Object

問題4：JavaScript的特性是什麼

如下是JS的特性:程序員

  • JS 是一種輕量級，解釋性編程語言。
  • 爲了建立以網絡爲中心的應用程序而設計。
  • 補充和集成了 Java
  • 補充和集成了 HTML
  • 開放和跨平臺

問題5：JavaScript是區分大小寫

是的，JS是一種區分大小寫的語言。關鍵字、變量、函數名和任何其餘標識符必須始終使用一致的大寫字母進行使用。github

問題6：JS 的優點是什麼

如下使用JS的優勢:編程

  • 更少的服務器交互 - 在將頁面發送到服務器以前，能夠驗證用戶輸入,節省了服務器流量，意味着服務器的負載更少

  • 當即反饋 - 用戶不須要等待頁面從新加載來查看是否忘記輸入某些內容。

  • 加強交互 - 在界面中，當用戶使用鼠標懸停或經過鍵盤激活它們時會作出響應。

  • 豐富的接口 - 可使用JS包含拖放組件和滑塊等項，爲網站提供豐富的界面。

問題7：如何用JS建立對象

JS賊支持對象概念，用以下方式建立便可：

var emp = {
name: "Daniel",
age: 23
};
複製代碼

問題8：如何用JS建立數組

JS 建立數組也很簡單：

var x = [];
var y = [1, 2, 3, 4, 5];
複製代碼

問題9：JS 中的命名函數是什麼以及如何定義：

命名函數在定義後當即聲明名稱，可使用function關鍵字定義：

function named(){
// write code here
}
複製代碼

問題10：是否能夠將匿名函數分配給變量並將其做爲參數傳遞給另外一個函數

能夠。一個匿名函數能夠分配給一個變量，它也能夠做爲參數傳遞給另外一個函數。

問題11：JS中的參數對象是什麼&如何得到傳遞給函數的參數類型

JS 變量arguments表示傳遞給函數的參數。 使用typeof運算符，能夠得到傳遞給函數的參數類型。以下：

function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(7); //==> "number", 1
func("1", "2", "3"); //==> "string", 3
複製代碼

問題12：JS中變量的做用域是什麼

變量的做用域是程序中定義它的區域，JS變量只有兩個做用域：

  • 全局變量 - 全局變量具備全局做用域，這意味着它在JS代碼中的任何位置均可見。
  • 局部變量 - 局部變量僅在定義它的函數中可見，函數參數始終是該函數的本地參數。

問題13：JS 中「this」運算符的用途是什麼？

this關鍵字引用它所屬的對象。 根據使用位置，它具備不一樣的值。 在方法中，這指的是全部者對象，而在函數中，這指的是全局對象。

問題14：什麼是回調

回調函數是做爲參數或選項傳遞給某個方法的普通JS函數。它是一個函數，在另外一個函數完成執行後執行，所以稱爲回調。在JS中，函數是對象，所以，函數能夠接受函數做爲參數，而且能夠由其餘函數返回。

問題15：什麼是閉包？舉個例子

只要在某個內部做用域內訪問在當前做用域以外定義的變量，就會建立閉包。 它容許你從內部函數訪問外部函數的做用域。 在JS中，每次建立函數時都會建立閉包。 要使用閉包，只需在另外一個函數內定義一個函數並暴露它。

問題16：列出一些內置方法及其返回的值。

內置方法 返回值
CharAt() 它返回指定索引處的字符。
Concat() 它鏈接兩個或多個字符串。
forEach() 它爲數組中的每一個元素調用一個函數。
indexOf() 它返回指定值第一次出現時調用字符串對象中的索引。
pop() 它從數組中刪除最後一個元素並返回該元素。
push() 它將一個或多個元素添加到數組的末尾，並返回數組的新長度。
reverse() 反轉數組元素的順序。

問題17： JS中的變量命名約定是什麼？

在JS中命名變量時要遵循如下規則:

  1. 我們不該該使用任何JS保留關鍵字做爲變量名。例如，break或boolean變量名無效。

  2. JS 變量名不該該以數字(0-9)開頭。它們必須以字母或下劃線開頭。例如，123name是一個無效的變量名，但123name或name123是一個有效的變量名。

  3. JS 變量名區分大小寫。例如，Test和test是兩個不一樣的變量。

問題18：TypeOf 運算符是如何工做的

typeof運算符用於獲取其操做數的數據類型。 操做數能夠是文字或數據結構，例如變量，函數或對象。 它是一個一元運算符，放在它的單個操做數以前，能夠是任何類型。 它的值是一個字符串，表示操做數的數據類型。

問題19：如何使用 JS 建立 cookie

建立cookie的最簡單方法是爲document.cookie對象分配一個字符串值，以下所示:

document.cookie = "key1 = value1; key2 = value2; expires = date";
複製代碼

問題20：如何使用JS讀取cookie

讀取cookie就像寫入cookie同樣簡單，由於document.cookie對象的值是cookie。

  • document.cookie的值是由分號分隔的name=value對的列表，其中name是cookie的名稱，value是其字符串值。
  • 可使用split()方法將字符串分解爲鍵和值。

問題21：如何使用 JS 刪除 cookie

若是要刪除cookie以便後續嘗試讀取cookie，則只需將過時日期設置爲過去的時間。 我們應該定義cookie路徑以確保刪除正確的cookie。 若是未指定路徑，某些瀏覽器將不容許我們刪除cookie。

問題22：Attribute 和Property之間有什麼區別

  • Attribute——提供關於元素的更多細節，如id、類型、值等。

  • Property —— 分配給屬性的值，如type =「text」，value ='Name'等。

問題23：列出在JS代碼中訪問HTML元素的不一樣方式

下面是在JS代碼中訪問 html 元素的方法列表:

  • getElementById(‘idname’): 按id名稱獲取元素
  • getElementsByClass(‘classname’): 獲取具備給定類名的全部元素
  • getElementsByTagName(‘tagname’): 獲取具備給定標記名稱的全部元素
  • querySelector(): 此函數採用css樣式選擇器並返回第一個選定元素

問題24：JS代碼在HTML文件中能夠以多少種方式使用

主要有三種：

  • 行內
  • 內部
  • 外部

行內方式：

...
<input type="button" value="點擊有驚喜" onclick="javascript:alert('哈哈哈哈')">
...
複製代碼

內部方式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
//聲明一個函數(整個文檔均可以使用)
function surprise() {
alert('恭喜你中了一百萬')/*彈出框*/
}
</script>
</head>
。。。
</html>
複製代碼

外部方式：

...
<!--不少html頁面均可以調用js4.js頁面-->
<script src="../../js/js4.js" type="text/javascript" charset="utf-8">
...
複製代碼

問題25：在JS中定義變量的方法有哪些

在 JS 中聲明變量有三種方式：

  • var – var 語句用於聲明一個變量，我們能夠選擇初始化該變量的值。例子:var a =10;變量聲明在代碼執行以前處理。

  • const - 常量的值不能經過從新賦值來改變，而且不能從新聲明。

  • let - 語句聲明一個塊級做用域的本地變量，而且可選的將其初始化爲一個值。

問題26：什麼是類型化語言

類型化語言中，值與值關聯，而不是與變量關聯，它有兩種類型：

  • 動態:在這種狀況下，變量能夠包含多種類型，如在JS中，變量能夠取number, string 類型。

  • 靜態:在這種狀況下，變量只能包含一種類型，就像在Java中聲明爲string的變量只能包含一組字符，不能包含其餘類型。

問題27：Cookie 與 Local storage 與 Session storage 區別

特性 Cookie localStorage sessionStorage
數據的生命期 通常由服務器生成，可設置失效時間。若是在瀏覽器端生成Cookie，默認是關閉瀏覽器後失效 除非被清除，不然永久保存 僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小 4K左右 通常爲 5MB
與服務器端通訊 每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
易用性 須要程序員本身封裝，源生的Cookie接口不友好 須要程序員本身封裝，源生的Cookie接口不友好 源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持

問題28: ‘==‘ 和 ‘===‘ 區別

==： 兩邊值類型不一樣的時候，要先進行類型轉換，再比較。 ===：不作類型轉換，類型不一樣的必定不等。

一言以蔽之：==先轉換類型再比較，===先判斷類型，若是不是同一類型直接爲false。

問題29：null 和 undefined 區別

undefined是基本數據類型 表示未定義 缺乏的意思。

null是引用數據類型，是對象，表示空對象

undefined是從null派生出來的 因此undefined==null 爲 true

問題 30：undeclared 和 undefined 區別？

undeclared的變量是程序中不存在且未聲明的變量。 若是程序嘗試讀取未聲明變量的值，則會遇到運行時錯誤。undefined的變量是在程序中聲明但未賦予任何值的變量，若是程序試圖讀取未定義變量的值，則返回undefined的值。

問題 31： 列出一些JS框架

JS框架是用JavaScript編寫的應用程序框架，它與控制流中的JS庫不一樣，一些最經常使用的框架是：

  • Vue
  • Angular
  • React

問題 32： window 與 document 的區別：

window:JS 的 window 是一個全局對象，它包含變量、函數、history、location。

document:document也位於window之下，能夠視爲window的屬性。

問題 33： innerHTML 和 innerText 的區別

innerHTML:也就是從對象的起始位置到終止位置的所有內容,包括Html標籤。

innerText:從起始位置到終止位置的內容, 但它去除Html標籤

問題 34：JS中的事件冒泡是什麼

事件冒泡是HTML DOM API中事件傳播的一種方式，當一個事件發生在另外一個元素中的一個元素中，而且兩個元素都註冊了該事件的句柄時。經過冒泡，事件首先由最內部的元素捕獲和處理，而後傳播到外部元素。執行從該事件開始，並轉到其父元素。而後執行傳遞給父元素，以此類推，直到body元素。

問題 35：NaN 是什麼

NaN 即非數值（Not a Number），NaN 屬性用於引用特殊的非數字值，該屬性指定的並非不合法的數字。

NaN 屬性 與 Number.Nan 屬性相同。

提示： 請使用 isNaN() 來判斷一個值是不是數字。緣由是 NaN 與全部值都不相等，包括它本身。

問題 36：JS的原始/對象類型如何在函數中傳遞？

二者之間的一個區別是，原始數據類型是經過值傳遞的，對象是經過引用傳遞的。

  • 值傳遞：意味着建立原始文件的副本。把它想象成一對雙胞胎:他們出生的時候如出一轍，可是雙胞胎中的老大在戰爭中失去了一條腿，而老二卻沒有。
  • 引用傳遞: 意味着建立原始文件的別名。當我媽媽叫沙雕的時候，雖然個人名字叫小智，但這並非說我就忽然就克隆了一個本身:我仍然是我，只是能夠用不一樣名字來稱呼我而已。

問題 37：如何在JS中將任意基的字符串轉換爲整數

parseInt(string, radix) 將一個字符串 string 轉換爲 radix 進制的整數， radix 爲介於2-36之間的數,以下：

parseInt("4F", 16)
複製代碼

問題 38：2+5+ '3'的結果是什麼

因爲2和5是整數，它們將以數字形式相加。由於3是一個字符串，它將與 7 拼接，結果是73。

問題 39：export 和 import 是什麼

import和export有助於我們編寫模塊化JS代碼。 使用import和export，我們能夠將代碼拆分爲多個文件，以下：

//------ lib.js ------</span>
export const sqrt = Math.sqrt;</span>
export function square(x) {</span>
return x * x;</span>
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
 
//------ main.js ------</span>
 { square, diag } from 'lib';
console.log(square(5)); // 25
console.log(diag(4, 3)); // 5
複製代碼

問題40：JS中的「嚴格」模式是什麼以及如何啓用？

嚴格模式是在代碼中引入更好的錯誤檢查的一種方法。

  • 當使用嚴格模式時，不能使用隱式聲明的變量，或爲只讀屬性賦值，或向不可擴展的對象添加屬性。

  • 能夠經過在文件，程序或函數的開頭添加「use strict」來啓用嚴格模式

問題41：JS 中的 prompt 框是什麼

提示框是容許用戶經過提供文本框輸入輸入的框。 prompt() 方法顯示一個對話框，提示訪問者輸入。 若是您但願用戶在輸入頁面以前輸入值，則一般會使用提示框。 彈出提示框時，用戶必須在輸入輸入值後單擊「肯定」或「取消」才能繼續。

問題42：下面代碼的輸出是什麼？

var Y = 1;
if (eval(function f(){}))
{
  y += typeof F;
}
console.log(y);
複製代碼

打印1undefined。if條件語句使用eval求值，所以eval(function f(){})返回函數f(){}(爲真)。所以，在if語句中，執行typeof f返回undefined，由於if語句代碼在運行時執行，而if條件中的語句在運行時計算。

問題43：call 和 apply有什麼區別

call和apply能夠用來從新定義函數的執行環境，也就是this的指向；call和apply都是爲了改變某個函數運行時的context，即上下文而存在的，換句話說，就是爲了改變函數體內部this的指向。

call()調用一個對象的方法，用另外一個對象替換當前對象，能夠繼承另一個對象的屬性，它的語法是：

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
複製代碼

說明：call方法能夠用來代替另外一個對象調用一個方法，call方法能夠將一個函數的對象上下文從初始的上下文改變爲obj指定的新對象，若是沒有提供obj參數，那麼Global對象被用於obj

apply() 和call()方法同樣，只是參數列表不一樣，語法：

Function.apply(obj[, argArray]);
複製代碼

說明：若是argArray不是一個有效數組或不是arguments對象，那麼將致使一個TypeError，若是沒有提供argArray和obj任何一個參數，那麼Global對象將用做obj。

問題44：如何在JS中清空數組

有許多方法能夠用來清空數組:

方法一：

arrayList = []
複製代碼

上面的代碼將把變量arrayList設置爲一個新的空數組。若是在其餘任何地方都沒有對原始數組arrayList的引用，則建議這樣作，由於它實際上會建立一個新的空數組。我們應該當心使用這種清空數組的方法，由於若是你從另外一個變量引用了這個數組，那麼原始的引用數組將保持不變。

方法二：

arrayList.length = 0;
複製代碼

上面的代碼將經過將其length設置爲0來清除現有數組。這種清空數組的方式還會更新指向原始數組的全部引用變量。 所以，當你想要更新指向arrayList的全部引用變量時，此方法頗有用。

方法三：

arrayList.splice(0, arrayList.length);
複製代碼

這處方法也行，固然這種清空數組的方法也將更新對原始數組的全部引用。

方法四：

while(arrayList.length)
{
  arrayList.pop();
}
複製代碼

上面的實現也能夠空數組，但一般不建議常用這種方式。

問題45：如下代碼的輸出什麼

var output = (function(x)
{
  delete x;
  return x;
}
)(0);
console.log(output);
複製代碼

打印 0。delete操做符用於從對象中刪除屬性。這裏x不是一個對象，而是一個局部變量，刪除操做符不影響局部變量。

問題46：如下代碼的輸出什麼

var X = { foo : 1}; 
var output = (function() 
{ 
  delete X.foo; 
  return X.foo; 
} 
)(); 
console.log(output);
複製代碼

輸出 undefined。delete操做符用於刪除對象的屬性。X是一個具備foo屬性的對象，因爲它是一個自調用函數，因此我們將從對象X中刪除foo屬性。這樣作以後，當我們試圖引用一個被刪除的foo屬性時，結果是undefined。

問題47：如下代碼的輸出什麼

var foo = function Bar()
{
  return 7;
};
typeof Bar();
複製代碼

輸出將是引用錯誤。函數定義只能有一個引用變量做爲其函數名。

問題49：爲何要將JS源文件的所有內容包裝在一個函數中

這是一種愈來愈廣泛的作法，被許多流行的JS庫所採用。 這種技術圍繞文件的整個內容建立一個閉包，最重要的是，它能夠建立一個私有命名空間，從而有助於避免不一樣JS模塊和庫之間潛在的名稱衝突。

該技術的另外一個特性是容許爲全局變量提供一個簡單的別名，這在jQuery插件中常用。

問題50：JS中的轉義字符是什麼

JS轉義字符使我們可以在不破壞應用程序的狀況下編寫特殊字符。轉義字符(\)用於處理特殊字符，如單引號、雙引號、撇號和&號，在字符前放置反斜槓使其顯示。

如：document.write("I am a \"good\" boy")

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

原文：hackr.io/blog/javasc…

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

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

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

github.com/qq449245884…

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

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

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程