8個你可能不知道答案的常見JavaScript面試問題

不管你喜不喜歡,棘手的問題仍然會被野外的面試官問到。

 

原因是,這些問題可以告訴你很多關於你對語言的核心理解,因此你是否適合這份工作。

這些問題中涉及的常見概念包括:

  • Hoisting
  • 關閉
  • 範圍
  • 值與引用類型
  • 原型繼承

今天我們要一石二鳥。

準備好迎接下一次面試並立即複習核心概念。

1、爲什麼 typeoff是未定義的?

var y = 1;
if (function f() {}) {
 y += typeof f;
}

console.log(y); // 1undefined

解釋

  • 條件語句if(function f() {})返回function f() {}真值,因此代碼在 if 語句內執行。
  • typeof f返回undefined,因爲該函數f(){}從未在語句外if聲明,所以它不“存在”在if括號外if (f(){}) { It doesn't exist here }

這就是我們“修復”此代碼片段的方式:

var y = 1;

function f() {}; //declare function outside if brackets

if (f) { //f exists so we enter the if block
 y += typeof f; //here typeof f is function
}

console.log(y); // 1function

2、寫一個閉包的例子

function createFunction(msg) {
   return function(name) {
       return msg + name;
  }
}

let myFunc = createFunction("Hey ");
console.log(myFunc("Dude")); // Hey Dude

解釋

  • 第一個函數(createFunction)返回一個匿名函數
  • 匿名函數msg從外部函數(createFunction())+name自身返回參數。

當我們聲明變量javascript let myFunc = createFunction("Hey ")時,變量myFunc持有對外部返回的匿名函數的引用

有趣的是,當您調用javascript myFunc("Dude")(僅傳遞“名稱”參數)時,它仍然“記住”執行msg時傳入的值createFunction()。

從創建函數的外部“範圍”訪問變量的能力是閉包的定義之一。

在此處瞭解有關閉包的更多信息

3、編寫一個可以像 multiply(2)(5)(10) 一樣調用並返回 100 的 multiply() 函數

這與上面的示例類似,不同之處在於我們正在重新調整一個附加函數並立即調用所有函數(不使用變量來保存引用)

function multiply(x) {
   return function(y){
       return function(z) {
         return x*y*z;
      };
  }
}

multiply(2)(5)(10) //100

通過調用 multiply like

javascript multiply(2)(5)(10)

我們正在一個接一個地調用返回的函數。

我們可以使用中間變量使其更清晰。我們來看一下:

let func1 = multiply(2); // x is 2
console.log(func1) // function(y) { return function(z) { return x*y*z } }

let func2 = func1(5); // y is 5
console.log(func1) // function(z) { return x*y*z }

func2(10); // z is 10
// finally has all 3 values and returns their product.

在此處瞭解有關嵌套函數的更多信息

4、delete局部變量的運算符

以下代碼的輸出是什麼?

let output = (function(x) {
   delete x;
   return x;
})(0);

*刪除運算符旨在用於刪除對象的屬性,而不是值類型(在本例中爲數字)。

這會起作用:

let obj = { name: 'Gus', age: 32 }
delete obj.age;

console.log(obj) // { name: 'Gus' }

5、delete對象運算符

const Person = {
   name: 'Gus',
   age: 32,
}

const person1 = Object.create(Person);
delete person1.age

console.log(person1.age); // 32
  • person1創建時將其原型設置爲Person對象。
  • 當實例person1的age屬性被刪除時,我們仍然可以訪問age原型對象(Person)的屬性
  • 這就是爲什麼它似乎不起作用的原因。

這是一個很大的話題,你可以在這裏瞭解更多

6、delete數組運算符

記錄 arr.length 的結果是什麼?

 let arr = ["a", "b", "c", "d"];
 delete arr[2];

 arr.length // 4
  • 在數組上使用時,刪除運算符將刪除元素設置爲“空”,但不會將其從數組中刪除,也不會更改數組的長度。

7、兩個 console.log 的值是多少?

var favouriteAnime = "Dragon Ball";
(function() {
   console.log(favouriteAnime);
   var favouriteAnime = "Naruto";
   console.log(favouriteAnime);
})();

// undefined
// Naruto

以下是編譯器如何解釋這段代碼:

var favouriteAnime; // declared and initialized with undefined
(function() {
   console.log(favouriteAnime);
   var favouriteAnime = "Naruto";
   console.log(favouriteAnime);
})();

favouriteAnime = "Dragon Ball";

// undefined
// Naruto

聲明 JavaScript 函數和變量時要記住一些事情。

  • 變量賦值(myVar = 5) 優先於函數聲明(function func(){})
  • 函數聲明(function func(){}) 優先於變量聲明(var myVar;) *let 或 const
  • 函數聲明 (function func(){}) 被提升到變量聲明 (var myVar;) 之上,但未被提升到變量賦值 (myVar = 5;) 之上。

作爲最佳實踐,您應該始終在調用函數之前聲明它們。

在此處瞭解有關提升的更多信息

8、你會如何檢查一個數字是否是整數?

檢查數字是否爲十進制或整數的最簡單方法是使用內置的Number.isInteger()

console.log(Number.isInteger(4)); // true
console.log(Number.isInteger(12.2)); // false
console.log(Number.isInteger(0.3)); // false

另一種方法是看除以 1 是否還有餘數。

function isInt(num) {
 return num % 1 === 0;
}

console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

注意:在處理浮點數時,JavaScript 的精度是有限制的。如果你檢查Number.isInteger(1.0000000000000001)將返回true。你可以在這裏瞭解更多

結論

請記住按 F12 並親自嘗試這些示例。

這個微小的動作將幫助您更長時間地記住所學內容。

這是我們今天看到的內容的回顧:

  • 爲什麼 typeoff是未定義的?
  • 寫一個閉包的例子
  • 編寫一個可以像 multiply(2)(5)(10) 一樣調用並返回 100 的 multiply() 函數
  • 局部變量的刪除運算符
  • 對象上的刪除運算符
  • 數組上的刪除運算符
  • 兩個 console.log 的值是多少?
  • 你會如何檢查一個數字是否是整數?

謝謝閱讀!如果你喜歡這篇文章*在下面發表評論(你可以打個招呼!),如果對你有幫助,記得點贊支持哦!

爲了更好的讓大家認識到 JavaScript 的精髓,我們在三十天計劃羣裏推出了幾節非常重要的 JavaScript 課程體系,而且每個系列知識點都保障是完整的。感興趣可以通過下方的練習方式參與課程哦 。如果你正在學習 JavaScript,我們已經在三十天計劃中完成了 4 個綜合項目實戰,那不妨可以聽下這個課程體系,三十天計劃羣裏還提供了算法、數組等知識體系!

 

 

 

前端工程師成長方法

更多完整 JavaScript 課程體系在我們的系統班裏有完整的呈現,包含了 JavaScript 基礎篇、重點、算法、原理、面試題、實戰案例講解!同時也爲你提供了前端高級工程師成長體系!(詳細看下圖內容)

 

如果需要深度學習的同學可以聯繫助理老師瞭解詳細的課程以及課程的報名方式!(不定期會推出活動,有大額優惠券推出,活動詳情聯繫助理老師瞭解即可!)如果你纔開始學習前端,那麼可以先學習我們的三十天計劃(零基礎的同學報名系統班同學可以和老師溝通制定學習計劃,可以得到更快的成長!)

 

爲幫助到一部分同學不走彎路,真正達到一線互聯網大廠前端項目研發要求,首次實力寵粉,打造了《30 天挑戰學習計劃》,內容如下:

HTML/HTML5,CSS/CSS3,JavaScript,真實企業項目開發,雲服務器部署上線,從入門到精通

  • PC 端項目開發(1 個)
  • 移動 WebApp 開發(2 個)
  • 多端響應式開發(1 個)

共 4 大完整的項目開發 !一行一行代碼帶領實踐開發,實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態,省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理,Markdown 記錄學習筆記,包括真實大廠項目的開發標準和設計規範,命名規範,項目代碼規範,SEO 優化規範

從藍湖 UI 設計稿 到 PC 端,移動端,多端響應式開發項目開發

  • 真機調試,雲服務部署上線;
  • Linux 環境下 的 Nginx 部署,Nginx 性能優化;
  • Gzip 壓縮,HTTPS 加密協議,域名服務器備案,解析;
  • 企業項目域名跳轉的終極解決方案,多網站、多系統部署;
  • 使用 使用 Git 在線項目部署;

這些內容在《30 天挑戰學習計劃》中每一個細節都有講到,包含視頻 + 圖文教程 + 項目資料素材等。只爲實力寵粉,真正一次掌握企業項目開發必備技能,不走彎路 !

過程中【不涉及】任何費用和利益,非誠勿擾 。

如果你沒有添加助理老師微信,可以添加下方微信,說明要參加 30 天挑戰學習計劃,來自博客園!老師會邀請你進入學習,並給你發放相關資料。

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章