Try   HackMD
tags: JavaScript 學習紀錄

Interview Questions

HTML & CSS

  • 什麼是 semantic HTML?
    • 使用HTML標記向瀏覽器和開發人員描述它的含義




// non-semantic elements: Tells nothing about its content.
<div> and <span>
// semantic elements: Clearly defines its content.
<form>, <table>, and <article>

  • 什麼是 box model? CSS 中的 box-sizing 又是什麼?

    • box model: 所有的 HTML elements都可以被想像成一個box, 且box model描述box的design和layout

  • display: inline 和 display: block 的差異?

    • display: inline-> element寬高是多少就是多少,不佔據一整行
    • display: block-> element佔據一整行

  • display: none 和 visibility: hidden 的差異?

    • display: none -> 瀏覽器畫面上隱藏, 並且不佔位置
    • visibility: hidden -> 瀏覽器畫面上隱藏, 但佔位置

  • div 和 span 的差異?

    • div -> 佔據一整行,有margin可用
    • span -> 不佔據一整行,且沒有margin可用

  • px, em, rem 的差異?

    • px -> 絕對單位，代表螢幕中每個「點」( pixel )
    • em -> 相對單位，每個子元素透過「倍數」乘以父元素的 px 值
    • rem -> 相對單位，每個元素透過「倍數」乘以根元素的 px 值
    • % -> 相對單位，每個子元素透過「百分比」乘以父元素的 px 值

  • 試著說明 flex box 的用法








display: flex;
flex-direction: row|column;
justify-content: start|center|end|space-between | space-around;
align-items: stretch (將內容元素撐開至 flexbox 大小)|flex-start|center|flex-end|space-between|space-around| baseline (對齊內容物的基線) (適用於單行容器);
align-self: 針對align-items的個別item做設定;
align-content: stretch (每行內容元素全部撐開至 flexbox 大小);
|center|flex-start|flex-end|space-between|space-around; (無法用於flex-wrap: no-wrap容器)

  • 試著說明 cascade 和 specificity

    • cascade (串接)-> cascade 會使用各元素上屬性的 declared value 的無序列表，透過下面所述的 Cascading 流程，以宣告的優先度從高到低進行排序，並輸出一個 cascaded value：
    1. Origin and Importance
    2. Specificity
    3. Order of Appearance
    • specificity (明確度)-> 定義css時，彼此間元素鎖定衝突的情況，則由明確度(權重)決定, 明確度相同由後者決定, 明確度不同由明確度較高者決定
    1. 行內定義的css => 1,0,0,0
    2. id => 0,1,0,0
    3. class => 0,0,1,0
    4. html元素和虛擬元素 => 0,0,0,1

  • CSS preprocessor:

    • 像是LESS, CSS有巢狀結構或變數繼承, preprocessor可以轉成純CSS, 方便管理

JavaScript

  • null 和 undefined 的差異?
    • null -> 有宣告一個value, 只是這個value是null(空), typeof 是 false
    • undefined -> 有宣告一個value記憶體位置, 但這個記憶體位置沒assign值, typeof 是undefind
  • 什麼是 NaN?在什麼情況下會出現 NaN?如何偵測變數中的資料是 NaN?
































NaN -> not a number
當用非數字做運算時會出現NaN

// isNaN() 函式-> 判斷某個數值是不是 NaN, 會強制將參數轉換成數字, 你可能會想改用在 ECMAScript 6 導入的 Number.isNaN()、或是用 typeof 來判斷某個數值是不是「非數字」（Not-A-Number）。
isNaN(123) //false
isNaN(-1.23) //false
isNaN(5-2) //false
isNaN(0) //false
isNaN('123') //false, 會先轉成數字在判斷
isNaN('Hello') //true, 無法轉成數字的就會是true
isNaN('2005/12/12') //true, 無法轉成數字的就會是true
isNaN('') //false, 會先轉成數字在判斷
isNaN(true) //false, 會先轉成數字在判斷
isNaN(undefined) //true, 無法轉成數字的就會是true
isNaN('NaN') //true, 無法轉成數字的就會是true
isNaN(NaN) //true, 無法轉成數字的就會是true
isNaN(0 / 0) //true, 無法轉成數字的就會是true

// Number.isNaN() 函式-> 確定傳遞的值是否為NaN和其類型是Number, 它是原始的全局isNaN()的更強大的版本
Number.isNaN(123) //false
Number.isNaN(-1.23) //false
Number.isNaN(5-2) //false
Number.isNaN(0) //false
Number.isNaN('123') //false
Number.isNaN('Hello') //false
Number.isNaN('2005/12/12') //false
Number.isNaN('') //false
Number.isNaN(true) //false
Number.isNaN(undefined) //false
Number.isNaN('NaN') //false
Number.isNaN(NaN) //true, 是isNaN()加強版, 只有NaN與不是數字的數字才會是true
Number.isNaN(0 / 0) //true, 是isNaN()加強版, 只有NaN與不是數字的數字才會是true
  • 解釋 Primitive 和 Reference Data Type 的差別?
    • js可以自動garbage collection回收記憶體位置














// Primitive: 原始型態（非物件）
Primitive Type 又可以再細分成六種：
undefined
null：typeof是object但又是call by value
string
number
boolean
symbol (ES6): 很少使用

// Object: 物件型態 
而非以上六種的類型，就是物件類型 Object Type ：
Function
Array
Date
  • 使用 var, let, const 宣告變數有什麼差別?
































// var -> 宣告的scope是屬於函數內的, 且可以重複宣告, 如：
function printV3(){
  if(true) {
    var v = 2
  }
  console.log(`printV3:`, v)
}
printV3() // => pritnV3: 2

function printV2(){
  var v = 2
  var v = 3
  var v = 4
  console.log(`printV2:`, v)
}
printV2() // "printV2:" 4

// let -> 宣告的scope較var小是屬於block內的, 不可以重複宣告, 但可被覆蓋
function printL3(){
  if(true){
    let l = 3 // 宣告在block內
  }
  
  try {
  　console.log(`printL2:`, l) 
  } catch {
    console.log(`can't find l in printL3`) // 在block就抓不到value
  }
}
printL3() // => can't find l in printL2

// const -> 常數, 宣告的scope與let相同在block內,不可重複宣告也不可被覆蓋
  • 什麼是 Closure?能否舉例說明?
    • 閉包 (Closure): 是一種函式, 此函式可以存取外層變數，以及函式可以作為回傳值, 進而「保留」環境。


































// example1
function sayHi() {
  let name = "John";
  function displayName() {
    console.log(name);
  }
  displayName();
}
sayHi();

// example2
function makeSayHi() {
  function sayHi() {
    console.log("John");
  }
  return sayHi;
}

const sayHi = makeSayHi();
sayHi(); // John

// example3
function makeFunc() { // 1
  let name = "John" // 2
  function displayName() { // 3
    console.log(name);
  }
  return displayName; // 4
}

let func1 = makeFunc(); // 5
func1();
// 在JavaScript中，即使在外層區塊已經回傳的狀況下，只要內層區塊還保留著一份參考，那麽外層區塊的環境不會隨著回傳而消失，我們依然可以存取外層環境中的變數。
// 以這個例子來說，雖然 makeFunc() 回傳了，但是因為我們還保留著一份 displayName 的參考（存在 func1 變數裡），所以 JavaScript 會在記憶體中為我們繼續保留 displayName 所在的環境，包含 name 變數等，所以我們可以繼續存取 name 變數。
  • 試說明 hoisting 的現象?
    • hoisting(提升)：先宣告再執行, 幫你留位子的意思
      Javascript 在執行任何程式碼之前，先把宣告的變數和函式放進記憶體空間裡，就像是事先幫他們留個位子的感覺。
    • undefined 跟 is not defined 是不一樣的錯誤，undefined 的意思是「我不知道他的值是多少」，is not defined 是「未宣告」的意思，Javascript 給已宣告未賦值的變數或是函數的預設值都是 undefined

















//example
var a;
console.log(a); // undefined
a = 1;

//example
callMe('emma');  // hello emma
function callMe(name){
  console.log('hello '+name);
}

// example
console.log(myName);           // undefined
myName('emma');                // myName is not a function
var myName = function(name){
  console.log('i am + name);
}

  • 什麼是 this?

  • 什麼是 pure function?

    • 將相同的輸入丟入，永遠都會回傳相同的輸出，並且不對任何該函數以外的任何作用域產生影響

  • 什麼是 higher-order function?

    • input是函式 or 輸出是函式的function稱作higher-order function

  • 什麼是非同步?如何運用 callback 或 promise 或 async/await 包裝非同步程式?

    • 同時可以做很多件事情，不需要等到前一件事情做完才做下一件事情
















// async/await
const getApiToken = async () => {
const token = await api.finMindLogin();
return token;
};

// promise
const signIn = (email, password) => new Promise((resolve, reject) => {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const { user } = userCredential;
      resolve(user);
    }).catch((error) => {
      reject(error.code);
    });
});

  • 有寫過箭頭函式嗎?箭頭函式和其他函式的寫法除了語法之外，還有什麼差異?(特別是 this 的差異)

    • arrow function的this指的是父層的this

  • 解釋一下你對原型鍊的理解?

    • 指的是Prototype, 用以繼承函式與屬性

  • == 和 === 的差別?

    • ==: 轉成同一類型後的值" 看"值" 是否相等
    • ===: type不同就不同

  • 請解釋 deep copy 與 shallow copy 的差異?

    • deep copy: 原始物件資料與複製物件資料「完全獨立」，沒有任何一層資料指向相同的地址。
    • shallow copy: 原始物件資料與複製物件資料「並非完全獨立」，可能第一層就有指向相同地址的資料，也可能第二層才有指向相同地址的資料。

Browser & Network

  • 試說明事件傳遞(event propagation)的流程?

    • 先捕獲(CAPTURING_PHASE)，再冒泡(BUBBLING_PHASE)

  • 試說明事件物件(event object) target 和 currentTarget 的差別

    • e.currentTarget：指的是綁監聽事件的物件
    • e.target：指的是實際觸發事件的物件

  • 什麼是 RESTful API，能否分享你串接 RESTful API 的經驗?

    • 語義化的API能看出要對什麼資料、進行什麼操作 (ex: get, post, put, delete)

  • HTTP 和 websocket 有什麼不一樣?

    • websocket: 瀏覽器和伺服器只需要完成一次交握，兩者之間就可以建立永續性的連接，並進行雙向資料傳輸。
    • HTTP: 是單向傳輸, client發出request, server回response, 不支持永久連接

  • 什麼是 cookie?試說明 cookie 的運作方式?

    • 儲存在使用者電腦上的小檔案，協助儲存所造訪網頁上的偏好和其他資訊

  • 什麼是 web storage?和 cookie 有什麼差別?

    • web storage有兩種：sessionStorage 與 localStorage

      • cookie → 可設定失效時間，預設式瀏覽器關閉失效 / 容量4k / 佔網路流量 會被攜帶在http中與Sever 溝通
      • sessionStorage → 瀏覽器或單一分頁分頁關閉就會清除 / 容量5mb / 不參與Sever 溝通
      • localStorage → 不會過期，手動清除 / 容量5mb / 不參與Sever 溝通

    • 補充：

      • sessionStorage: 在新分頁或新視窗中開啟連結時，用戶端程式將會為新開啟的視窗建立一個新會期(session)，每一個會期代表一組獨立的可用資源。而 sessionStorage 就是歸屬於會期管理的資料項目。這表示每個視窗都會有自己的 sessionStorage ；不同視窗的 sessionStorage 就是不同的內容。另一方面，當網頁視窗關閉時，表示這個會期結束了，故此會期內的 sessionStorage 也會被刪除。使用者下次再開啟此網頁時，sessionStorage 的內容將會重新開始。就此特性來看，sessionStorage 只適合用於儲存暫時性資料
      • localStorage: localStorage 的持續時間與存在範圍與 Cookie 類似。它的持續時間由程序員自行指定，不會隨著瀏覽器關閉而自動終止。它的存在範圍遵循相同來源政策(The Same Origin Policy)，同一個網站的所有網頁都會使用同一個 localStorage

  • event delegation好處與限制？

    • 好處：將事件綁在parent就不用把事件綁在每個child上, 減少事件綁定
    • 限制：如果child停止傳遞就無法使用了

  • stopPropagation 或 stopImmediatePropagation?

    • 前者只會防止目前 Dom Tree 的上一層事件，後者則是會防止全部 Dom Tree 事件










$("p").click(function(event){
  event.stopPropagation();
});
$("p").click(function(event){
  alert('test');
});
$("div").click(function(event){
  alert('test');    
});
// 執行過後，你會發現點選該區域只會跳出一個 alert 視窗，如果把 event.stopPropagation() 換成 event.stopImmediatePropagation() 則完全不會跳出 alert 視窗。

  • 如何知道一個語法功能否相容於所有瀏覽器?如何處理跨瀏覽器的問題?

    • 用 can i use查詢語法支援的瀏覽器及版本: https://caniuse.com/
    • 補充: Babel、CSS preprocessor(可以針對不同瀏覽器幫你添加前綴詞，並巢狀編寫CSS，使用變數，函數，for 迴圈、判斷式…等JS的語法)

  • 試著說明從瀏覽器上輸入網址並搜尋會發生什麼事?

    • 對瀏覽器server發出request, 然後server回response且瀏覽器解析

React

  • 什麼是 virtual DOM?

    • Virtual DOM，中文翻譯叫做虛擬 DOM，顧名思義，他不是一個真正的 DOM, 是一個 JavaScript 的物件，存在在 memory 當中, 前端框架在設計與實作上，會先將原本的 DOM 結構複製一份出來，但不會完整複製 DOM 當中的所有資訊。每當有事件產生，或是資料變動的時候，前端框架會先建立一個新的 virtual DOM，接著，計算出新舊 virtual DOM 之間的差別，最後才會操作真正的 DOM，並僅僅操作有變動的部分，藉此避免不必要的 reflow 或 repaint 以提升效能, 而這個過程就叫reconciliation「和解」或「調停」、「重新建立關係」的意思。

  • 試說明 props 和 state 的差異?

    • props是父層傳給子層的value
    • state是component內暫存value

  • 試說明 class component 的生命週期?

    1. Mount：初始化階段（只執行一次)
      • constructor
      • getDerivedStateFromProps
      • render
      • componentDidMount
    2. Update：組件更新階段
      • getDerivedStateFromProps
      • shouldComponentUpdate
      • render
      • getSnapshotBeforeUpdate
      • componentDidUpdate
    3. Unmount：組件卸載階段（只執行一次)
      • componentWillUnmount

  • 什麼是 props drilling?如何解決這樣的問題?

    • 曾曾曾祖父的值要傳到孫子, 需要一直傳下去
    • 用useContex provider state 給所有子層或子孫曾都可以使用到values, 不用靠props一層層傳下去

  • 什麼是 react router 嗎?react router 是想解決什麼樣的問題?

    • 路由
    • 實現SPA：
      • 把所有資料都放在同一個頁面，不需要換頁，使用者可以在單一頁面裡瀏覽全部內容，也就是說只會有一個index.html 檔
      • 透過 AJAX 技術，client 可以向 server 發出非同步請求，索取局部內容的資料進行抽換，降低每次請求與回應的資料量，提高瀏覽速度

  • 有使用過任何 react 相關的套件嗎?你如何選擇以及如何使用?

    • canvasJS, 看doc文件使用

  • 解釋 useEffect 的用法

    • render component時執行一次, 或是dependence改變再重新執行, 又或是沒有[]時一直執行

  • 解釋 useReducer 的用法

    • dispatch action, update state

  • 解釋 useCallback 的用法

    • 記住function, 希望function只宣告一次或是dependence改變再重新宣告

  • 解釋 useMemo 的用法

    • 記住value, component內有複雜的計算, 希望計算的值只計算一次或是dependence改變再重新計算

  • 解釋 memo 的用法

    • 希望render父層的時候子層的component不要render時用memo

  • 什麼時候會用到 key? 為什麼需要?

    • 用map render item的時候, 需要標記item讓user可以對item操作

  • context:主要是為了解決props要一層一層傳遞

    • 放在父層, 有使用到的child會re-render

  • react vs react dom

    • react:主要核心功能
    • react dom: 實際真的去操作更新 dom

  • useEffect vs useLayoutEffect

  • module, script, script type=module有什麼差異？

    • module: 在module裡面宣告的變數只有module可以用
    • script: 裡面的變數全域都可以拿到
    • script type=module:
      • script type=module只能透過server打開, 不能用http打開
      • type=module會自動是stric mode

Code Quality

  • 什麼是 eslint?有沒有設定過 eslint config 的經驗?

    • 解決關於程式碼品質和程式碼風格的問題

  • 什麼是 refactor?你怎麼做 refactor?

    • 重構是不影響城市功能的情況下優化程式碼
    • 把程式碼做優化重複的code抽出來, function參數控制在3個以內, 讓程式碼好維護好閱讀

  • 知道 git flow 嗎?你如何在開發過程中使用 git 做版本控制?

    • 開發流程, master, develop, feature1 2 3, hot-fix

  • git merge 和 git rebase 有何差別?

    • git merge
      • pros: 紀錄非常詳盡，有助於了解每次合併發生的方式和時間的完整歷史, 很容易發現錯誤並解決它們
      • cons: 導致笨拙的歷史記錄, 不是很人性化
    • git rebase
      • pros: 紀錄是線性的
      • cons: 無法追蹤提交在目標分支上合併的時間和方式

  • 怎樣是好的 commit message?如何整理自己的 commit?

    • 清楚描述做的事情
    • 盡量清楚描述做的事情, commit要做的事情切乾淨
Last changed by 
 
Emmacheng
0
153

Read more

網頁開發流程討論事項

軟體開發流程必須要大家有一個共識, 要不然barry會一直用硬體的思維去思考軟體開發, 這樣會一直重工or先後順序不對 軟體界資深的朋友討論, 他們都一致認為我們公司是硬體廠思維, 沒有軟體開發思維很有問題一定要調整 帶領公司從硬體轉到軟體思維, 這會有一個陣痛期, 昨天跟資深軟體工程師討論他們公司的狀況, 不瞞你說他們是科技硬體大廠, 他們也要做軟體轉型, 他們公司投資在轉型這件事已經10年了, 他們的優勢是他們資金夠大可以慢慢調整, 但缺點是因為太大所有轉型雜音很多備受質疑, 但達翔的優勢在於公司規模為中型, 所以調整可以比大型公司較快較有彈性, 但缺點是資金要用在轉型可能資源會比大型公司來得少, 也是因為這樣我想知道barry了解這些背後資源運用跟轉型的痛點到什麼程度？還是說他了解跟實際層面的有落差 畫面的東西沒有跟RD討論就修改, 也不知道對不對的做法會有做白工與溝通上的問題不斷地產生 這點必須要跟PM溝通清楚 修改前會跟RD討論再修改 PM外出事務太多會有無法真實討論畫面問題, 需要與PM討論都找不到人, 並希望PM統一修改畫面而不是大家分著畫, 這個問題點會有多頭馬車，亂掉的問題, PM要明確列表告知RD修改的部分(分成幾點項目這樣), 可以節省掉RD要全部再重新看過設計稿修改也容易造成沒注意到的修改部分(WEI)

Feb 21, 2023
Typescript tutorial

youtube教學 Compiling TypeScript tsc filename.ts: 將ts檔 Compiling to TypeScript, 每次修改完code都要執行一次才會重新 Compiling tsc src/filename.ts: 如果檔案不在目前terminal所在路徑, 可以再加src路徑, 作用同上 tsc filename.ts -w: 修改完code 會即時將ts檔 Compiling to TypeScript, 可console看即時更新結果 Type Basics 2~6 //string, number, boolean let name:string;

Feb 4, 2023
google map api discussion

服務收費, 每月免費200美金, 超過收費, 信用卡扣款計費方式 路線: 每秒查詢 50 次, Google 地圖平台用量限制 google map aip demo 起始, 終點, 中間增加景點, 自行車模式, 匯入其他人的路徑(array), 匯入會不會有不一樣的路線, 開始導航按鈕, 導航路徑像左轉向右轉前面多遠要爬坡 爬坡路線有幾公尺 爬到一半剩幾公尺 2023/1月開始開發, 2023/6月完成 功能 點擊map取得點擊位置 標上圖釘

Dec 23, 2022
咪咪養胃

menu &#x5357;&#x74DC;&#x6FC3;&#x6E6F; &#x7092;&#x9752;&#x6912; &#x7092;&#x8C46;&#x82BD;+&#x80E1;&#x863F;&#x8514; &#x5C0F;&#x9EC3;&#x74DC; &#x99AC;&#x9234;&#x85AF;&#x6CE5; &#x828B;&#x982D; &#x8304;&#x5B50; &#x71D9;&#x7687;&#x5BAE;&#x83DC;

Nov 11, 2022
Read more from Emmacheng
Published on HackMD