10个常考的前端手写题，你全都会吗？（上）

在前端开发领域，手写题常常是面试官用来考察求职者基本功的重要方式。这类题目通常涉及 JavaScript、HTML、CSS 等基础知识，考察应聘者对语言特性的理解和实际应用能力。下面我们来介绍10个常见的前端手写题，并提供简单的代码示例。

1. 实现一个深拷贝函数

深拷贝用于复制一个对象的所有属性及其嵌套对象。以下是一个简单的实现：

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepClone(obj[key]);
        }
    }
    return copy;
}

2. 去重数组

去重是数据处理中常见的需求，以下是利用 Set 去重的实现：

function uniqueArray(arr) {
    return [...new Set(arr)];
}

const nums = [1, 2, 2, 3, 4, 4, 5];
console.log(uniqueArray(nums)); // [1, 2, 3, 4, 5]

3. 判断一个字符串是否为回文

回文是指正着读和反着读都一样的字符串。实现如下：

function isPalindrome(str) {
    const reversed = str.split('').reverse().join('');
    return str === reversed;
}

console.log(isPalindrome("level")); // true
console.log(isPalindrome("hello")); // false

4. 实现一个简单的发布-订阅模式

发布-订阅模式是事件驱动程序设计的一种常见模式，代码示例如下：

class EventEmitter {
    constructor() {
        this.events = {};
    }

    on(event, listener) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(listener);
    }

    emit(event, ...args) {
        if (this.events[event]) {
            this.events[event].forEach(listener => listener(...args));
        }
    }
}

const emitter = new EventEmitter();
emitter.on('test', (data) => {
    console.log('Test event received:', data);
});
emitter.emit('test', { testData: 123 });

5. 实现一个简单的防抖函数

防抖函数用于限制某个事件在短时间内被频繁触发，示例如下：

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

const log = debounce(() => console.log('Debounced!'), 1000);
window.addEventListener('resize', log);

6. 实现一个切换类名的函数

在前端开发中，切换类名是一项常见操作，代码如下：

function toggleClass(element, className) {
    if (element.classList) {
        element.classList.toggle(className);
    } else {
        const classes = element.className.split(' ');
        const index = classes.indexOf(className);
        if (index >= 0) {
            classes.splice(index, 1);
        } else {
            classes.push(className);
        }
        element.className = classes.join(' ');
    }
}

7. 实现一个简单的异步请求

使用 fetch API 进行异步请求，示例如下：

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Fetch data error:', error);
    }
}

fetchData('https://jsonplaceholder.typicode.com/todos/1');

8. 计算数组中元素的平均值

计算一个数组中所有元素的平均值，代码如下：

function average(arr) {
    const sum = arr.reduce((acc, val) => acc + val, 0);
    return sum / arr.length;
}

const numbers = [1, 2, 3, 4, 5];
console.log(average(numbers)); // 3

9. 字符串转化为数字

实现一个函数，将字符串转换为数字，示例如下：

function stringToNumber(str) {
    const num = Number(str);
    return isNaN(num) ? null : num;
}

console.log(stringToNumber("123")); // 123
console.log(stringToNumber("abc")); // null

10. 计算斐波那契数列

斐波那契数列是一种经典的数学序列，可以通过递归或迭代实现，以下为迭代实现：

function fibonacci(n) {
    let a = 0, b = 1;
    for (let i = 0; i < n; i++) {
        [a, b] = [b, a + b];
    }
    return a;
}

console.log(fibonacci(6)); // 8

总结

以上是10个常见的前端手写题及其代码实现，这些题目不仅考察了应聘者的编程基础，也能反映出其解决问题的能力。在面试中，除了写出正确的代码，更要能清晰地解释思路，帮助面试官理解你的解题过程。希望这些示例能帮助到你在日常学习和面试中更好地准备。