前端开发面试题小程序有哪些

前端开发面试题小程序有很多种，常见的包括：计数器、待办事项列表、天气预报应用、简单的计算器、新闻阅读器。这些小程序不仅可以测试候选人对基础知识的掌握程度，还可以考察他们的实际编码能力和问题解决能力。例如，计数器这种小程序虽然看似简单，但却能全面考核应聘者对状态管理、事件处理、组件化开发等关键技能的掌握情况。通过实现一个计数器，面试官可以观察应聘者如何处理按钮点击事件、如何更新UI、如何维护组件的状态等细节，从而更全面地评估其技术水平。

一、计数器

计数器应用是前端开发面试中常见的小程序。它主要用于测试应聘者对状态管理和事件处理的理解。面试官通常会要求候选人实现一个包含“加一”和“减一”按钮的计数器，并在每次按钮点击时更新显示的数字。这看似简单的任务实际上涉及到很多前端开发的基础知识点，比如：

状态管理：如何在组件内部维护状态，如何使用React的useState或Vue的data来处理状态。
事件处理：如何绑定事件处理函数，如何在事件处理函数中更新状态。
组件化开发：如何将代码拆分成多个可复用的组件，如何进行组件间的通讯。
样式处理：如何使用CSS进行样式设计，如何使用CSS模块或CSS-in-JS进行样式隔离。

例如，在React中，可以通过以下代码实现一个简单的计数器：

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>加一</button>
      <button onClick={() => setCount(count - 1)}>减一</button>
    </div>
  );
}
export default Counter;

这个例子展示了如何使用useState来管理组件的状态，如何绑定按钮的点击事件，以及如何在事件处理函数中更新状态。

二、待办事项列表

待办事项列表是另一个经典的前端开发面试题。它主要用于测试应聘者对CRUD操作、列表渲染以及表单处理的理解。面试官通常会要求候选人实现一个可以添加、删除和标记完成的待办事项列表。这类小程序涉及到的知识点包括：

列表渲染：如何使用map函数动态生成列表项。
表单处理：如何处理表单输入，如何在表单提交时获取输入值。
状态管理：如何管理待办事项的状态，如何在状态变化时重新渲染列表。
本地存储：如何使用localStorage或其他持久化方案保存待办事项，以便在页面刷新后仍能保留数据。

例如，在React中，可以通过以下代码实现一个简单的待办事项列表：

import React, { useState } from 'react';
function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');
  const addTodo = () => {
    if (newTodo.trim() === '') return;
    setTodos([...todos, { text: newTodo, completed: false }]);
    setNewTodo('');
  };
  const toggleTodo = (index) => {
    const newTodos = todos.map((todo, i) => {
      if (i === index) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });
    setTodos(newTodos);
  };
  const deleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };
  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTodo(index)}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default TodoApp;

这个例子展示了如何处理表单输入、如何使用map函数渲染列表项、如何使用事件处理函数更新状态，以及如何使用filter函数删除列表项。

三、天气预报应用

天气预报应用是一个较为复杂的小程序，它主要用于测试应聘者对API调用、异步处理和数据渲染的理解。面试官通常会要求候选人实现一个能够根据用户输入的城市名查询天气信息的应用。这类小程序涉及到的知识点包括：

API调用：如何使用fetch或axios进行HTTP请求，如何处理请求的响应。
异步处理：如何使用async/await或Promise处理异步操作。
数据渲染：如何将API返回的数据渲染到页面上，如何处理不同的数据状态（加载中、加载成功、加载失败）。
用户输入：如何处理用户输入的城市名，如何在用户输入后触发API调用。

例如，在React中，可以通过以下代码实现一个简单的天气预报应用：

import React, { useState } from 'react';
function WeatherApp() {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const fetchWeather = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`
      );
      if (!response.ok) {
        throw new Error('City not found');
      }
      const data = await response.json();
      setWeather(data);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };
  return (
    <div>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />
      <button onClick={fetchWeather}>查询天气</button>
      {loading && <p>加载中...</p>}
      {error && <p>{error}</p>}
      {weather && (
        <div>
          <p>城市: {weather.name}</p>
          <p>温度: {Math.round(weather.main.temp - 273.15)}°C</p>
          <p>天气: {weather.weather[0].description}</p>
        </div>
      )}
    </div>
  );
}
export default WeatherApp;

这个例子展示了如何使用fetch进行API调用、如何使用async/await处理异步操作、如何根据不同的数据状态渲染不同的UI，以及如何处理用户输入。

四、简单的计算器

简单的计算器是另一个常见的前端开发面试题。它主要用于测试应聘者对事件处理、状态管理和基本的数学运算的理解。面试官通常会要求候选人实现一个包含数字按钮和运算符按钮的计算器，并在用户点击按钮时更新显示的结果。这类小程序涉及到的知识点包括：

事件处理：如何绑定按钮的点击事件，如何在事件处理函数中进行数学运算。
状态管理：如何在组件内部维护当前输入的数字和运算结果，如何在状态变化时更新显示的结果。
数学运算：如何进行基本的加减乘除运算，如何处理运算优先级。
UI设计：如何设计一个简洁易用的用户界面，如何布局按钮和显示屏。

例如，在React中，可以通过以下代码实现一个简单的计算器：

import React, { useState } from 'react';
function Calculator() {
  const [input, setInput] = useState('');
  const [result, setResult] = useState(null);
  const handleClick = (value) => {
    if (value === '=') {
      try {
        setResult(eval(input));
      } catch {
        setResult('Error');
      }
    } else if (value === 'C') {
      setInput('');
      setResult(null);
    } else {
      setInput(input + value);
    }
  };
  return (
    <div>
      <div>
        <input type="text" value={input} readOnly />
        <div>{result !== null && <p>结果: {result}</p>}</div>
      </div>
      <div>
        {[1, 2, 3, '+'].map((value) => (
          <button key={value} onClick={() => handleClick(value.toString())}>
            {value}
          </button>
        ))}
      </div>
      <div>
        {[4, 5, 6, '-'].map((value) => (
          <button key={value} onClick={() => handleClick(value.toString())}>
            {value}
          </button>
        ))}
      </div>
      <div>
        {[7, 8, 9, '*'].map((value) => (
          <button key={value} onClick={() => handleClick(value.toString())}>
            {value}
          </button>
        ))}
      </div>
      <div>
        {['C', 0, '=', '/'].map((value) => (
          <button key={value} onClick={() => handleClick(value.toString())}>
            {value}
          </button>
        ))}
      </div>
    </div>
  );
}
export default Calculator;

这个例子展示了如何处理按钮点击事件、如何使用eval进行数学运算（注意：在实际项目中应避免使用eval，建议使用更安全的数学运算库）、如何管理组件的状态，以及如何设计一个简洁的用户界面。

五、新闻阅读器

新闻阅读器是一个较为复杂的小程序，它主要用于测试应聘者对API调用、数据渲染和分页处理的理解。面试官通常会要求候选人实现一个能够根据用户选择的新闻类别显示新闻列表的应用。这类小程序涉及到的知识点包括：

API调用：如何使用fetch或axios进行HTTP请求，如何处理请求的响应。
数据渲染：如何将API返回的数据渲染到页面上，如何处理不同的数据状态（加载中、加载成功、加载失败）。
分页处理：如何实现新闻列表的分页显示，如何在用户点击“加载更多”按钮时加载更多新闻。
用户选择：如何处理用户选择的新闻类别，如何在用户选择类别后触发API调用。

例如，在React中，可以通过以下代码实现一个简单的新闻阅读器：

import React, { useState, useEffect } from 'react';
function NewsReader() {
  const [category, setCategory] = useState('general');
  const [news, setNews] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [page, setPage] = useState(1);
  useEffect(() => {
    const fetchNews = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(
          `https://newsapi.org/v2/top-headlines?category=${category}&page=${page}&pageSize=10&apiKey=YOUR_API_KEY`
        );
        if (!response.ok) {
          throw new Error('Failed to fetch news');
        }
        const data = await response.json();
        setNews((prevNews) => [...prevNews, ...data.articles]);
      } catch (e) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };
    fetchNews();
  }, [category, page]);
  return (
    <div>
      <select value={category} onChange={(e) => {
        setCategory(e.target.value);
        setNews([]);
        setPage(1);
      }}>
        <option value="general">General</option>
        <option value="business">Business</option>
        <option value="entertainment">Entertainment</option>
        <option value="health">Health</option>
        <option value="science">Science</option>
        <option value="sports">Sports</option>
        <option value="technology">Technology</option>
      </select>
      <div>
        {loading && <p>加载中...</p>}
        {error && <p>{error}</p>}
        {news.map((article, index) => (
          <div key={index}>
            <h2>{article.title}</h2>
            <p>{article.description}</p>
          </div>
        ))}
      </div>
      {!loading && !error && (
        <button onClick={() => setPage((prevPage) => prevPage + 1)}>
          加载更多
        </button>
      )}
    </div>
  );
}
export default NewsReader;