柚子快報激活碼778899分享：職場和發(fā)展 前端經(jīng)典面試手寫題

http://yzkb.51969.com/

????????

????????前端面試中常會遇到的手寫題主要考察應聘者對前端基礎知識的掌握程度以及編程能力。以下是一些經(jīng)典的前端手寫題及其解答思路：

手寫深拷貝（Deep Clone）

深拷貝是指復制一個對象及其所有子對象，使得新的對象和原對象完全獨立。

function deepClone(obj, cache = new WeakMap()) {

if (typeof obj !== 'object' || obj === null) {

return obj;

}

if (cache.get(obj)) {

return cache.get(obj); // 防止循環(huán)引用

}

let cloneObj = Array.isArray(obj) ? [] : {};

cache.set(obj, cloneObj);

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

cloneObj[key] = deepClone(obj[key], cache);

}

}

return cloneObj;

}

手寫防抖（Debounce）函數(shù)

防抖函數(shù)用于限制某個函數(shù)的執(zhí)行頻率，確保函數(shù)在指定的時間間隔內(nèi)只執(zhí)行一次。

function debounce(fn, delay) {

let timer;

return function(...args) {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(() => {

fn.apply(this, args);

}, delay);

};

}

手寫節(jié)流（Throttle）函數(shù)

節(jié)流函數(shù)用于限制函數(shù)的執(zhí)行頻率，確保函數(shù)以一定的時間間隔執(zhí)行。

function throttle(fn, delay) {

let last = 0;

return function(...args) {

const now = Date.now();

if (now - last > delay) {

last = now;

fn.apply(this, args);

}

};

}

手寫 Object.create 方法

Object.create 方法用于創(chuàng)建一個新對象，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的 __proto__。

function create(obj) {

function F() {}

F.prototype = obj;

return new F();

}

手寫 new 運算符

new?運算符用于創(chuàng)建一個用戶定義的對象類型的實例或具有構造函數(shù)的內(nèi)置對象的實例。

function myNew(fn, ...args) {

if (typeof fn !== 'function') {

throw new Error('type error');

}

const obj = Object.create(fn.prototype);

const result = fn.apply(obj, args);

return result instanceof Object ? result : obj;

}

手寫排序算法（如快速排序、冒泡排序等）

????????這里以冒泡排序為例

function bubbleSort(arr) {

let len = arr.length;

for (let i = 0; i < len - 1; i++) {

for (let j = 0; j < len - 1 - i; j++) {

if (arr[j] > arr[j + 1]) {

// 相鄰元素兩兩對比

let temp = arr[j + 1]; // 元素交換

arr[j + 1] = arr[j];

arr[j] = temp;

}

}

}

return arr;

}

數(shù)組去重

????????實現(xiàn)一個數(shù)組去重的函數(shù)，可以使用 Set 數(shù)據(jù)結構或遍歷比較。

function uniqueArray(arr) {

return [...new Set(arr)];

}

// 或者使用遍歷比較的方式

function uniqueArrayByTraversal(arr) {

const uniqueSet = new Set();

const uniqueArr = [];

for (let item of arr) {

if (!uniqueSet.has(item)) {

uniqueSet.add(item);

uniqueArr.push(item);

}

}

return uniqueArr;

}

手寫 Array.prototype.push 方法

push 方法向數(shù)組的末尾添加一個或多個元素，并返回新的長度。

Array.prototype.myPush = function(...items) {

for (let item of items) {

this[this.length] = item;

}

return this.length;

};

手寫 Array.prototype.filter 方法

????????創(chuàng)建一個新數(shù)組，其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。

Array.prototype.myFilter = function(callback, thisArg) {

if (typeof callback !== 'function') {

throw new Error('callback must be a function');

}

const result = [];

for (let i = 0; i < this.length; i++) {

if (callback.call(thisArg, this[i], i, this)) {

result.push(this[i]);

}

}

return result;

};

手寫 Array.prototype.find 方法

????????返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 undefined。

Array.prototype.myFind = function(callback, thisArg) {

if (typeof callback !== 'function') {

throw new Error('callback must be a function');

}

for (let i = 0; i < this.length; i++) {

if (callback.call(thisArg, this[i], i, this)) {

return this[i];

}

}

return undefined;

};

柚子快報激活碼778899分享：職場和發(fā)展 前端經(jīng)典面試手寫題

http://yzkb.51969.com/

精彩鏈接