臺灣樂天 & 趨勢科技前端工程師面試經驗分享：作業、面試題與重點知識整理

黃韋智

更新於 2025/03/18發佈於 2025/03/18閱讀時間約 3 分鐘

Christopher Gower on Unsplash

台灣樂天 & 趨勢科技前端面試經驗分享

如果你正在準備台灣樂天或趨勢科技的前端工程師面試，這篇文章將分享我的作業內容、面試題目參考，以及一些核心的前端知識點，幫助你更有信心地應對挑戰。

台灣樂天前端面試作業

台灣樂天的作業相對單純，主要分為：

演算法題（LeetCode 題目）
前端作業：實作無限滾動（Infinite Scroll）

如何實作 Infinite Scroll？

無限滾動的關鍵在於 Intersection Observer API，這是一個高效的方式來監測 DOM 元素是否進入視窗範圍，進而觸發加載更多內容的行為。

關鍵步驟

設定 IntersectionObserver 來監聽特定的觸發元素（如列表的最後一個項目）。
當該元素進入視窗範圍時，觸發數據加載邏輯。
更新 DOM，並讓新元素繼續被監聽。

js
複製編輯const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreData(); // 加載更多數據
  }
}, { threshold: 1.0 });

observer.observe(document.querySelector('#loadMoreTrigger'));

趨勢科技前端面試作業

趨勢科技的作業是 實作一個 Date Picker，功能包括：

年、月、日的選擇
與 input field 結合

如何用 React 快速構建 Date Picker？

這裡提供一個簡單的 DatePicker 組件範例：

jsx
複製編輯import React, { useState } from "react";

const DatePicker = () => {
  const [date, setDate] = useState("");

  return (
    <input
      type="date"
      value={date}
      onChange={(e) => setDate(e.target.value)}
    />
  );
};

export default DatePicker;

👉 推薦閱讀

常見前端面試問題 & 重點知識

除了作業，面試中也可能會被問到一些基礎知識，以下是幾個重要的概念及參考資料。

1. HTML 開頭的 `<!DOCTYPE html>` 有什麼作用？

<!DOCTYPE html> 告訴瀏覽器這個是 HTML5 文檔，避免 Quirks Mode（怪異模式），確保標準模式渲染。

2. CSS、JS 應該放在哪裡？

最佳做法：

CSS 應該放在 <head> 內，確保樣式在頁面載入時可用。
JavaScript (<script>) 應該放在 </body> 前，以避免阻塞 HTML 解析，提高性能。

👉 推薦閱讀：JavaScript <script> 應該放在哪裡？

3. CSS 渲染機制

HTML 解析 → 形成 DOM Tree
CSS 解析 → 形成 CSSOM Tree
兩者合併 → 形成 Render Tree
版面配置 (Layout)
繪製 (Paint) → 最終呈現在畫面上

👉 推薦閱讀

4. CSS 權重 (Specificity)

CSS 權重決定了樣式的應用優先級，基本規則如下：

pgsql
複製編輯inline style > ID 選擇器 > Class/屬性/偽類選擇器 > HTML 標籤 > *

👉 推薦閱讀：CSS 權重 (CSS Specificity)

5. JavaScript `let` vs `const`

變數類型可變更作用域

var

✅ 可以重新賦值

函式作用域

let

✅ 可以重新賦值

塊級作用域

const

❌ 不能重新賦值

塊級作用域

👉 推薦閱讀：JavaScript: var, let, const 差異

6. TypeScript 泛型 (Generics)

泛型允許我們在函數或類別中使用 靈活的類型，例如：

ts
複製編輯function identity<T>(arg: T): T {
  return arg;
}

console.log(identity<number>(123)); // 123
console.log(identity<string>("Hello")); // "Hello"

👉 推薦閱讀

7. 自訂 Array `map()` 方法

Array.prototype.myMap 是 map() 方法的自訂實作：

js
複製編輯Array.prototype.myMap = function(callback) {
  let newArray = [];
  for (let i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this));
  }
  return newArray;
};