百度-前端实习面试

时间：11/25/25 一面 时长：40分钟左右 似乎是有两个面试官

1 流程

• 自我介绍
• 提问
• 代码
• 反问

2 提问

• 你对于原生开发（ios与安卓）是否能够接受
• 你的技术栈主要是Vue，我们的技术栈是React，面试过程中你是否会感到紧张
• CSS中给左上和右下角进行边框设置
• 说一下padding和margin的区别
• 对于图片的object-position这个属性的常用的三个值
• 手机的进程与线程的个数
• 数据库事务的四个特征
• 计算机网络，抓包
• 获取加密信息比如，获取SSL/TLS加密后的内容
• 操作系统进程死锁的条件

3 编程

• 500毫秒之后输出一个时间戳
• 判断一个any是否为空isEmpty函数的编写
• 在一个具有数字和字符的字符串中去找到第n大的数字

4 复盘反思

这个比上一个还学院派，而且还是React技术栈，我的天啊！到底要干嘛啊，这四件套加数据库我都忘了，这老类型判断，平时写前端的业务的代码很少去考虑，根本不会...

面大厂就是要去加强学院派的基础，现在已经有的就是四件套和数据库，这些都是很重要的。

废了啊，这基础的四大件，答对的不多啊...这个真感觉要凉了 >11/27/25 两天了都，绝对凉凉了

5 参考答案

1. 原生开发接受度

答： 是的，我能够接受原生开发。虽然我的主要技术栈是前端，但我对移动开发有浓厚兴趣，并且具备学习新技术的能力。如果有机会，我很愿意深入学习 iOS 和 Android 原生开发。

2. Vue 转 React 的适应

答： 不会感到紧张。Vue 和 React 在核心概念上有很多相似之处：

• 都是组件化开发思想
• 都有虚拟 DOM
• 状态管理理念相通
• 生命周期/hooks 概念相似 我相信能够快速适应 React 技术栈。

3. CSS 边框设置

.element {
  border-top-left-radius: 10px;     /* 左上角 */
  border-bottom-right-radius: 10px; /* 右下角 */
}

4. padding 和 margin 区别

• padding：元素内边距，在边框内部，影响元素内容与边框的距离
• margin：元素外边距，在边框外部，影响元素与其他元素的距离

5. object-position 常用值（难道他问的是fit？）

img {
  object-position: center;    /* 居中 */
  object-position: top;       /* 顶部 */
  object-position: 20% 80%;   /* 自定义位置 */
}

6. 手机进程与线程

• 进程：Android 系统通常运行 100-200 个进程
• 线程：每个应用通常有主线程 + 多个工作线程，具体数量取决于应用复杂度

7. 数据库事务特征 (ACID)

• Atomicity（原子性）
• Consistency（一致性）
• Isolation（隔离性）
• Durability（持久性）

8. 网络抓包

• 使用 Wireshark、Fiddler 等工具
• 可以分析 HTTP/HTTPS 请求
• 需要配置代理和证书

9. 获取加密信息

• 使用中间人攻击工具
• 配置 SSL/TLS 解密
• 需要安装根证书
• 在法律允许范围内进行

10. 进程死锁条件

1. 互斥条件
2. 请求与保持条件
3. 不剥夺条件
4. 循环等待条件

1. 500ms 后输出时间戳

setTimeout(() => {
  console.log(Date.now());
}, 500);

2. isEmpty 函数

function isEmpty(value) {
  if (value === null || value === undefined) return true;
  
  if (typeof value === 'object') {
    if (Array.isArray(value)) return value.length === 0;
    return Object.keys(value).length === 0;
  }
  
  if (typeof value === 'string') return value.trim().length === 0;
  
  if (typeof value === 'number') return value === 0;
  
  return false;
}

// 测试用例
console.log(isEmpty(null));        // true
console.log(isEmpty(undefined));   // true
console.log(isEmpty(''));          // true
console.log(isEmpty('   '));       // true
console.log(isEmpty([]));          // true
console.log(isEmpty({}));          // true
console.log(isEmpty(0));           // true
console.log(isEmpty('hello'));     // false
console.log(isEmpty([1, 2]));      // false
console.log(isEmpty({a: 1}));      // false

3. 找到第 n 大的数字

思路是找到数字之后去重，接着排序，最后返回值：

function findNthLargestNumber(str, n) {
  // 提取所有数字
  const numbers = str.match(/-?\d+(\.\d+)?/g);
  
  if (!numbers || numbers.length === 0) {
    return null;
  }
  
  // 转换为数字并去重
  const uniqueNumbers = [...new Set(numbers.map(Number))];
  
  // 排序（降序）
  uniqueNumbers.sort((a, b) => b - a);
  
  // 返回第 n 大的数字
  if (n > uniqueNumbers.length) {
    return null;
  }
  
  return uniqueNumbers[n - 1];
}

// 测试用例
const testStr = "abc123def456ghi789jkl100mno50pqr200";
console.log(findNthLargestNumber(testStr, 1)); // 200
console.log(findNthLargestNumber(testStr, 2)); // 789
console.log(findNthLargestNumber(testStr, 3)); // 456
console.log(findNthLargestNumber("no numbers", 1)); // null

优化版本（处理边界情况）：

function findNthLargestNumberOptimized(str, n) {
  if (typeof str !== 'string' || !Number.isInteger(n) || n < 1) {
    return null;
  }
  
  const numbers = (str.match(/-?\d+(\.\d+)?/g) || [])
    .map(Number)
    .filter(num => !isNaN(num));
  
  if (numbers.length === 0) return null;
  
  const uniqueNumbers = [...new Set(numbers)];
  uniqueNumbers.sort((a, b) => b - a);
  
  return n <= uniqueNumbers.length ? uniqueNumbers[n - 1] : null;
}