Written on June 06, 2023

前言

一个风和日丽的午后，我伸展了下懒腰，从午睡中朦胧的睁开双眼，北京 34℃ 的太阳透过写字楼的玻璃照在脸上十分晃眼。我像往常一样下楼抽了根烟继续堆着我的屎山代码，突然心里就有一个想法，我好久没有跳槽了。是不是应该出去走一走开开眼界了？尝试不同的行业和业务知识，开发不同类型的项目，收获不一样的成长。当然，如果工资能高点就更好了。

于是乎就整理了下自己的陈年老简历放到了某招聘网站上，but...今年的行情，想必各位同行都已习惯，裁员的裁员，各大企业都在降本增效，一个 996 的公司都能卷破天，挤破头想进去的都一大把。遇到的 Hr10 个有 8 个都不回消息，要么是：很抱歉，您很优秀，但是跟岗位不太匹配，下次有机会再合作。

两天后，一个外包公司的 Hr 打电话说简历筛选通过了，我终于算是约上了这次跳槽的第一个面试~

过程

问候、自我介绍部分省略，直奔主题。

问：看你简历上精通 vue、react 全家桶，那你平时用什么技术栈比较多?

我：总体来说 react 占比较高吧，因为最近的项目技术栈一直都是 react，vue 的话公司里有一些老项目还会在用。

问：react 的话用的是哪个版本？

我：18

问：那请说一下常见的 hooks 以及使用场景以及 react18 的新特性有哪些了解？

我：常用的有 useState、useEffect、useContext、useMemo、useCallback、useRef、useReducer。

• useState：用于在函数组件中添加状态管理。
• useEffect：用于在函数组件中处理副作用，比如访问 DOM、网络请求等。
• useContext：用于在函数组件中访问全局的上下文信息。
• useReducer：用于在函数组件中进行复杂的状态管理，同 redux 中的 reducer 相似。
• useCallback：用于在函数组件中缓存回调函数，以提高性能。
• useMemo：用于在函数组件中缓存计算结果，以提高性能。
• useRef：用于在函数组件中保存可变的引用。 react18 新特性
• Concurrent Mode：可以让 React 应用更快地响应用户操作，并且更好地利用多核 CPU。
• Suspense for Data Fetching：可以让 React 应用更加优雅地处理数据加载和错误处理。
• Server Components：可以让 React 应用更容易地实现 SSR（服务器端渲染）和 SSG（静态站点生成）。
• Improved Accessibility：可以让 React 应用更容易地实现无障碍访问。
• Automatic Batching of State Updates：可以让 React 应用更加高效地处理大量状态更新。

问：算法题

题目：实现一个函数，接受两个参数，第一个参数是[1, 2, 4, 7, 13]，第二个参数是 9，要求返回[1, 3]，因为 2 + 7 = 9，返回 2 和 7 的下标。

答：先说一下解题思路吧，可以用双重循环来遍历数组中的每个元素，尝试找出元素相加等于目标值的两个数，返回他们对应的下标。 具体实现：

function findTargetIndex(arr: number[], target: number): number[] {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] + arr[j] === target) {
        return [i, j];
      }
    }
  }
  return [];
}
typescript

问：这种方法没有考虑到时间复杂度吧，还有别的实现方法吗？ 其实这里我没有太多思路了，太久没有看过算法题，所以没有答上来，面试结束后我补习了一下，上面这里我用到了双重遍历，时间复杂度为 O(n²)，如果数组比较大，那么整个计算的过程会非常耗时，性能会变差，还有一种更好的实现方式是使用哈希表（Hash Table）：

function findTargetIndex(arr: number[], target: number): number[] {
  // 创建一个 Map 对象
  const map = new Map<number, number>();
  for (let i = 0; i < arr.length; i++) {
    // 计算目标值与当前元素的差值
    const complement = target - arr[i];
    // 如果哈希表中存在差值的键
    if (map.has(complement)) {
      // 返回差值的下标和当前元素的下标
      return [map.get(complement)!, i];
    }
    // 将当前元素的值和下标存储到哈希表中
    map.set(arr[i], i);
  }
  return [];
}
typescript

问：怎么使用 TS 一个对象类型，key 值是不确定，value 是 string

答：

interface Obj<T> {
  [key: T]: string;
}
typescript

追问：这是调用传参的方式，还有别的表达方式了吗

答：还可以

Record<string, string>;
interface Obj {
  [key: string]: string;
}
typescript

问：flex：1，是什么意思。具体表示的是哪几个属性？

答：这个表示开启弹性盒的下面的子元素的伸缩比例，拆分开就是flex: 1 1 0%，其中，1 表示子元素的伸缩比例为 1，1 表示子元素的收缩比例为 1，0% 表示子元素的基准值为 0

总结

因为上面那道很简单的算法题思路不够清晰，反应不够灵敏，或者是其他方面的原因？这次机会感觉就错过去了，下去一定得好好复习下算法方面的知识了，这种东西还是要多做勤做啊，加油吧~~