三十一. CSS實現垂直水平居中

實現元素的垂直水平居中是前端開發中的常見需求，主要有以下幾種思路：

1. text-align + line-height實現單行文本水平垂直居中

   • 適用于單行文本元素，通過text-align: center實現水平居中，line-height等于容器高度實現垂直居中

2. text-align + vertical-align

   • 結合父元素的text-align: center和子元素的vertical-align: middle實現居中效果

3. margin: 0 auto

   • 主要用于實現水平居中，配合其他方法可實現垂直居中

4. flex布局

   • 父元素設置display: flex; justify-content: center; align-items: center，簡單高效

5. position定位

   • 父元素相對定位，子元素絕對定位，結合top: 50%; left: 50%; transform: translate(-50%, -50%)

三十二. SCSS/LESS與普通CSS的區別

Sass和Less都是CSS預處理器，旨在增強CSS的功能和可維護性，它們與普通CSS的主要區別如下：

1. 功能增強：提供變量、嵌套、混合、繼承等特性，使CSS編寫更高效
2. 編譯環境：
   • Sass最初需要Ruby環境，現在也有其他編譯方式，屬于服務端處理
   • Less可通過Less.js在瀏覽器端處理，也可在服務端編譯
3. 語法差異：
   • 變量符號不同：Sass使用$，Less使用@
   • Sass支持更復雜的邏輯控制，如條件語句、循環等
4. 文件后綴：Sass文件通常為.scss或.sass，Less文件為.less
5. 輸出方式：都需要編譯成普通CSS才能被瀏覽器識別

三十三. CSS選擇器類型

1. 標簽選擇器：通過HTML標簽名選擇元素，如p { color: red; }

2. 類選擇器：通過元素的class屬性選擇，如.active { background: blue; }

3. ID選擇器：通過元素的id屬性選擇，如#header { height: 100px; }

4. 包含選擇器：選擇特定父元素下的子元素，如div p { margin: 10px; }

5. 通配選擇器：匹配所有元素，如* { box-sizing: border-box; }

6. 分組選擇器：同時選擇多個選擇器，如h1, h2, h3 { font-weight: normal; }

7. 屬性選擇器：根據元素屬性選擇，如input[type="text"] { width: 200px; }

8. 偽類選擇器：選擇元素的特定狀態，如a:hover { color: green; }

9. 偽元素選擇器：選擇元素的特定部分，如p::first-letter { font-size: 2em; }

10. 相鄰兄弟選擇器：選擇緊鄰的兄弟元素，如div + p { margin-top: 20px; }

三十四. 同步和異步的區別

• 同步：

  • 代碼按照順序執行，前一個任務完成后才能執行后一個任務
  • 執行過程中會阻塞后續操作
  • 適用于簡單的、執行時間短的操作

• 異步：

  • 任務執行不阻塞后續代碼的運行
  • 當異步任務完成后，通過回調函數等方式通知并處理結果
  • 執行順序不確定，由任務完成時間決定
  • 適用于耗時操作，如網絡請求、文件讀寫等

三十五. Promise使用方式

Promise是處理異步操作的一種方案，用于解決回調地獄問題：

// 創建Promise對象
const promise = new Promise((resolve, reject) => {// 執行異步操作setTimeout(() => {try {// 操作成功resolve("操作成功的結果");} catch (error) {// 操作失敗reject("操作失敗的原因");}}, 1000);
});// 使用Promise
promise.then(result => {console.log("成功:", result);return "繼續傳遞";}).then(data => {console.log("鏈式調用:", data);}).catch(error => {console.log("失敗:", error);}).finally(() => {console.log("無論成功失敗都會執行");});

三十六. 類數組轉換為標準數組

類數組對象（如arguments、DOM集合）具有數組的length屬性和索引，但沒有數組的方法，轉換為標準數組的方法：

1. Array.prototype.slice.call()

   const arrayLike = { 0: 'a', 1: 'b', length: 2 };
   const arr = Array.prototype.slice.call(arrayLike);
   

2. Array.from()（ES6）

   const arr = Array.from(arrayLike);
   

3. 擴展運算符（ES6）

   const arr = [...arrayLike];
   

三十七. 事件種類

1. 鼠標事件：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout等

2. 鍵盤事件：keydown, keyup, keypress

3. 表單事件：submit, reset, change, input, focus, blur

4. 文檔/窗口事件：load, unload, resize, scroll, DOMContentLoaded

5. 觸摸事件：touchstart, touchmove, touchend（移動設備）

6. 拖放事件：drag, dragstart, dragend, dragover, drop

7. 進度事件：loadstart, progress, load, abort, error, loadend

三十八. jQuery選擇器

1. ID選擇器：$("#myId") - 選擇id為myId的元素

2. 類選擇器：$(“.myClass”) - 選擇所有class為myClass的元素

3. 元素選擇器：$(“div”) - 選擇所有div元素

4. 屬性選擇器：$(“input[type=‘text’]”) - 選擇所有type為text的input元素

5. 后代選擇器：$(“ul li”) - 選擇ul下的所有li元素

6. 子元素選擇器：$(“ul > li”) - 選擇ul的直接子元素li

7. 相鄰兄弟選擇器：$(“div + p”) - 選擇div后面緊鄰的p元素

8. 通配選擇器：$(“*”) - 選擇所有元素

三十九. 框架中的路由理解

路由是前端框架中實現單頁應用（SPA）頁面跳轉的核心機制，主要作用是建立URL與組件之間的映射關系。

• 基本概念：

  • 通過不同的URL路徑，展示不同的組件內容
  • 無需刷新頁面，通過JavaScript動態切換組件
  • 保持頁面狀態，提升用戶體驗

• Vue Router：

  • 配置路由映射關系：路徑 -> 組件
  • 使用<router-link>實現導航，<router-view>展示組件
  • 支持嵌套路由、動態路由、路由守衛等功能

• React Router：

  • 基于組件的路由實現
  • 使用<Route>定義路由規則，<Link>實現導航
  • 支持聲明式和編程式導航

• 核心作用：

  • 實現無刷新頁面切換
  • 提供瀏覽器歷史記錄管理
  • 支持路由參數傳遞
  • 實現權限控制和導航守衛

四十. 實現對象淺拷貝

淺拷貝是指只復制對象的第一層屬性，對于嵌套對象只復制引用：

1. Object.assign()

   const obj = { a: 1, b: { c: 2 } };
   const copy = Object.assign({}, obj);
   

2. 擴展運算符

   const copy = {