2022.12.27 滴滴一面

• 自我介绍
• 有考虑后端开发吗
• 对前端的认识
• 说一下知道的html标签
• 什么时候使用p标签，session标签
• seo
• display: block 和flex的使用场景
• 盒模型
• padding margin -50%是根据哪个元素设置的
• margin-bottom -50%表示什么意思
• 讲一下 flex容器和子元素的css属性
• flex主轴是哪一条
• 实现居中
• 用margin -宽度的一半和用translate（-50%）的区别
• postition有哪些值，以及使用区别
• 事件执行机制
• 有什么宏任务和微任务
• 事件（js事件）是什么任务，有什么区别
• 闭包
• 什么是内存泄漏
• 项目中有遇到过内存泄漏的情况吗
• 面了20多分钟，后面都是写题
• 实现promise.finally
• 实现节流函数
• 实现url解析

function parse(str) {
    let index = 0
    const ans = {}
    for (let s of str) {
        if (s != '?') {

        } else {
            break
        }
        index++
    }
    // console.log(str[index]);
    index++
    while (index < str.length) {
        let s = ''
        let k = ''
        while (str[index] != '=' && index < str.length) {
            s += str[index]
            // console.log(s);
            index++
        }
        index++
        while (str[index] != '&' && index < str.length) {
            k += str[index]
            index++
        }
        // console.log(s, k);
        ans[s] = k
        index++
    }

    return ans
}

• 实现hooks的串行调用

const hook1 = (to, from, next) => {
    console.log('hook1');
    next()
}
const hook2 = (to, from, next) => {
    setTimeout(() => {
        console.log('hook2');

        next()
    })
}
const hook3 = (to, from, next) => {
    setTimeout(() => {
        console.log('hook3');

        next(false)
    })
}
const hook4 = (to, from, next) => {
    setTimeout(() => {
        console.log('hook4');

        next()
    })
}

// const runHooks = (hooks, cb) => {
//     // 实现逻辑
// }

async function runHooks(hooks, cb) {
    let flag = true
    let done = false

    for (let hook of hooks) {
        done = false
        await new Promise((resolve) => {
            function next(arg) {
                if (arg !== undefined) {
                    flag = arg
                    // done = true

                }
                resolve()
            }

            hook('', '', next)
        })

        if (!flag) {
            cb(flag)
            return
        }

    }

    cb(undefined)
}

runHooks([hook1, hook2, hook3, hook4], (result) => {
    console.log('done', result)
})