[2020-02-22]70道JavaScript的面試問題

[pdji1602003]

前言

於本月初有幸獲得一份面試機會，並於本月14號進行電話面談；然而，很不幸地，面談沒過多久，我便接獲對方來信，通知我不予錄取。我原先認為無論任何結果，我皆能坦然以對，畢竟我自認已經百分之百地努力過了，對於嘗試過程，我沒有後悔。但是，打開信封檢視的時刻，我還是不免得感到沮喪。我天真地以為我的情緒可以不受動搖，但看來我還是不夠了解我自己。收到通知信後地幾天(包括今天)，我感到欲振乏力，對任何事情都提不起勁，彷彿那封通知信榨乾了我全身的氣力，用英語表示即是mentally and physically drained。我難得有此感受，認真頗析了一下此次沮喪的感覺竟會如此兇猛的原因，該是學習編程本身並非易事，面試的準備過程在我腦力上又增添了另一重負擔，最後是結果令人大失所望，這三件事情，在我思緒上層層疊加，我心理上一時無法負荷，最後便導致這次沮喪被如此放大之後果了。

花了這麼多筆墨在書寫我目前的心理狀態，但其實這不是我本篇issue開立的原因。
(來個突然的題外話，我一直十分關注心理學相關的文章，平常會造訪的網站有PSYCHOLOGY TODAY。我記得從中讀到一篇文章，其意旨是在傳達精確意識到自己目前的心理情緒狀態的重要性。舉例而言，人們在情緒低落時會自己知曉目前狀態不佳，可是有時卻無法以文字或是言語準確描述當下的情緒狀態以及確切原因，只能判斷自己目前就是不太開心。在此情況，若能清楚講出我現在感受到的是低潮、哀傷、又或是內疚等等負面情緒，並能自己識別是此種情緒是因何而起的，即可助於自己脫離當下的負面情緒。我只是突然想到，這應該是我潛意識會想將目前的心理狀態寫在前言的緣由。)
這篇issue主要是要來記錄70道JavaScript的面試題目啊啊啊！！！
本篇內容參考70 JavaScript Interview Questions，好了，正文開始！👉

正文

1. undefined 跟null的差異是什麼？
2. && 操作符的功能是什麼?
3. | | 操作符的功能是什麼?
4. 使用+(一元加法運算符)對於將字串轉換成數字是最快的方式嗎？
5. 什麼是DOM?(補充兩個該問題的延伸問題，請見 71 & 72)
   文件物件模型（Document Object Model）是HTML和XML文件的編程接口。它代表了該網頁頁面，也因此程式可以去更改文件結構、樣式和內容。 DOM將文件以一個個的節點和物件表示。 透過此種方式，程式可以與頁面進行連結。以上內容是參考MDN關於DOM的資訊所做出，不過我覺得這樣的解釋還是難以理解DOM到底所謂何物。我覺得要理解DOM，要從以下問題著手：

1. DOM是誰創建的？
2. DOM是創建給誰用的？
3. 為何需要創建DOM？

DOM是瀏覽器在解析HTML頁面時所創建的一個龐大的物件。
瀏覽器創建DOM是用來給編程語言比方說JavaScript做使用的。
瀏覽器創建DOM，也因此編程語言可以透過DOM去更改頁面上的內容、樣式以及結構。

6. 什麼是事件傳遞(Event Propagation)?(補充一個該問題的延伸問題，詳見73)
   當一個事件發生在某個DOM元素上時，此事件不只僅在該元素上發生，而是會遵守一定的傳遞流程來來觸發相關連元素上的事件。這個傳遞流程就是所謂的事件傳遞。事件傳遞分成3個階段，分別為CAPTURING_PHASE，捕獲階段，即AT_TARGET，事件抵達目標元素的階段，以及BUBBLING_PHASE，冒泡階段。我覺得關於事件傳遞，可以透過回答以下問題裡理解他的作用以及存在的目的。

1. 事件這物件是誰創建的？
2. 為何需要創建事件這物件？
3. 我們為何需要理解事件傳遞？
4. 現已知事件傳遞分成3階段，我們如何得知事件發生在哪一個階段？
5. 我們如何決定事件是在冒泡階段發生，還是捕獲階段發生？
6. 冒泡階段與捕獲階段孰先孰後？

事件是瀏覽器創建的物件，具有多種屬性(property)，好讓我們可以與面前的網頁進行多項互動，比方說滑鼠點擊某個按鈕啊，提交表單啊等等，而事件傳遞的存在讓我們可以決定事件發生的先後順序。事件傳遞的機制也讓事件代理成為可能，運用此特性，我們可以在父層元素上註冊事件監聽器，對子層元素統一進行控管，而不用一一去書寫子層元素在事件觸發後的邏輯處理。

我們可以透過`event.eventPhase`此特性來得知我們目前身處在事件哪個階段，此外我們還可以透過`addEventListener`的第三個參數`isCapture`來決定我們的事件是在冒泡階段發生，還是捕獲階段發生，其預設值為false，意思就說在沒有標明`addEventListener`的第三個參數的情況下，事件都是在冒泡階段發生的。又捕獲階段優先於冒泡階段，其發生順序為：`CAPTURING_PHASE`->`AT_TARGET`->`BUBBLING_PHASE`

7. 什麼是事件冒泡(Event Bubbling)?

8. 什麼是事件捕獲(Event Capturing)?

9. event.preventDefault() 和event.stopPropagation()兩者的差異是什麼?

10. 如何確認event.preventDefault()使用在元素上？

11. 為何以下這段程式碼會拋錯obj.someprop.x?

12. 什麼是event.target ?

13. 什麼是event.currentTarget?
    event.target是事件發生會觸發事件發生的那個元素，不等同於綁定事件監聽器的那個元素，而event.currentTarget就是我們註冊事件監聽器的那個元素！

14. ==& ===的差異是什麼？

15. 在JavaScript中，為何比較兩個相似的物件會返回錯誤值？

16. !! 操作符的功能是什麼?

17. 如何在同一行中計算多個運算式？(How to evaluate multiple expressions in one line?)

18. 什麼是Hoisting?

19. 什麼是Scope?

20. 什麼是Closures?

21. JavaScript裡的假值(falsy values)有哪些？

22. 如何判斷一值為假值還是真值？

23. "use strict"的作用是什麼?

24. 在JavaScript裡，this的值為何?
    基本上，this指的是當前正在執行或調用function的物件。

25. 物件的原型是什麼(prototype)?

26. 什麼是IIFE？其作用為何？

27. Function.prototype.apply 此方法的用途為何?

28. Function.prototype.call 此方法的用途為何?

29. Function.prototype.apply和Function.prototype.call的差異是什麼？

30. Function.prototype.bind 此方法的用途為何?

31. 什麼是函數式編程？JavaScript的哪些特點使其成為函數式語言的候選者？

32. 什麼是高階函數(Higher Order Functions)?

33. 為何functions被稱為第一類物件(First-Class Objects)?

34. 實做出Array.prototype.map方法

35. 實做出Array.prototype.filter方法

36. 實做出Array.prototype.reduce方法

37. 什麼是arguments物件？

38. 如何創建一個沒有原型的物件？

39. 在以下程式碼中，為何b會在調用函數時裡變成全局變數？

40. 什麼是ECMAScript?

41. ES6 或是 ECMAScript 2015所新增的特色為何？

42. var、let 和const的差異為何？

43. 什麼是箭頭函數(Arrow Functions)？
    箭頭函數是ES6語法中新增的一種創建function的方式。在創建過程中無需使用關鍵字function，所以整體上語法更加簡潔。箭頭函數有以下特點：無法存取arguments，所以以下第一行程式會出錯，但是呢，我們可以使用展開rest parameters去獲取所有傳入箭頭函數的arguments。
    箭頭函數的第二個特點是，沒有自己的this。

const getArgs = () => arguments
const getArgs = (...rest) => rest

44. 什麼是Classes?
45. 什麼是Template Literals?
46. 什麼是物件解構賦值(Object Destructuring)?
47. 什麼是ES6 Modules?
48. What is the Set object and how does it work?
49. 什麼是回呼函數(Callback function)?
50. 什麼是Promises?
    Promises是JavaScript標準內建物件，主要是創建來解決Callback function在處理非同步函數所產生的Callback Hell問題。那具體而言，Promises是怎麼解決這個問題的呢？針對我們想要處理的非同步函數，若調用過程沒有出錯，那我們就調用resolve函數，若途中有任何錯誤，我們就調用reject函數，透過此種方式，我們可以清楚知道我們的非同步函數的處理情況。
51. 什麼是async/await，其使用方式為何？
    async/await是一組讓我們可以以更直觀的方式來使用Promises的關鍵字，所以async/await一樣是設計用來處理非同步操作的問題。那具體而言是怎麼辦到的呢？首先，當我們在一個function前面加上了async關鍵字時，我們會使得該函數總是返回一個promise物件，所以說async這關鍵字確保了函數的返回值是一個promise，而await就是只能在asyncfunction裡使用的關鍵字，它基本就是告訴JavaScript引擎等待，直到await右邊的promise狀態完成，然後再以完成的結果繼續下續執行。
52. 展開操作符(Spread operator)跟剩餘操作符(Rest operator)的差異為何？
53. 什麼是預設參數(Default Parameters)?
54. What are Wrapper Objects?
55. What is the difference between Implicit and Explicit Coercion?
56. 什麼是NaN? 以及如何確認一值為NaNand How to check if a value is NaN?
57. 如何確認一值為Array?
    使用Array.isArray方法。
58. How to check if a number is even without using the % or modulo operator?
59. 如何確認某物件裡是否存在特定property?
60. 什麼是AJAX?
    AJAX全名是Asynchronous JavaScript and XML。這是一組可以用來達到非同步展示data的技術
    ，也也就是說，有了這組技術我們可以在不用重新載入前端頁面的前提之下傳送data到server端或從data端拿取資料。
61. JavaScript裡創建物件的方法有哪些？
62. Object.seal和Object.freeze 兩方法的差異為何?
63. in操作符和hasOwnProperty方法兩者間存在何種區別？
64. 在JavaScript中，如何處理非同步程式碼(Asynchronous Codes)？
    Callbacks, Promises, Async&Await或者是其他插件。
65. function expression跟function declaration的差異為何？
66. 存有多少種調用function的方式？
67. What is memoization and what's the use it?
68. Implement a memoization helper function.
69. 為何使用typeof檢查null型別會返回object? 如何檢查一值為null?
70. new關鍵字的作用為何？
71. document跟window的差異為何？
72. React Virtual DOM跟DOM的差異為何？
73. 什麼是事件代理(Event Delegation)？
    透過將事件處理器註冊在父節點以處理子節點的事件，就稱為事件代理。

參考

70 JavaScript Interview Questions