前30min

• 自我介绍

• 如何学习前端

• 项目介绍

八股吟唱

• var let const 区别

• for in for of区别

• 原型和原型链

• 闭包

• 箭头函数

• 跨域

• 基本数据类型和引用类型

• splice和slice

• 知道promise吗

• 垂直水平居中的方法

• 宏任务与微任务

• 知道Set吗

• 输入域名到进入网页中间经历了什么

  • DNS解析

  • 从服务器获取静态资源

  • HTML和CSS渲染

• react的hook你知道几个

场景题和算法

• 看代码说输出

console.log("Start");

setTimeout(() => {

    console.log("Timeout");

}, 0);

Promise.resolve().then(() => {

    console.log("Promise");

});

console.log("End");

function MyComponent() {

    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('useEffect');
        return () => {
            console.log('Cleanup');
        };
    }, []);

    useEffect(() => {
        console.log('count refresh');
    }, [count]);

    console.log('Function body');

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

• 实现一个穿梭表 https://ant.design/components/transfer-cn

• 算术表达式二叉树

interface RootNode {

    type: "operator" | "number";

    operator?: "+" | "-"

    value?: number

    // 如果是操作符，那么一定有左右子节点

    left?: RootNode

    right?: RootNode

}

// 1 + 1 + 1

const root: RootNode = {

    type: "operator",

    operator: "+",

    left: {

        type: "number",

        value: 1,

    },

    right: {

        type: "operator",

        operator: "+",

        left: {

            type: "number",

            value: 1

        },

        right: {

            type: "number",

            value: 1

        }

    }

}

// 实现算法计算一个表达式树的值

function evaluate(root: RootNode): number {

    

}

// 将一个表达式树转换为表达式字符串

function toExpression(root: RootNode): string {

    

}

反问

• 有什么建议吗？“回去多学学数据结构和算法再来吧”