【25实习】阿里控股前端面经

timeline

• 3.4 投简历
• 4.7 测评
• 4.25 一面
• 4.28 二面
• 5.8 hr面
• 5.8 意向

2024.4.2 阿里巴巴 爱橙 一面

题目一：敏感信息隐藏

// 将字符串中间四个字符隐藏为传入的字符，默认为*
// 1. 字符串长度小于等于4，返回字符串长度对应的*，如"1234" => "****"
// 2. 若字符串长度为奇数，隐藏中间四个字符，多出来的一个数放后面，如"123456789" => "12****789"
// 3. 若字符串长度为偶数，隐藏中间四个字符，如"12345678" => "12****78"
const hideSensitive = (str, char = "*") => {
  const len = str.length;
  if (len <= 4) return Array(len).fill(char).join("");

  const strArr = str.split("");
  const isEven = len % 2 === 0;
  // 写的比较丑陋，实际上不需要分奇偶
  if (isEven) {
    let startIndex = (len >> 1) - 2,
      endIndex = (len >> 1) + 1;
    for (let i = startIndex; i < endIndex; i++) {
      strArr[i] = char;
    }
  } else {
    let startIndex = (len >> 1) - 2,
      endIndex = (len >> 1) + 1;
    for (let i = startIndex; i < endIndex; i++) {
      strArr[i] = char;
    }
  }
  return strArr.join("");
};

题目二：JSON 对象深拷贝

const deepClone = (json, cache = new WeakMap()) => {
  if (json === null || typeof json !== "object") return json;
  if (cache.has(json)) return cache.get(json);

  const copy = Array.isArray(json) ? [] : {};
  cache.set(json, copy);
  Object.keys(json).forEach((key) => (copy[key] = deepClone(json[key], cache)));
  return copy;
};

1. 介绍 flex 布局
2. 介绍display: none和visibility: hidden的区别
3. 介绍变量提升
4. 介绍 var、let、const 的区别
5. 介绍闭包的原理和应用
6. 介绍普通函数和箭头函数的区别
7. 介绍 requestAnimationFrame
8. 介绍 Promise 的几种状态
9. 为什么 React 的 Hook 只能在顶部使用
10. React 父组件怎么调用子组件的方法
11. 函数式组件可以用 ref 与 forwardRef 吗？
12. 介绍 TS 中 interface 和 type 的区别
13. 介绍 Webpack 打包流程
14. Webpack 打包体积大的优化方案

2024.4.28 阿里巴巴 爱橙 二面

面试官问的很有水平

1. 自我介绍
2. 问项目
3. sendBeacon的使用场景，与fetch的区别
4. 除了 XHR、fetch还有哪些发送请求的方式
5. 服务端与客户端通信的方式（WebSocket、SSE 这些）
6. fetch支持SSE吗
7. 设计低代码平台的思路
8. Webpack、Vite、Esbuild的背景、优劣势
9. 实现一个类似于Promise.all的函数，入参是一个异步函数数组，但数组中后一个函数依赖前一个函数的返回值
10. Canvas 内怎么给元素绑定事件
11. 性能优化方案
12. 一个很大的公共库存在于多个项目中，每个项目中只有一个页面用到，怎么抽离
13. 一个 7L 的水杯和一个 3L 的水杯怎么量出 2L 的水？说一下写通解的思路

反问：

1. 业务与技术栈

2024.5.8 阿里巴巴 爱橙 hr面

1. 自我介绍
2. 具体做的基建工作举个例子
3. 在字节和腾讯的实习体验，更喜欢哪种氛围
4. 学前端的过程，对后端、全栈的认识
5. 对部门的了解
6. 已有的 Offer，怎么选择

反问：

1. 部门业务
2. 转正的要求、概率

面完一小时直接发了意向邮件