金三银四：20道前端手写面试题

“金三银四”是指每年春季求职高峰期，这个时候很多企业会开始招募前端开发工程师。为了帮助求职者在面试中脱颖而出，本文将整理出20道常见的前端手写面试题，并提供相应的代码示例。

一、JavaScript基础

1. 实现一个简单的深拷贝函数 ```javascript function deepClone(obj) { if (obj === null) return null; if (typeof obj !== 'object') return obj;

   let copy = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepClone(obj[key]); } } return copy; } ```

2. 实现一个防抖（debounce）函数 javascript function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); }; }

3. 实现一个节流（throttle）函数 javascript function throttle(func, limit) { let lastFunc; let lastRan; return function(...args) { const context = this; if (!lastRan) { func.apply(context, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if ((Date.now() - lastRan) >= limit) { func.apply(context, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; }

二、DOM操作

1. 使用原生JavaScript实现一个简单的事件委托 javascript document.getElementById('parent').addEventListener('click', function(event) { if (event.target.tagName === 'BUTTON') { console.log('Button clicked:', event.target.innerText); } });

2. 实现一个自定义的简单模态框 javascript function openModal() { const modal = document.createElement('div'); modal.style.display = 'block'; modal.innerHTML = '<h2>我是模态框</h2><button onclick="this.parentElement.style.display=\'none\'">关闭</button>'; document.body.appendChild(modal); }

三、React相关

1. 实现一个简单的React组件 javascript function Greeting(props) { return <h1>你好, {props.name}!</h1>; }

2. 理解状态管理，使用useState管理组件状态 ```javascript import React, { useState } from 'react';

function Counter() { const [count, setCount] = useState(0);

   return (
       <div>
           <p>当前计数: {count}</p>
           <button onClick={() => setCount(count + 1)}>增加</button>
       </div>
   );

} ```

四、数据结构与算法

1. 实现斐波那契数列 javascript function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }

2. 数组去重 javascript function uniqueArray(arr) { return [...new Set(arr)]; }

3. 反转字符串 javascript function reverseString(str) { return str.split('').reverse().join(''); }

五、网络与安全

1. 解释HTTP状态码

   • 200: 成功
   • 404: 找不到页面
   • 500: 服务器错误

2. 简单的AJAX请求 javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send();

六、CSS与布局

1. 实现一个简单的响应式导航条 html <style> nav { display: flex; } nav a { margin: 0 15px; } @media (max-width: 600px) { nav { flex-direction: column; } } </style> <nav> <a href="#">首页</a> <a href="#">关于我们</a> </nav>

2. CSS实现一个简单的旋转动画 ```css .spin { animation: spin 2s linear infinite; }

   @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ```

七、其他

1. 实现Promise的基本功能 ```javascript class MyPromise { constructor(executor) { this.value = null; this.status = 'pending'; this.onResolveCallbacks = []; this.onRejectCallbacks = [];

       const resolve = (value) => {
           if (this.status === 'pending') {
               this.status = 'fulfilled';
               this.value = value;
               this.onResolveCallbacks.forEach(callback => callback(value));
           }
       };
   
       const reject = (reason) => {
           if (this.status === 'pending') {
               this.status = 'rejected';
               this.value = reason;
               this.onRejectCallbacks.forEach(callback => callback(reason));
           }
       };
   
       executor(resolve, reject);
   }
   // then, catch etc...
   

   } ```

2. 解释CSS选择器的优先级

   • 样式的优先级由以下顺序决定：
   • !important
   • 内联样式
   • ID选择器
   • 类选择器、属性选择器和伪类
   • 元素选择器和伪元素

3. 简述Web安全（XSS、CSRF）

   • XSS（跨站脚本攻击）: 攻击者向可靠网站注入恶意脚本，窃取用户数据。
   • CSRF（跨站请求伪造）: 攻击者通过伪造请求来对用户进行操作，利用用户的身份。

结束语

掌握这些前端手写面试题有助于你在面试中更好地展示自己的能力，希望大家在求职过程中能够顺利找到理想的工作。务必在面试前进行充分准备，并根据实际情况进行练习与复习。祝大家好运！