前端面試（個人收藏總結）javascript篇（一）

簡單卟容易發表於2018-04-07
前端面試JavaScript

前端面試（個人收藏總結）HTML篇

前端面試（個人收藏總結）CSS篇

前端面試（個人收藏總結）javascript篇（二）

JS中有多少種基本資料型別

undefined, null, boolean, string, number

Ps:ES6中新增symbol型別

參考：JavaScript的資料型別及其檢測

JS變數按照儲存方式區分為那些型別，並描述其特點

  • 值型別

  • 引用型別

參考：低門檻徹底理解JavaScript中的深拷貝和淺拷貝

JS中使用typeof能得到哪些型別

undefind、string、number、boolean、function、object

特別說明的是物件、陣列、null都是object（函式雖是引用型別，但能識別），因為typeof沒法區分引用型別

Ps:可以得到ES6中新增的symbol型別

如何判斷一個變數是陣列型別

可以用instanceof關鍵字

舉個例子：

var arr = []
arr instanceof Array //true
Array.isArray(arr) //true
複製程式碼

何時使用'==='何時使用'=='

  • 雙等會自動強制轉換，有風險。

  • jQuery原始碼中推薦使用三等，我個人也是這麼寫的。雙等可用於判斷布林值

參考：徹底終結 Javascript 背後的隱式型別轉換

寫一個繼承的例子

//建構函式方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
console.log(new Animal2())
//缺點：無法繼承Animal的原型物件

//原型鏈方式
function Animal { this.name = 'pig' }
function Animal2 { this.age = 18 }
Animal2.prototype = new Animal();
console.log(new Animal2())
//缺點：實際上是共享，修改原型物件裡的內容，其它繼承的類也會同步修改

//組合方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Animal.prototype;
console.log(new Animal2())
//缺點：由於引用同一個原型物件，無法區分物件是由誰例項化的

//最終方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Obiect.create(Animal.prototype);
Animal2.prototype.constructor = Animal2;
console.log(new Animal2())
//解釋：通過建立新的物件，不再是同一個，再指定建構函式屬性為自己
複製程式碼

建立物件的幾種方式

  • 字面量

  • object物件

  • 建構函式

  • object create

描述new一個物件的過程

  • 建立空物件，並繼承原型物件

  • 執行建構函式，this指向這個空物件

  • 如果返回值是object則返回新物件，否則返回object

你對變數提升的理解

在執行程式碼時，變數和函式的宣告會被提升到作用域的頂部（此時變數的值為undefined）

如果是全域性，會被提升到指令碼的最前面

如果是函式內，會被提升到函式內最前面，this也是

PS:注意函式表示式（匿名函式）的情況

PS2:注意ES6中let的情況，不會變數提升

說明this幾種不同的使用場景

  • 作為建構函式執行

  • 作為物件屬性執行

  • 作為普通函式執行

  • call apply bind

建立10個a標籤，點選彈出對應序號

for(var i=0;i<10;i++){
  (function(i){
  	var a = document.createElement('a');
    a.innerHtml=i+'<br>';
    a.onclick=function(e){
  		e.preventDefault();
      	alert(i)
	}
    document.body.appendChild(a)
  })(i)
}
複製程式碼

如何理解作用域

只有函式作用域和全域性作用域，ES6中新增塊級作用域那是後話

函式外宣告的變數為全域性作用域，函式內可以使用

函式內宣告的變數為函式作用域，函式外不可以使用

作用域鏈：一個自由變數一直往上尋找（定義時的）父級作用域內的變數的過程。

自由變數：當前作用域沒有定義的變數

ps：花括號內使用let宣告變數為塊級作用域，只能內部使用，減少全域性汙染

瞭解閉包嗎？

閉包：用一個函式去訪問另一個函式內的內部變數的方式的特殊函式

使用場景：柯里化函式

參考：mp.weixin.qq.com/s/G9HIJWH-5…

同步和非同步的區別？

同步會阻塞程式碼執行，非同步不會

前端使用非同步的場景？

  • 定時任務：setTimeout setInverval

  • 網路請求：ajax請求，動態前端面試（個人收藏總結）javascript篇（一）載入

  • 事件繫結

JS執行機制簡單說明

  • 單執行緒：JS引擎、事件觸發器、定時觸發器都是單執行緒的。
  • 任務佇列：JS分為同步任務和非同步任務，一旦執行棧中的所有同步任務執行完畢（此時JS引擎空閒），系統就會讀取任務佇列，將可執行的非同步任務新增到可執行棧中，開始執行。
  • event loop（事件迴圈機）制：執行棧中的程式碼呼叫某些api時，會在事件佇列中新增各種事件，當棧中的程式碼執行完畢後，會讀取事件佇列中的事件並執行回撥的迴圈過程。

參考：www.dailichun.com/2018/01/21/…

程式和執行緒

  • 程式：正在執行的應用程式，是應用程式的一個執行環境，是cpu資源分配的最小單位
  • 執行緒：建立在程式的基礎上，用於執行操作（如執行程式碼），是cpu排程的最小單位，一個程式可以有多個執行緒

獲取隨機數，要求是長度一致的字串格式

var random = Math.random();
var random = random+'00000000';
var random = random.slice(0,10);
複製程式碼

寫一個能遍歷物件和陣列的通用forEach函式

function foreach(obj,fn){
  var key;
  if(obj instanceof Array){
  	obj.forEach(function(item,index){
  		fn(index,item)
	})
  }else{
  	for(key in obj){
  		fn(key,obj[key])
	}
  }
}
複製程式碼

JavaScript 中如何獲取當前的時間戳

  • Date.now()

  • new Date().getTime()

  • +new Date()

相關文章