字节跳动data aml 前端实习一面60min

字节跳动Data AML部门前端实习一面面经

本次面试时长1小时，主要涵盖项目经历、技术原理、基础知识和算法编程等方面，具体内容如下：

一、项目经历

面试官首先询问了实习项目相关内容，围绕项目背景、技术实现、遇到的问题及解决方案展开交流，考察对实际项目的参与度与理解深度。

二、Suspense原理及实现

1. 原理：Suspense 是 React 用于处理异步渲染的组件，可在数据加载或组件渲染完成前展示加载指示器，提升用户体验。

2. 实现方式：被问到在 useEffect 中存在 fetch 请求时，如何让顶层组件感知组件存在异步请求。回答可通过 React Context 实现信息透传，但存在更优方案，可从 React 的新特性或状态管理库角度进一步优化 。

三、JS基础

1. var、let和const的区别：var 存在变量提升，会导致变量在声明前可被访问；let 和 const 具有块级作用域，更加安全。

2. var逐渐被弃用原因：var 没有块级作用域，在复杂代码中容易引发变量覆盖等意外问题，使用 let 和 const 可避免此类风险，提高代码的可读性和稳定性。

四、CSS基础

1. 三列瀑布布局（两边固定，中间自适应）：纯CSS可通过浮动或绝对定位实现；使用flex布局更优雅，flex: 1 表示该元素会自动分配剩余空间。

2. flex常用属性：主要涉及主轴和横轴方向设置，如 flex-direction 定义主轴方向；常用的居中属性包括 justify-content: center（主轴居中）和 align-items: center（交叉轴居中） 。

3. CSS动画：通过 animation 属性实现，配合关键帧 @keyframes 定义动画的起始和结束状态、变化函数（如线性变化）以及时间等参数。animation 在渲染进程的合成线程执行，不会阻塞JS执行，效率较高。

五、算法编程题

1. 合并有序链表
// 定义链表节点结构
function ListNode(val, next) {
    this.val = (val === undefined? 0 : val);
    this.next = (next === undefined? null : next);
}

var mergeTwoLists = function(l1, l2) {
    const dummy = new ListNode(0);
    let current = dummy;
    while (l1 && l2) {
        if (l1.val < l2.val) {
            current.next = l1;
            l1 = l1.next;
        } else {
            current.next = l2;
            l2 = l2.next;
        }
        current = current.next;
    }
    current.next = l1 || l2;
    return dummy.next;
};
2. 二叉树寻找公共父节点（节点有parent指针）
function lowestCommonAncestor(p, q) {
    const set = new Set();
    while (p) {
        set.add(p);
        p = p.parent;
    }
    while (q) {
        if (set.has(q)) {
            return q;
        }
        q = q.parent;
    }
}
3. 实现sum函数curry化