【前端面经】字节跳动一面

写在前面：面经只是记录博主遇到的题目。每题的答案在编写文档的时候已经有问过deepseek，它只是一种比较普世的答案，要学得深入还是靠自己

Q：三栏布局的实现方式（圣杯模型）如何实现

A：

javascript 复制代码

    /* 整个 */
    .container {
        display: grid;
        grid-template-columns: 200px 1fr 200px;
    }

或

javascript 复制代码

    /* 整个 */
    .container {
        display: flex;
    }

    .left,
    .right {
        width: 200px;
    }
    /* 中间那个 */
    .main {
        flex: 1;
    }

Q：盒子模型

javascript 复制代码

<html>
<div id="content-box" class="box">content-box</div>
<div id="border-box" class="box">border-box</div>
<style>
    .box {
        width: 100px;
        height: 100px;
        padding: 20px;
        margin: 10px;
        border: 5px solid red;
        background: blue;
        color: #fff;
    }

    #content-box {
        box-sizing: content-box;
    }
    #border-box {
        box-sizing: border-box;
    }
</style>
</html>

中，两种box-sizing蓝色区域大小分别是多少

A：

content-box：默认模式，宽高100只包含内容。150盒子含有20 margin，蓝色是140×140

border-box：宽高100包含内容、padding、border。100盒子含有20 margin，蓝色是90×90

Q：js 事件循环机制

javascript 复制代码

setTimeout(() => console.log(1))

new Promise(function (resolve) {
    console.log(2)
    for (let i = 0; i < 10000; i++) {
        if (i == 9999) resolve()
    }
    console.log(3)

}).then(() => console.log(4))

console.log(5)

以上代码输出顺序是？

A：
调用栈 console.log(2)，for是同步代码console.log(3)，console.log(5)
微任务队列 then(() => console.log(4))
宏任务队列 setTimeout(() => console.log(1))

结果为：2 3 5 4 1

Q：Vue响应式如何实现

A：

V2: Object.defineProperty，对象属性劫持

V3: Proxy，代理整个对象

Q：js有什么基本类型

A：

基本类型：Number，String，Boolean，Undefined，Null，Symbol，BigInt。

引用类型：Object，Array，Function等。

Q：如何判断两个对象是否完全相等

A：

javascript 复制代码

JSON.stringify(obj1) === JSON.stringify(obj2)

Q：如何遍历对象的键值对

A：

javascript 复制代码

// 法一
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key, obj[key]);
}
// 法二
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
keys.forEach((key) => {
  console.log(key, obj[key]);
})
// 法三
const obj = { a: 1, b: 2, c: 3 };
const keys = Reflect.ownKeys(obj);
keys.forEach((key) => {
  console.log(key, obj[key]);
})

Q：Vue3使用Proxy，那么Proxy有什么缺点

A：浏览器兼容不好，性能开销大，调试复杂性，代码更复杂，内存占用，===比较失败

Q：vue中，如果大量后端数据异步回来，如何处理

A：web workers处理密集型计算

javascript 复制代码

// 主线程
const worker = new Worker('data-processor.js');
worker.postMessage(largeData);
worker.onmessage = (e) => {
  const processedData = e.data;
  // 更新UI
};

// data-processor.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

Q：手撕代码，js写出promise底层实现

A：

javascript 复制代码

function MyPromise(executor) {
    // 初始化状态和结果和回调函数数组
    this._state = 'pending';
    this._value = undefined;
    this._callbacks = [];
    // 定义函数
    const resolve = (value) => {
        if (this._state === 'pending') {
            this._state = 'fulfilled';
            this._value = value;
            this._callbacks.forEach((callback) => {
                callback.onFulfilled(value);
            });
        }
    };
    // 定义函数
    const reject = (reason) => {
        if (this._state === 'pending') {
            this._state = 'rejected';
            this._value = reason;
            this._callbacks.forEach((callback) => {
                callback.onRejected(reason);
            });
        }
    };
    // 执行executor，传入两个函数
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    if (this._state === 'fulfilled') {
        onFulfilled(this._value);
    } else if (this._state === 'rejected') {
        onRejected(this._value);
    } else if (this._state === 'pending') {
        this._callbacks.push({
            onFulfilled,
            onRejected,
        });
    }
};

const promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('Hello, World!');
    }, 1000);
});

promise.then(
    (value) => {
        console.log(value); // Output: Hello, World!
    },
    (error) => {
        console.error(error);
    }
);

Q：平时开发，CSR和SSR用哪种

A：

Vue支持CSR也支持SSR

CSR：在浏览器中动态生成HTML，开发简单，直接用vue-cli，SEO不友好

常用：纯Vue，React，Angular，静态站点生成，后台管理系统

SSR：SEO友好，服务器压力大，开发复杂度高，需要处理node.js环境

常用：Nuxt.js，Next.js

Q：手撕代码，有序数组[1, 2, 3, 29]和[2, 3 ,6 ,9]合并成一个有序数组（规定不能用内置）

A：

javascript 复制代码

function mergeSortedArrays(arr1, arr2) {
    let i = 0; // 第一个数组的指针
    let j = 0; // 第二个数组的指针
    const result = [];
    
    // 使用双指针遍历两个数组
    while (i < arr1.length && j < arr2.length) {
        if (arr1[i] <= arr2[j]) {
            result.push(arr1[i]);
            i++;
        } else {
            result.push(arr2[j]);
            j++;
        }
    }
    
    // 将剩余元素添加到结果数组
    // 使用扩展运算符和slice来添加剩余元素
    return [...result, ...arr1.slice(i), ...arr2.slice(j)];
}

// 测试代码
const array1 = [2, 5, 6, 9];
const array2 = [1, 2, 3, 29];
const mergedArray = mergeSortedArrays(array1, array2);

console.log('数组1:', array1);
console.log('数组2:', array2);
console.log('合并后的有序数组:', mergedArray);