字节前端面试（广告部门）

一面

面试时间：202204010
状态：通过
下面答案是我整理后，不是面试回答内容

聊聊你觉得比较有意义的项目

如何实现一个diff工具

获取dom的位置

Element.getBoundingClientRect
详细解答：DOM常用的属性 - top、left、width、height

移动端宽度适配，有哪些单位

rem、em、vw、vh、vmax、vmin
详细解答：CSS中的<length>(<number> + 单位)

编码题

{
    a: {
        b: 'hello ',
        c {
            d: 'world'
        }
    },
    e: 'hello world'
}

// 转换为
{
    'a.b': 'hello',
    'a.c.d': 'world',
    'e': 'hello wolrd'
}

function flatObj (obj) {
    const res = {};
    function keyToStr(keyStr, value) {
        if (typeof value !== 'object' || value === null) {
            res[keyStr.slice(1)] = value;
            return;
        }
        const keys = Object.keys(value);
        for(let i in keys) {
            keyToStr(keyStr + '.' + i, value[i]);
        }
    };
    keyToStr('', obj);
    return res;
}

函数执行结果

var obj = {};
obj.fun = function foo() {
    console.log(this);
    return () => {
        console.log(this);
        return () => console.log(this);
    }
}
obj.fun()()();

答案：三次打印的都是对象obj

this的应用场景

• 全局调用函数，非严格模式指向window，严格模式 undefined
• 对象属性的函数，this指向对象
• DOM事件，this指向 dom节点
• 箭头函数的this与外层相同
• call、apply、bind
• new

详细解答：this、call、apply、bind、new

构造函数与bind关系

当bind函数被用在构造函数时，bind将被忽略
详细解答：JS this绑定 - bind、call、apply

代码输出

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(() => {
    console.log('setTimeout');
}, 0);
requestAnimationFrame(() => { // 注意这个函数
    console.log('requestAnimationFrame'); 
});
async1();
new Promise(resolve => {
    console.log('promise');
    resolve();
}).then(() => {
    console.log('then');
})
console.log('script end');

script start
async1 start
async2
promise
script end
async1 end
then
requestAnimationFrame
setTimeout

二面

状态：未过
时间：20220419

主要是项目

聊了一些我平时的工作内容，在提效方面做了那些工作，最近有做什么分享嘛

感觉自己在分享那块说得不是很好，主要是分享是很久以前做的了，内容不是记得特别清楚了

建议：准备几个有一定复杂度或者比较有亮点的东西（感觉我现在做的业务好像也没啥亮点的东西，真实太难了）

二叉树广度优先遍历

就这个广度优先，我很快就做出来了（可能2分钟吧），

function leveSearch(node) {
    let res = [];
    let arr = [node];
    while(arr.length) {
        let item = arr.shift();
        res.push(item.value);
        if(item.left) {
            arr.push(item.left);
        }
        if(item.right) {
            arr.push(item.right);
        }
    }
    
    return res;
}

然后面试官说怎么每遍历一层，就打印下当前的深度（每一层只需要打印一次），开始忘了咋写了，面试官提醒了一下，我就写出来了

function levelSearch(node) {
    let res = [];
    let arr = [node];
    let index = 1
    whilr(arr.length) {
        console.log(index);
        
        // 本层的节点
        let parents = arr.splice(0);
        
        // 遍历本层的节点
        for(let i = 0, l = parents.length; i < l; i++) {
            let item = parents[i];
            res.push(item.value);
            if(item.left) {
                arr.push(item.left);
            }
            if(item.right) {
                arr.push(item.right);
            }
        }
        index++;
    }
    return res;
}