軟體工程師職涯升級計畫啟動！立即預約職涯諮詢、履歷健檢或模擬面試👈，為您的加薪做好準備！
台灣樂天 & 趨勢科技 前端面試經驗分享
如果你正在準備台灣樂天或趨勢科技的前端工程師面試，這篇文章將分享我的作業內容、面試題目參考，以及一些核心的前端知識點，幫助你更有信心地應對挑戰。
台灣樂天前端面試作業
台灣樂天的作業相對單純，主要分為：- 演算法題（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'));
👉 推薦閱讀：認識 Intersection Observer API：實作 Lazy Loading 和 Infinite Scroll
趨勢科技前端面試作業
趨勢科技的作業是 實作一個 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;
👉 推薦閱讀
- Build a Date Picker in 15mins Using JavaScript/React from Scratch
- How to build a custom datepicker with React
常見前端面試問題 & 重點知識
除了作業，面試中也可能會被問到一些基礎知識，以下是幾個重要的概念及參考資料。
1. HTML 開頭的 <!DOCTYPE html> 有什麼作用？
<!DOCTYPE html> 告訴瀏覽器這個是 HTML5 文檔，避免 Quirks Mode（怪異模式），確保標準模式渲染。
👉 推薦閱讀：HTML 第一行 DOCTYPE「文件類型」對 CSS 是必要的
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;
};
結論
這篇文章分享了台灣樂天和趨勢科技的前端面試經驗，包含作業內容與常見的面試題。如果你正在準備前端面試，這些資訊應該能幫助你更有信心地應戰！🚀
如果你覺得這篇文章有幫助，請分享給你的朋友，或者在留言區討論你的面試經驗！🎯
👉 更多前端面試攻略，歡迎訂閱我的部落格！ 💡
