前端面試問題集-4

Meow Meow Picture

目錄


描述 JavaScript 的 same-origin policy ( 同源策略 )

同源政策是限制不同網域資料的互動

實作如下程式:

duplicate([1,2,3,4,5]);     // [1,2,3,4,5,1,2,3,4,5]

Array-concat

function duplicate(arr) { 
  return arr.concat(arr); 
}

Ternary expression 意思是什麼？

-1;     // unary
1 + 1; // binary

if(conditional) { // one
  truethy_block // two
} else {
  falsey_block // three
}
conditional ? truethy_block : falsey_block;  // ternary

什麼是 "use strict"; ? 使用他的優點和缺點是什麼？

"use strict";
t = "OK";   // t is not defined
缺點：
    大概就是不能這麼彈性使用 JavaScript

建個數到 100 的迴圈，當數字是 3 的倍數時輸出 “fizz”，當數字是 5 的倍數時輸出 "buzz"，當數字同時是 3 與 5 的倍數時輸出 “fizzbuzz”。

for(let i = 0; i <= 100; i++) {
  const str = ";
  if (i % 3 === 0) { str += 'fizz'; };
  if (i % 5 === 0) { str += 'buzz'; };
  if (str.length > 0) { 
    console.log(str); 
  } else {
    console.log(i);
  }
}

為什麼保持網站的全域 ( global scope ) 原樣是一個好做法？

因為全域變數很容易呼叫，容易汙染到環境，如果有共用的全域變數將會導致變數混亂。

為什麼要用 load 事件？

因為 JavaScript 是單執行續，利用 load 事件可以避免單執行續被卡住的困擾，也因為 JavaScript 的 event driven 的關係，可以使得 load 事件變得顯而易見，常常使用。

什麼是 single page app，並怎麼讓它對 SEO 更友善。

單頁應用可以使得使用者體驗變得比較佳，減少畫面轉換與等待的空白與不安感，因為都是透過 JavaScript 來運行時做達成，因而會造成 SEO 困難，所以就得在後端解決這問題，在網頁運行前，將要顯示的必要資訊先產生出結果，在將結果回應到前端網頁頁面中，這需要一番經驗才能體驗，而現代很多的前端單頁應用框架都有給予一個不錯的解決辦法來解決 Server Side Render。

你對 Promises 的經驗？

現在單頁應用幾乎脫離不了 Promise，要等待請求回應與網頁正確渲染就必須要透過 Promise，利用 resolve / reject 與 then / catch 體驗上是好的。

Promises 之於 callbacks 的優劣？

用了 Promises 的優點大於 callback 來的多一些，可以更有條理的撰寫 side effect 程式，當然缺點可能是不習慣的時候，可能看起來不這麼直覺，並且任何的方法都必須要返回一個 Promises 與串接一個 then，但優點好維護與直覺這一定是比較好的。

JavaScript 轉譯器（ transpiler ）的優缺點？

  • 可能必須要學習一門語言
  • 可以利用原本語言的型別或其他優點來更優化 JavaScript 所鬆散的部分

你用什麼工具或技巧來做 JavaScript debug?

console.log

你都用什麼對 object properties 與 array 進行迭代？

  • forEach
  • map
  • reduce

解釋 mutable 與 immutable objects 之間的不同。

  • 舉個 immutable 在 JavaScript 中例子？
  • immutability 的憂劣？
  • 如何達成 immutability？

不可變代表的是參考是不會被變更的
// map 就是一個 immutable 的例子
const arr = [1,2,3];
const arr2 = arr.map(n => n + 1); // [2,3,4];
console.log(arr); // [1,2,3]

缺點就是需要學習並習慣，可能會比較綁手綁腳的感覺。
// Functional Programming 就是一個實現的方法
function map(fn) {
  return function(arr) {
    return arr.reduce(function(curr, next) {
      return curr.concat(fn(next));
    }, [])
  }
}
// map(x=>x+1)([1,2]) // [2,3]

解釋同步（ synchronous ）與非同步（ asynchronous ）函式之間的差異。

「同步」光看字面上就可能把它想成是「所有動作同時進行」，但事實上比較像是「一步一步來處理」的意思。 而「非同步」則是，我不用等待 A 做完才做 B、C，而是這三個事情可以同時發送出去。

// 同步
console.log('1');
console.log('2');
// 1, 2

// 異步
setTimeout(function(){ console.log('1'); }, 0);
console.log('2');
// 2, 1

參考 https://pjchender.blogspot.com/2016/01/javascriptasynchronousevent-queue.html


Event loop 是什麼？

瀏覽器的事件環機制其實就是JS在執行過程中，安排各個任務如何排好隊的機制。

參考 https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/EventLoop


call stack 與 task queue 之間的不同？

我們要先知道 JavaScript 是單執行緒(也叫單線程) single thread 的程式語言，因此一次只能執行一個任務，而 JS 中等待執行的任務會放入一個堆疊，我們叫它為 Call stack。

假如非同步事件會和同步事件都一起放進 Call stack，那麼就會造成阻塞，比如我們發出一個HTTP的請求，那麼在完成回傳 response 之前，就會因為 JS 單執行緒的特性，我們在網頁上都無法進行其它動作。

為了避免這種問題，非同步事件裡的回呼函式 callback function，它們會進入到 Task Queue 裡面，等 Call stack 裡面沒有其它任務才會進入到 Call stack 執行。

參考 https://medium.com/harry-xies-blog/%E4%B8%80%E6%AC%A1%E4%BA%86%E8%A7%A3-js-%E4%B8%AD%E7%9A%84-event-loop-call-stack-%E8%88%87-task-queue-c8041dd8840f


問題：實作符合下面的函式

add(2, 5); // 7
add(2)(5); // 7

參考 https://codepen.io/Keale2/pen/yNZxbZ?editors=1010

function add(a, b) {
  return a && b ? a + b : function (c) { return a + c; };
}

問題：用 for 迴圈建立一個物件

obj.fn1()  // alert(1)
obj.fn2()  // alert(2)
.
.
.
obj.fn10() // alert(10)

Ans：CodePen


JavaScript 取出陣列重複 / 不重複值的方法

參考 https://guahsu.io/2017/06/JavaScript-Duplicates-Array/


輸入 array，回傳只出現一次的數值

Example :

Input: [1, 3, 5, 3, 1], Output: 5

Input: [4, 1, 2, 1, 2], Output: 4


function appearOnce(arr) {
  let num;
  for(let i=0; i < arr.length; i++) {
    num = 0;
    for(let j=0; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        num++;
      }
    }
    if (num === 1) {
      console.log(arr[i]);
    }
  }
}

appearOnce([1, 3, 5, 3, 1])

參考來源

https://h5bp.org/Front-end-Developer-Interview-Questions/translations/chinese-traditional/