2020前端JavaScript面試題/錯題整理

1 .介紹JavaScript的基本資料類型

Number、String 、Boolean 、Null、Undefined Object 是 JavaScript 中所有對象的父對象

資料封裝類對象：Object、Array、Boolean、Number 和 String

其他對象：Function、Arguments、Math、Date、RegExp、Error

新類型：Symbol

2.eval是做什麼的？

它的功能是把對應的字元串解析成JS代碼并運作； 應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

由JSON字元串轉換為JSON對象的時候可以用eval，var obj =eval(’(’+ str +’)’);

3.Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

hasOwnProperty

javaScript中hasOwnProperty函數方法是傳回一個布爾值，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鍊中是否具有該屬性；該屬性必須是對象本身的一個成員。

使用方法： object.hasOwnProperty(proName) 其中參數object是必選項。一個對象的執行個體。

proName是必選項。一個屬性名稱的字元串值。 如果 object

具有指定名稱的屬性，那麼JavaScript中hasOwnProperty函數方法傳回 true，反之則傳回 false。

4.js延遲加載的方式有哪些？

defer和async、動态建立DOM方式（用得最多）、按需異步載入js

5.如何判斷目前腳本運作在浏覽器還是node環境中？

this === window ? ‘browser’ : ‘node’;

通過判斷Global對象是否為window，如果不為window，目前腳本沒有運作在浏覽器中

6.例舉3種強制類型轉換和2種隐式類型轉換?

強制（parseInt(),parseFloat(),Number()）

隐式（== ,!=）

7.split() 、join() 的差別

前者是切割成數組的形式，後者是将數組轉換成字元串

8.數組方法pop() push() unshift() shift()map()filter()

push()尾部添加 pop()尾部删除

unshift()頭部添加 shift()頭部删除

map() : 周遊數組中的元素,傳回一個新數組(包含回調函數傳回的資料)

filter():周遊數組中的元素, 傳回一個新數組(包含回調函數傳回true的元素)

9.如何阻止事件冒泡和事件預設行為

//阻止事件冒泡

if(typeof ev.stopPropagation=='function') {  //标準的

    ev.stopPropagation();

} else { //非标準IE

    window.event.cancelBubble = true;

}

//阻止事件預設行為
return false
window.onload 和document ready的差別
window.onload 是在dom文檔樹加載完和所有檔案加載完之後執行一個函數 document.ready原生中
沒有這個方法，jquery中有 $().ready(function),在dom文檔樹加 載完之後執行一個函數
（注意，這裡面的文檔樹加載完不代表全部檔案加載完）。
$(document).ready要比window.onload先執行
window.onload隻能出來一次，$(document).ready可以出現多次
           

10.“ == ” 和 “ === ”的不同

前者會自動轉換類型

後者不會

11.當一個DOM節點被點選時候，我們希望能夠執行一個函數，應該怎麼做？

直接在DOM裡綁定事件：

<div οnclick=”test()”></div>

在JS裡通過onclick綁定：

xxx.onclick = test

通過事件添加進行綁定：

addEventListener(xxx, ‘click’, test)

12.Javascript的事件流模型都有什麼？

“事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播

“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的

“DOM事件流”：三個階段：事件捕捉，目标階段，事件冒泡

13.截取字元串abcdefg的efg

14.字元串反轉，如将 ‘12345678’ 變成 ‘87654321’

//思路：先将字元串轉換為數組 split()，
利用數組的反序函數 reverse()颠倒數組，再利用 jion() 轉換為字元串

var str = '12345678';
str = str.split('').reverse().join('');
           

15.哪些操作會造成記憶體洩漏？

記憶體洩漏指任何對象在您不再擁有或需要它之後仍然存在。

垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。

如果一個對象的 引用數量為0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼 該對象的記憶體即可回收。

1. setTimeout 的第一個參數使用字元串而非函數的話，會引發記憶體洩漏。
2. 閉包
3. 控制台日志
4. 循環（在兩個對象彼此引用且彼此保留時，就會産生一個循環）

16.typeof運算符傳回值中有一個跟javascript資料類型不一緻，它是？如何判斷是不是數組？

17.window.location.search() 傳回的是什麼？

傳回值：?ver=1.0&id=timlq 也就是問号後面的部分

18.window.location.reload() 作用？

重新整理目前頁面。

19.javascript 中的垃圾回收機制？

在Javascript中，如果一個對象不再被引用，那麼這個對象就會被GC回收。如果兩個對象互相引用，而不再

被第3者所引用，那麼這兩個互相引用的對象也會被回收。因為函數a被b引用，b又被a外的c引用，這就是為什麼 函數a執行後不會被回收的原因。

20.簡述readonly與disabled的差別

ReadOnly和Disabled的作用是使使用者不能夠更改表單域中的内容. 但是二者還是有着一些差別的：

1、Readonly隻針對input(text/password)和textarea有效，而disabled對于所有的表單

元素有效，包括select,radio,checkbox,button等。

2、在表單元素使用了disabled後，我們将表單以POST或者GET的方式送出的話，這

個元素的值不會被傳遞出去，而readonly會将該值傳遞出去

21.用JavaScript實作升序排序。資料為23、45、18、37、92、13、24

//升序算法

function sort(arr){

    for (var i = 0; i <arr.length; i++) {

        for (var j = 0; j <arr.length-i; j++) {

            if(arr[j]>arr[j+1]){

                var c=arr[j];//交換兩個變量的位置

                arr[j]=arr[j+1];

                arr[j+1]=c;

            }

        };

    };

    return arr.toString();

}

console.log(sort([23,45,18,37,92,13,24]));
           

22.請說出三種減低頁面加載時間的方法

1、壓縮css、js檔案

2、合并js、css檔案，減少http請求

3、外部js、css檔案放在最底下

4、減少dom操作，盡可能用變量替代不必要的dom操作

23.變量提升

function sayHi(){
		console.log(name);
		console.log(age);
		var name = "Tom";
		let age = 18;
	}

	sayHi();
           

• A: Tom 和 undefined
• B: Tom 和 ReferenceError
• C: ReferenceError 和 18
• D: undefined 和 ReferenceError

在函數中，我們首先使用var關鍵字聲明了name變量。這意味着變量在建立階段會被提升（JavaScript會在建立變量建立階段為其配置設定記憶體空間），預設值為undefined，直到我們實際執行到使用該變量的行。

我們還沒有為name變量指派，是以它仍然保持undefined的值。

使用let關鍵字（和const）聲明的變量也會存在變量提升，但與var不同，初始化沒有被提升。 在我們聲明（初始化）它們之前，它們是不可通路的。 這被稱為“暫時死區”。 當我們在聲明變量之前嘗試通路變量時，JavaScript會抛出一個ReferenceError。

24.setTimeout函數

for (var i = 0; i < 3; i++) {
	  setTimeout(() => console.log(i), 1);
	}

	for (let i = 0; i < 3; i++) {
	  setTimeout(() => console.log(i), 1);
	}
           

• A: 0 1 2 和 0 1 2
• B: 0 1 2 和 3 3 3
• C: 3 3 3 和 0 1 2
• 答案：C

由于JavaScript中的異步執行機制，setTimeout函數真正被執行時，循環已經走完。

由于第一個循環中的變量i是使用var關鍵字聲明的，是以該值是全局的。 在循環期間，我們每次使用一進制運算符++都會将i的值增加1。

是以在第一個例子中，當調用setTimeout函數時，i已經被指派為3。

在第二個循環中，使用let關鍵字聲明變量i：使用let（和const）關鍵字聲明的變量是具有塊作用域的（塊是{}之間的任何東西）。 在每次疊代期間，i将被建立為一個新值，并且每個值都會存在于循環内的塊級作用域。

25.數組定義（錯題）

var a=[]建立一個長度為0的數組，a[5]=4,數組長度自動延長至6，沒有指派的元素均為undefined。

26.内部變量與全局變量重名時（錯題）

内部變量将覆寫外部變量

27.關于塊内聲明函數的方法（錯題）

要有var

28.若需給子scope發送消息

$emit() 向上冒泡
$broadcast() 是向下傳播事件
           

29.如何阻止浏覽器預設行為

兩種方法：

30.算術運算

JavaScript定義var a=“40”,var b=7,則執行a%b會得到(5)。

在進行算術運算時會做，+号，數字隐式轉換成字元串。其餘的運算符号是字元串隐式轉換成數字。

31.w3c 制定的 javascript 标準事件模型（錯題）

事件捕獲->事件處理->事件冒泡

32.JavaScript解析順序

以下代碼執行後， num 的值是？

var foo=function(x,y){
return x-y;
}
function foo(x,y){
return x+y;
}
var num=foo(1,2);
答案：-1
           

33.以下哪一個不是JavaScript的資料類型：

Integer

Integer是int的一個封裝類。javascript是一種弱類型語言，定義變量時不需要指明特定的資料類型。javascript中的資料類型有Undefined,Null,Boolean,Number.這些屬于基本類型。Object,

Array,

Function屬于引用類型。string類型有些特殊，因為字元串具有可變的大小，是以顯然它不能被直接存儲在具有固定大小的變量中。由于效率的原因，我們希望JS隻複制對字元串的引用，而不是字元串的内容。但是另一方面，字元串在許多方面都和基本類型的表現相似，而字元串是不可變的這一事實（即沒法改變一個字元串值的内容），是以可以将字元串看成行為與基本類型相似的不可變引用類型

34.在JavaScript中，調用對象屬性的描述中，例如：調用對象obj的arr屬性

obj["arr"]
obj["a"+"r"+"r"]
obj.arr
           

中括号方式或者點方式

35.如何判斷一個js對象是否是Array,arr為要判斷的對象，其中最準确的方法是？

typeof(arr) 傳回的是 Object
instanceof 在跨 frame 對象建構的場景下會失效
arr.toString 沒有這種用法，正确的用法是 arr.toString() 傳回的是數組的内容
           

36.從字元串 const str = ‘qwbewrbbeqqbbbweebbbbqee’;中能得到結果 [“b”, “bb”, “bbb”, “bbbb”] 以下錯誤語句是？

審題：錯誤

+表示出現至少一次b

*表示可以不出現b，也可以出現一次或多次

{n,m}表示最少出現n次b,最多出現m次b

/b+/g    //比對前面的子表達式一次或多次，有一個或多個b
 /b*/g    //比對前面的子表達式零次或多次,結果不止數組中那麼多
 /b{1,4}/g   //比對1-4個b 
 /b{1,5}/g    //比對1-5個b
           

37.下面哪種方式不能改變作用域鍊？

with try-catch eval可以改變作用域鍊