面试心得分享：手写前端面试题全记录

实现一个倒计时的hook

先给出代码，后面写思路，这也是个比较简单的题目了。

import React, { useState, useEffect } from 'react';

const useCountdown = (initialCountdown) => {
  const [countdown, setCountdown] = useState(initialCountdown);

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown((prevCountdown) => prevCountdown - 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return countdown;
};

const Countdown = ({ initialCountdown }) => {
  const countdown = useCountdown(initialCountdown);

  return <div>Countdown: {countdown}</div>;
};

export default Countdown;

首先定义了useCountdown 的自定义 Hook 和一个简单的倒计时组件 Countdown。下面是思路的解释：

1. 自定义 Hook useCountdown:
   • 接受一个参数 initialCountdown，用于设置初始倒计时时间。
   • 使用 useState 来保存倒计时的状态，初始值为 initialCountdown。
   • 使用 useEffect 来启动一个定时器，每秒减少倒计时时间。
   • 返回倒计时的当前值 countdown。
2. 倒计时组件 Countdown:
   • 接受一个 initialCountdown 属性，作为初始倒计时时间。
   • 使用 useCountdown 自定义 Hook 来获取倒计时的当前值。
   • 在组件中返回显示倒计时的 UI，使用 {countdown} 来展示当前的倒计时值。

使用 Countdown 组件：

import React from 'react';
import Countdown from './Countdown';

const App = () => {
  return (
    <div>
      <h1>My Countdown App</h1>
      <Countdown initialCountdown={60} /> {/* 初始倒计时时间为 60 秒 */}
    </div>
  );
};

export default App;

这样，就实现一个简单的倒计时功能了。

实现最大并发3个图片的线程池

这里是基于react加js实现的 思路如下：

1. 创建一个 ThreadPool 组件，它管理着工作线程的池子和任务队列。
2. 每个工作线程组件都负责执行任务，当有任务可执行时，它们从任务队列中取出任务并进行处理。
3. 线程池组件维护一个工作线程的列表和一个任务队列，根据工作线程数量和任务数量来调度任务的执行。

下面是基于 React 框架的实现：

import React, { useState, useEffect } from 'react';

// 工作线程组件
const WorkerThread = ({ task, onComplete }) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("Downloading image:", task);
      onComplete();
    }, 2000); // 模拟下载延迟

    return () => clearTimeout(timer);
  }, [task, onComplete]);

  return null;
};

// 线程池组件
const ThreadPool = ({ maxThreads, tasks }) => {
  const [taskQueue, setTaskQueue] = useState(tasks);
  const [workers, setWorkers] = useState(Array(maxThreads).fill(null));

  useEffect(() => {
    setTaskQueue(tasks);
  }, [tasks]);

  const taskCompleted = () => {
    setTaskQueue((prevQueue) => {
      const newQueue = [...prevQueue];
      newQueue.shift(); // 完成一个任务后，从队列中移除
      return newQueue;
    });
  };

  const dispatchTasks = () => {
    if (taskQueue.length === 0) return;
    const newWorkers = [...workers];
    for (let i = 0; i < newWorkers.length; i++) {
      if (!newWorkers[i] && taskQueue.length > 0) {
        newWorkers[i] = (
          <WorkerThread
            key={i}
            task={taskQueue[0]}
            onComplete={() => {
              newWorkers[i] = null;
              taskCompleted();
              dispatchTasks(); // 继续分配任务
              setWorkers(newWorkers);
            }}
          />
        );
      }
    }
    setWorkers(newWorkers);
  };

  useEffect(() => {
    dispatchTasks(); // 初始分配任务
  }, []);

  return <>{workers}</>;
};

// 使用示例
const ImageDownloader = () => {
  const imageUrls = [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg",
    "https://example.com/image4.jpg",
    "https://example.com/image5.jpg"
  ];

  return <ThreadPool maxThreads={3} tasks={imageUrls} />;
};

export default ImageDownloader;

在这个实现中，使用了 React 的状态管理和 useEffect 钩子来处理任务队列和工作线程。每个工作线程组件负责执行一个任务，并在完成后通知线程池。线程池组件会根据任务队列的情况和工作线程的可用性来动态分配任务。

array转tree

将一个数组转换成树的过程，通常包括以下几个步骤：

1. 构建节点对象：定义树节点的数据结构，通常包括节点值和子节点数组。
2. 创建根节点：遍历数组，将数组中的每个元素转换为节点对象，并找到根节点。
3. 构建子树：遍历数组，将每个节点添加到其父节点的子节点数组中。
4. 返回根节点：返回根节点作为树的起始点。

下面是一个实现这个思路的示例代码：

// 构建节点对象
class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
}

// 将数组转换成树
const arrayToTree = (array) => {
  if (!array || array.length === 0) {
    return null;
  }

  // 将数组中的元素转换成节点对象
  const nodes = array.map(value => new TreeNode(value));

  // 创建根节点
  const root = nodes[0];

  // 构建子树
  for (let i = 1; i < nodes.length; i++) {
    const parentIndex = Math.floor((i - 1) / 2);
    nodes[parentIndex].children.push(nodes[i]);
  }

  return root;
};

// 示例数组
const array = [1, 2, 3, 4, 5, 6, 7];

// 转换数组为树
const tree = arrayToTree(array);

console.log(tree);

首先定义了 TreeNode 类来表示树节点。然后，我们实现了 arrayToTree 函数，该函数接受一个数组作为输入，并返回树的根节点。在该函数中，遍历数组并创建节点对象，然后构建子树，最后返回根节点。

本文由微信公众号海燕技术栈原创，哈喽比特收录。
文章来源：https://mp.weixin.qq.com/s/o0n-lrngTZUG1WcWb2dMkA