寫在前面：面經只是記錄博主遇到的題目。每題的答案在編寫文檔的時候已經有問過deepseek，它只是一種比較普世的答案，要學得深入還是靠自己
Q：三欄布局的實現方式（圣杯模型）如何實現
A：
/* 整個 */.container {display: grid;grid-template-columns: 200px 1fr 200px;}
或
/* 整個 */.container {display: flex;}.left,.right {width: 200px;}/* 中間那個 */.main {flex: 1;}
Q：盒子模型
<html>
<div id="content-box" class="box">content-box</div>
<div id="border-box" class="box">border-box</div>
<style>.box {width: 100px;height: 100px;padding: 20px;margin: 10px;border: 5px solid red;background: blue;color: #fff;}#content-box {box-sizing: content-box;}#border-box {box-sizing: border-box;}
</style>
</html>
中，兩種box-sizing藍色區域大小分別是多少
A：
content-box：默認模式，寬高100只包含內容。150盒子含有20 margin，藍色是140×140
border-box：寬高100包含內容、padding、border。100盒子含有20 margin，藍色是90×90
Q：js 事件循環機制
setTimeout(() => console.log(1))new Promise(function (resolve) {console.log(2)for (let i = 0; i < 10000; i++) {if (i == 9999) resolve()}console.log(3)}).then(() => console.log(4))console.log(5)
以上代碼輸出順序是？
A：
調用棧 console.log(2)，for是同步代碼console.log(3)，console.log(5)
微任務隊列 then(() => console.log(4))
宏任務隊列 setTimeout(() => console.log(1))
結果為：2 3 5 4 1
Q：Vue響應式如何實現
A：
V2: Object.defineProperty，對象屬性劫持
V3: Proxy，代理整個對象
Q：js有什么基本類型
A：
基本類型：Number，String，Boolean，Undefined，Null，Symbol，BigInt。
引用類型：Object，Array，Function等。
Q：如何判斷兩個對象是否完全相等
A：
JSON.stringify(obj1) === JSON.stringify(obj2)
Q：如何遍歷對象的鍵值對
A：
// 法一
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {console.log(key, obj[key]);
}
// 法二
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
keys.forEach((key) => {console.log(key, obj[key]);
})
// 法三
const obj = { a: 1, b: 2, c: 3 };
const keys = Reflect.ownKeys(obj);
keys.forEach((key) => {console.log(key, obj[key]);
})Q：Vue3使用Proxy，那么Proxy有什么缺點
A：瀏覽器兼容不好，性能開銷大，調試復雜性，代碼更復雜，內存占用，===比較失敗
Q：vue中，如果大量后端數據異步回來，如何處理
A：web workers處理密集型計算
// 主線程
const worker = new Worker('data-processor.js');
worker.postMessage(largeData);
worker.onmessage = (e) => {const processedData = e.data;// 更新UI
};// data-processor.js
self.onmessage = (e) => {const result = heavyComputation(e.data);self.postMessage(result);
};
Q：手撕代碼，js寫出promise底層實現
A：
function MyPromise(executor) {// 初始化狀態和結果和回調函數數組this._state = 'pending';this._value = undefined;this._callbacks = [];// 定義函數const resolve = (value) => {if (this._state === 'pending') {this._state = 'fulfilled';this._value = value;this._callbacks.forEach((callback) => {callback.onFulfilled(value);});}};// 定義函數const reject = (reason) => {if (this._state === 'pending') {this._state = 'rejected';this._value = reason;this._callbacks.forEach((callback) => {callback.onRejected(reason);});}};// 執行executor，傳入兩個函數try {executor(resolve, reject);} catch (error) {reject(error);}
}MyPromise.prototype.then = function (onFulfilled, onRejected) {if (this._state === 'fulfilled') {onFulfilled(this._value);} else if (this._state === 'rejected') {onRejected(this._value);} else if (this._state === 'pending') {this._callbacks.push({onFulfilled,onRejected,});}
};const promise = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('Hello, World!');}, 1000);
});promise.then((value) => {console.log(value); // Output: Hello, World!},(error) => {console.error(error);}
);
Q：平時開發，CSR和SSR用哪種
A：
Vue支持CSR也支持SSR
CSR：在瀏覽器中動態生成HTML，開發簡單，直接用vue-cli，SEO不友好
常用：純Vue，React，Angular，靜態站點生成，后臺管理系統
SSR：SEO友好，服務器壓力大，開發復雜度高，需要處理node.js環境
常用：Nuxt.js，Next.js
Q：手撕代碼，有序數組[1, 2, 3, 29]和[2, 3 ,6 ,9]合并成一個有序數組（規定不能用內置）
A：
function mergeSortedArrays(arr1, arr2) {let i = 0; // 第一個數組的指針let j = 0; // 第二個數組的指針const result = [];// 使用雙指針遍歷兩個數組while (i < arr1.length && j < arr2.length) {if (arr1[i] <= arr2[j]) {result.push(arr1[i]);i++;} else {result.push(arr2[j]);j++;}}// 將剩余元素添加到結果數組// 使用擴展運算符和slice來添加剩余元素return [...result, ...arr1.slice(i), ...arr2.slice(j)];
}// 測試代碼
const array1 = [2, 5, 6, 9];
const array2 = [1, 2, 3, 29];
const mergedArray = mergeSortedArrays(array1, array2);console.log('數組1:', array1);
console.log('數組2:', array2);
console.log('合并后的有序數組:', mergedArray);
