【前端校招面经】字节跳动2023校招前端二面凉经

base: bj

岗位: 前端开发

之前的一面在这: https://www.nowcoder.com/discuss/476137335793459200?sourceSSR=users

• 自我介绍
• Webpack 和 Vite 的区别
• 讲讲你对前端模块化的认知, 为什么要打包, 有了 Webpack 为什么还要使用 Vite
• 讲讲怎么设计一个组件
• React 中类组件和函数式组件的区别
• 常用的 hooks 函数
• axios 或 fetch 如何实现对发出的请求的终止?
• 代码题: 看代码说结果, 一个关于 this 指向的

var a = 1;
var obj = {
  a: 2,
  console() {
    function fn() {
      console.log(this.a);
    }
    fn();
  }
};

obj.console(); // 问输出什么?

• 代码题: 看代码说结果, 事件循环 + async 函数的
• 代码题: 实现 ahooks 中的 useRequest 函数, 内部可以使用 axios 或者 fetch

const App = () => {
  const { data, error, loading } = useRequest('/service/data');
  if (loading) {
	return <Loading loading={loading} />;
  } else if (error) {
	return <Error error={error} />;
  } else {
	return <Data data={data} />;
  }
};

// 这个问题看起来高大上, 其实本质上是, 实现一个普通的组件, 在渲染时请求数据而已
function useRequest(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setLoading] = useState(false);
  
  const handleInitRequest = async (url) => {
    setLoading(true);
    try {
      const data = await axios.get(url);
      setData(data);
    } catch (e) {
      setError(e);
    } finally {
      setLoading(false);
    }
  };
  
  useEffect(() => {
    handleInitRequest(url);
  }, []);
  
  return { data, error, isLoading };
}

• 代码题: 给出一个有序数组和一个元素, 求该元素在数组中出现的次数

function fn(arr, value) {
  // write code here
}
// test:
console.log(fn([1, 2, 3, 3, 3, 3, 4, 5], 3)); // 4
console.log(fn([1, 2, 3, 3, 3, 3, 4, 5], 5)); // 1
console.log(fn([1, 2, 3, 3, 3, 3, 4, 5], 10)); // 0