腾讯前端高频手撕题详解

以下是腾讯及腾讯音乐娱乐（TME）前端岗位高频手撕题目详解，结合真题及考察要点整理，覆盖面试核心考点：

⚙️ 一、核心手撕题（腾讯/TME 必考）

1. Promise 并发控制（90%场次出现）

• 题目：手写 Promise.all（需处理错误短路、位置保持）
• 核心思路：
  • 校验输入为数组，空数组直接 resolve([])。
  • 遍历 Promise 数组，用 Promise.resolve 包装非 Promise 值。
  • 计数完成量，全部成功时返回结果数组；任一失败立即 reject。
• 边界处理：Promise.myAll = (promises) => {
  if (!Array.isArray(promises)) return Promise.reject(new TypeError('Argument must be an array'));
  let count = 0, results = [];
  return new Promise((resolve, reject) => {
  promises.forEach((p, i) => {
  Promise.resolve(p).then(res => {
  results[i] = res; // 保持结果位置
  if (++count === promises.length) resolve(results);
  }).catch(reject); // 短路逻辑
  });
  if (promises.length === 0) resolve(results);
  });
  };

2. 数组扁平化（80%场次出现）

• 题目：实现多层嵌套数组降维（如 [1, [2, [3]]] → [1, 2, 3]）
• 方案对比：
  • 递归法：深度优先遍历，遇到数组则递归展开。
  • flat API：直接调用 arr.flat(Infinity)（需注意浏览器兼容性）。
  • Reduce 递归：const flatten = (arr) =>
    arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur) : cur), []);

3. 深拷贝（70%场次出现）

• 考点：处理循环引用、特殊对象（Date/RegExp）
• 代码关键点：
  • 使用 WeakMap 缓存已拷贝对象，避免循环引用导致的栈溢出。
  • 特殊对象单独处理（如 new Date(obj)）。

  function deepClone(obj, map = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (map.has(obj)) return map.get(obj);
  const clone = obj instanceof Date ? new Date(obj)
  : obj instanceof RegExp ? new RegExp(obj)
  : Array.isArray(obj) ? [] : {};
  map.set(obj, clone);
  Reflect.ownKeys(obj).forEach(key => {
  clone[key] = deepClone(obj[key], map);
  });
  return clone;
  }

⚡️ 二、特色场景题（腾讯音乐TME高频）

1. 页面通信与崩溃监控

• 题目：从页面A打开页面B，B关闭（含崩溃）时通知A
• 解决方案：
  • 正常关闭：在B的 window.onbeforeunload 中通过 localStorage 或 postMessage 传参，A监听 storage 或 message 事件。
  • 崩溃监控：
    • B页面定时（5s）向Service Worker发送"心跳"。
    • Service Worker检测超时（15s无心跳）判定崩溃，通知A页面。

    // B页面心跳发送
    setInterval(() => navigator.serviceWorker.controller.postMessage({ type: 'heartbeat' }), 5000);
    // Service Worker检测逻辑
    if (Date.now() – lastHeartbeat > 15000) reportCrash();

2. 大数相加（校招重点）

• 题目：实现超过JS精度限制的数字加法（如 "9999999999999999" + "1"）
• 思路：
  • 字符串反转，按位相加并处理进位。
  • 注意高位补位（如最终进位不为0）。

  function addBigNumbers(a, b) {
  const arr1 = a.split('').reverse(), arr2 = b.split('').reverse();
  let result = [], carry = 0;
  for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
  const sum = (parseInt(arr1[i] || 0) + parseInt(arr2[i] || 0) + carry);
  result.push(sum % 10);
  carry = Math.floor(sum / 10);
  }
  if (carry) result.push(carry);
  return result.reverse().join('');
  }

3. 二叉树遍历（基础算法）

• 题目：实现二叉树前序/中序/后序遍历（递归与非递归）
• 递归示例：const preorder = (root, res = []) => {
  if (!root) return res;
  res.push(root.val); // 前序：根左右
  preorder(root.left, res);
  preorder(root.right, res);
  return res;
  };

💡 三、答题技巧与避坑点

腾讯系面试注重原理实现深度与场景落地能力，建议优先掌握以上高频题，并扩展练习虚拟DOM Diff、响应式原理（Proxy/defineProperty）等进阶题。