JavaScript 常見面試分群

基本概念

回顧：第 1 天：JavaScript 概述與環境配置

• 什麼是 JavaScript？它的主要用途是什麼？
  ☞ JavaScript 是一種高階解釋性程式語言，用於建立互動式網頁，主要特性是動態類型、基於原型的物件導向、一流函數和詞法作用域是 JavaScript 的一些關鍵特性。

• JavaScript 中的事件循環是什麼？
  ☞ 事件循環是 JavaScript 中處理非同步操作的機制。它不斷檢查呼叫堆疊和任務佇列，當堆疊為空時將函數從佇列移動到堆疊。

變數和數據類型⭐⭐⭐⭐⭐

回顧：第 2 天：基本語法和資料類型

• JavaScript 中有哪些基本數據類型？
  ☞ JavaScript 有六種基本資料類型：string、number、boolean、null、undefined 和 symbol(在 ECMAScript 6 中新增)；Object 也是一種資料類型，包括數組和函數。

• var、let 和 const 的區別是什麼？
  ☞ var 是函數作用域，let 和 const 是區塊作用域。 var 變數可以重新宣告和更新，let 變數可以更新但不能重新聲明，const 變數不能更新或重新宣告。

• 什麼是 JavaScript 的類型轉換？
  ☞ JavaScript 是一種動態類型的語言，這意味著變量的類型可以在運行時改變。類型轉換通常分為兩類：隱式轉換和顯式轉換。隱式轉換在運算過程中，JavaScript 自動將某個值轉換為另一種類型，例如在數字和字符串之間進行運算 console.log('5' + 3); // 8；顯式轉換是指程序員使用函數明確地將一種數據類型轉換為另一種。

• == 和 === 運算子有什麼差別？
  ☞ == 在類型強制之後檢查值是否相等，而 === 在沒有類型強制的情況下檢查值是否相等，也稱為嚴格相等。

作用域和閉包

回顧：第 18 天：閉包與作用域

• 什麼是作用域？
  ☞ 作用域是指變量、函數和對象可訪問的範圍。全局作用域 Global Scope 可以在代碼的任何地方訪問；函數作用域 Function Scope 只能在該函數內部訪問，外部無法訪問；區塊作用域 Block Scope ES6 引入了 let 和 const，使得變量可以在區塊塊（如 if 語句或 for 循環）內部聲明，從而實現區塊作用域；作用域鏈 Scope Chain JavaScript 會首先在當前作用域中查找，如果找不到，就會向外層作用域（父作用域）查找，直到全局作用域，這個過程稱為作用域鏈；立即執行函數表達式 IIFE 在聲明時立即執行，並且具有自己的作用域。

• 解釋閉包的概念和使用情境。
  ☞ 閉包是在另一個函數（外部函數）內部定義的函數，並且可以存取外部函數的變數，自己可以存取自己的作用域、外部函數的作用域和全域作用域。

函數和 this 關鍵字⭐⭐⭐⭐⭐

回顧：第 17 天：關於 this 這件事

• this 在不同上下文中如何工作？
  ☞ this 指的是函數或方法所屬的對象，取決於函數的呼叫方式。它可以根據函數的呼叫方式更改其值。

• 什麼是建構子函數？如何使用它？
  ☞ 物件建構函式為給定值建立物件包裝器。如果是 null 或 undefined，會建立並傳回一個空物件。否則，它將傳回與給定值對應的類型的物件。

• JavaScript 中函數的幾種調用方式有什麼？
  ☞ 普通函數調用，直接呼叫就可以啟用；方法調用，當函數作為對象的方法時，這樣調用會將該對象作為 this；構造函數調用 new 關鍵字調用函數時，該函數會成為構造函數，this 指向新創建的對象；使用 call 和 apply；箭頭函數調用，但是不會綁定自己的 this，而是從外部作用域繼承 this。

異步程式設計⭐⭐⭐⭐⭐

回顧：第 9 天：非同步程式設計 - Promises、第 10 天：非同步程式設計 - async/await

• 什麼是 callback function？
  ☞ 回調函數是作為參數傳遞給另一個稍後執行的函數的函數，通常用於非同步程式設計、事件處理和函數式程式設計。

• 解釋 Promise 的基本概念和使用方式。
  ☞ Promise 是 JavaScript 中用於處理異步操作的一種對象。它提供了一種更直觀的方法來處理異步代碼，特別是相比於傳統的回調函數；Promise 可以在非同步操作完成時獲取結果，並且能夠避免回調地獄 callback hell 問題。

• async 和 await 的作用和用法是什麼？
  ☞ async/await 是一種語法糖，用於以類似同步的方式編寫非同步程式碼；非同步函數傳回一個承諾，並且可以在非同步函數內部使用await來暫停執行，直到承諾得到解決。

ES6 特性

回顧：第 6 天：ES6 新特性 - 解構賦值與範本字面量

• 解構賦值是什麼？如何使用它？
  ☞ 可以從數組或對象中提取值並賦值給變量。

• 什麼是箭頭函數？與傳統函數有什麼不同？
  ☞ 箭頭函數是在 JavaScript 中編寫匿名函數的簡潔方法；與傳統函數表達式相比，它們的語法更短，並且不綁定自己的 this、arguments、super 或 new.target。

模組化

回顧：第 8 天：模組化程式設計

• 什麼是 JavaScript 模組化？
  ☞ JavaScript 模組化是一種將代碼分割成可重用的獨立模組的方法；在模組化的系統中，每個模組通常是一個獨立的文件，包含特定的功能或數據。模組可以導出其內部的變量、函數和類，並且可以從其他模組中導入所需的功能；ES6 模組 ESM 使用 import 和 export 來導入和導出模組。

• 如何在 Vue.js 中使用組件模組化？
  ☞ 建立 component 在需要使用的檔案用 import 引入，當然也可以使用插槽 slot 在組件中插入動態內容，這樣可以使組件更加靈活。

性能優化

回顧：第 13 天：2024 年 JavaScript 新特性 - 性能優化

• 如何優化 JavaScript 的性能？
  ☞ 減少 DOM 操作、避免全局變量可以減少查找時間、優化迭代，在某些情況下，使用 for 循環比 forEach 或其他迭代方法更快；減少請求次數，將多個 API 請求合併成一個請求，減少網絡延遲，在可能的情況下，考慮使用服務端渲染（SSR）來提高首屏加載速度；盡量透過 CSS 而不是 JavaScript 進行動畫，減少 DOM 操作。

• 如何實現懶加載和代碼分割？
  ☞ 懶加載，只在需要時加載資源，以提高初始加載性能；代碼分割，將代碼分成小塊，根據需要進行加載，減少首次加載的大小。

錯誤處理

回顧：第 9 天：非同步程式設計 - Promises、第 10 天：非同步程式設計 - async/await

• 如何在 JavaScript 中處理異常？
  ☞ 在 JavaScript 中，處理異常主要依賴於 try...catch 語句，這是一種用於捕獲和處理錯誤的標準方法。

• try...catch 的使用方式是什麼？
  ☞ try 放置可能會拋出錯誤的代碼；catch 用於捕獲和處理錯誤，可以獲取到錯誤對象。

• 如何處理 Promise 錯誤？
  ☞ 可以使用 .catch() 方法來捕獲任何在 Promise 執行過程中發生的錯誤；如果有多個 Promise 串聯在一起，也可以在鏈的末尾使用 .catch() 來捕獲整個鏈中的任何錯誤。

安全性 -> 這個挺少看到

回顧：第 26 天：安全最佳實踐

• 什麼是跨站腳本攻擊 XSS ？如何防範？
  ☞ XSS 是一種常見且危險的安全攻擊，可能導致數據洩露和用戶受損。通過正確的輸入驗證、輸出編碼、HTTP 請求標頭、避免內聯腳本以及保持軟件更新，可以有效防範這種攻擊。

• 什麼是跨站請求偽造 CSRF ？如何防範？
  ☞ CSRF 攻擊是一種利用用戶身份執行未經授權操作的漏洞。通過使用 CSRF 令牌、檢查請求來源、限制請求方法以及進行二次確認，可以有效防範 CSRF 攻擊。

JavaScript 常見的資料整理邏輯

Pascal triangle 巴斯卡三角形⭐⭐⭐⭐⭐

    1
   1 1
  1 2 1
 1 3 3 1
1 4 6 4 1

🍀 構想：前後都要一個 1，所以個函數是讓使用者輸入要多高，然後在最外層的迴圈先給前後 1，在內層做計算，最後再拼湊湊拼變成一列要的樣子。

function generatePascalsTriangle(rows) {
    const triangle = Array.from({ length: rows }, () => Array(rows).fill(0));

    for (let i = 0; i < rows; i++) {
        triangle[i][0] = 1; // 每行的第一個元素
        triangle[i][i] = 1; // 每行的最後一個元素

        for (let j = 1; j < i; j++) {
            triangle[i][j] = triangle[i - 1][j - 1] + triangle[i - 1][j]; // 計算中間元素
        }
    }

    // 打印三角形
    for (let i = 0; i < triangle.length; i++) {
        console.log(" ".repeat(triangle.length - i - 1) + triangle[i].slice(0, i + 1).join(" "));
    }
}

generatePascalsTriangle(5);

Fibonacci 斐波那契數列
🍀 構想：斐波那契數列就是一開始是 0, 1，第三個就是第一個加第二個值變成 0 + 1 = 1，第四個就是第二個加第三個值變成 1 + 1 = 2...

function fibonacci(n) {
  const fib = new Array(n);
  fib[0] = 0;
  fib[1] = 1;

  for (let i = 2; i < n; i++) {
    fib[i] = fib[i - 1] + fib[i - 2];
  }

  return fib;
}

console.log(fibonacci(10));      // [0,1,1,2,3,5,8,13,21,34]

字串反轉
🍀 構想：字串轉陣列候用陣列方法處理

const reverseString = (str) => [...str].reverse().join("");

console.log(reverseString("上上下下左左右右"));      // "右右左左下下上上"

奇數偶數分群
🍀 構想：用 2024 年的新方法分群

Map 物件是鍵值對的集合，其中鍵可以是任何類型。它允許您基於鍵存儲和檢索數據，並保留元素的插入順序。

const data = [1, 2, 3, 4, 5, 6];

const separateOddEven = Map.groupBy(data, (n) => (n % 2 === 0 ? "even" : "odd"));

console.log(separateOddEven.get("even"));      // [2, 4, 6]
console.log(separateOddEven.get("odd"));       // [1, 3, 5]

const data = [1, 2, 3, 4, 5, 6];

function separateOddEven(numbers) {
    const oddNumbers = numbers.filter(num => num % 2 !== 0);
    const evenNumbers = numbers.filter(num => num % 2 === 0);
    
    return { oddNumbers, evenNumbers }; // 返回物件
}

刪除重複索引
🍀 構想：用 ES6 的方法直接過濾

Set 物件是唯一值的集合，其中每個值只能出現一次。它提供了添加、刪除和檢查元素是否存在的方法。

const data = [1, "star", 2, 3, 4, "star", 5, 6, 5, 4, 3, "star"];

const uniqueData = [...new Set(data)];

console.log(uniqueData);      // [1, 'star', 2, 3, 4, 5, 6]

JavaScript 學習資源

線上學習資源

• MDN：提供全面的 JavaScript 和 Web 技術文檔，是學習和參考的重要資源。
• JavaScript.info：提供深入的 JavaScript 教學和示例，涵蓋了從基本到進階的所有主題。
• 六角學院：提供資源完善且一對一 code review 和疑問解答。

書籍

• 帶你無痛提升JavaScript面試力：一本經典的 JavaScript 教學書籍，涵蓋了從基本概念到進階技巧。
• 8 天重新認識 JavaScript：個人認為初學者很適合閱讀的一本書，內容涵蓋很多知識點，但是如果需要範例解說詳細些，還是推薦上一本書較適合。(國家電子圖書館可以借閱電子書)

練習

• codewars：很多人推薦 leetcode 刷題，個人在學習過程承蒙六角校長洧杰啟發，個人偏好這個刷題平台，只是等級刷到 5 以後要升等，檢測方法會確認效能和速度判定有沒有通過考驗，這裡會很受挫！