2024年字节抖音前端面经，这次问的很基础！

文章同步在公众号：萌萌哒草头将军，欢迎关注！！！

一面

es6新特性有哪些

新增了let、const关键字替换var声明变量，因为var会导致变量提升，在申明之前可以访问变量。新增了箭头函数，新增了promise、sync await、还有一些高级特性，比如像proxy。

Promise静态方法有哪些？

any、 race、 all等，（reject resolve也是静态方法）。

然后面试官让我说下，all的用法。我当时说多个Promise全部执行为才会调用all。但是面试官让我手写下用法，我给写错了，面试官耐心的引导我写出正确的，正确如下：

Promise.all([new Promise(), new Promise(), new Promise()]).then(values => console.log(values)).catch(err => console.log(err))

这时面试官又问我，如果把catch里的方法。作为then里的第二个参数，和现在的写法有啥区别吗？

Promise.all([new Promise(), new Promise(), new Promise()]).then(values => console.log(values),err => console.log(err))

如果任何一个Promise被拒绝，会调用then的第二个参数，而不会触发catch，因为错误在then中已经处理了。

普通函数和箭头函数的区别

普通函数内部是有this指向的，指向调用函数的对象，箭头函数本身是没有的，里面的this是箭头函数第一个有this的父作用域里的this。

例如：

let obj = {}
function  fun1 () {console.log(this)
}
const fun2 = () => console.log(this)obj.a = fun1 // this指向obj
obj.b = fun2 // this指向window

接着面试官又问了我一个问题，箭头函数的this是调用的时候确定的还是定义的时候确定的？

我回答调用的时候，调用的时候，对象属于哪个作用域，就是确定为哪个。

实际是定义的时候确定的。

map和set的作用

你知道map和set的作用吗？

我回答了一半，Map允许使用任意类型的键，包括对象，而对象的键只能是字符串或符号。

其实除此之外，Map保留键值对的插入顺序，遍历时按插入顺序返回。Map在增删查操作上有更好的性能，特别是当键不是字符串时。

Set自动去除重复元素，确保集合内的值唯一，Set也提供了更高效的值查找、添加和删除操作。

js类定义静态方法

使用static关键字

js继承类怎么在方法内部调用方法

class A {a() {console.log('Method a from class A');}
}
class B extends A {b() {// this.a()super.a()}
}const instance = new B();
instance.b(); // 输出: Method a from class A

ts的泛型

有个加法函数，有两个参数，参数类型和返回值类型始终一致，string或者number怎么实现，我说可以用泛型实现。

const add = <T extends number | string>(a: T, b: T): T => a + b

返回值的类型可以不写，因为会自动推断

然后面试官问我，还有别的方法可以实现吗？我想了半天说没有。

其实还有别的方法，利用函数重载机制。

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {return a + b;
}

ts参数可选

可以使用?指定可选，或者使用工具函数指定可选。Omit

怎么防止多个文件打包进去多余的js和类，按需加载

分割代码，多使用动态import语句

const PageA = lazy(() => import("./Module/PageA"))

使用tree-shaking优化，不过需要使用ESModule，而不是CommondJS。tree-shaking可以通过AST语法树，分析代码中没有使用的模块，或者无用代码的导出。

按需引入代码，而不是引入所有

import { Button } from "antd/lib/Button"

下面的代码有啥问题，怎么修复

function C () {const [p, setP] = useState(10)return <Page p={[10, 20,]} onChange={(v) => {setP(v); fetch(p)}} />
}

发送请求时，都是使用上次的值，而不是最新值，这是因为useState更新值时是异步的。（react会进行一次批处理优化）解决方法有两种

// 方法1
function C () {const [p, setP] = useState(10)return <Page p={[10, 20,]} onChange={(v) => {setP(v); fetch(v)}} />
}
//方法2
function C () {const [p, setP] = useState(10)useEffect(() => fetch(p), [p]}return <Page p={[10, 20,]} onChange={(v) => {setP(v)}} />
}

二面

找代码问题

聊完我的项目经历后，立马问我，下面的代码会出现什么问题，怎么解决。

function Counter() {const [count, setCount] = useState(0);useEffect(() => {const id = setInterval(() => {setCount(count + 1);}, 1000);return () => clearInterval(id);}, []);return <h1>{count}</h1>;
}

上面的代码更新count有问题，因为每次更新count都使用旧的值，而不是最新的，

setCount((prevCount) => prevCount + 1); // 使用函数式更新

接着又给我下面的例子，问我有啥问题

function Counter() {const [count, setCount] = useState(0);const [step, setStep] = useState(1);useEffect(() => {const id = setInterval(() => {setCount(c => c + step);}, 1000);return () => clearInterval(ref.current);}, [step]);return (<><h1>{count}</h1><input value={step} onChange={e => setStep(Number(e.target.value))} /></>);
}

上面的组件出现的问题是：每次当step的值发生改变时，都会重新创建新的定时器

修改方法如下，

function Counter() {const [count, setCount] = useState(0);const [step, setStep] = useState(1);const ref = useRef(null)useEffect(() => {if (!ref.current) {ref.current = setInterval(() => {setCount(c => c + step);}, 1000);}// const id = setInterval(() => {//   setCount(c => c + step);// }, 1000);return () => clearInterval(ref.current);}, [step]);return (<><h1>{count}</h1><input value={step} onChange={e => setStep(Number(e.target.value))} /></>);
}

实现ts里的Picker 和 Omit

这个问题我当时是不会的，说实话，这两个工具函数我用的都很少，更别说实现了

webpack 和 vite 的 tree chunking的区别

tree chunking是一种清除无用代码的方案，主要是通过分析静态的代码导出和导入关系，寻找无用代码，然后删除它，不将它打包，从而优化代码体积，webpack需要开启es module，并且开启optimization选项，而vite天生就是支持es module的，不过vite是使用依赖的es模块加载机制优化的。

webpack loader 和 plugin 的区别

功能区别：Webpack原生只能理解js和JSON文件，而Loader扩展了其能力，使其能够处理非js文件，Loader是文件级别的转换工具，允许你在模块打包时对文件进行处理。plugin是对Webpack的整个构建过程进行扩展和增强.

原理的区别：webpack的loader拿到的是特定类型文件，而plugin可以根据hook处理webpack的各个流程。另外插件的本质是个是个带有apply方法的类，apply方法中参数是complier对象，可以通过这个对象提供的hook监听特定文件的变化进行编译。而loader是个函数，参数是匹配到的文件源码。

module.exports = class MyPlugin {apply(compiler) {compiler.hooks.done.tap('MyPlugin', (Compilation) => {console.log('MyPlugin: Compilation finished!');});}
}

用法区别：loader需要根据正则匹配特定的类型的文件，plugin需要实例化插件

commondJS 和 ESModule 的区别

commondJS是动态的，只有在运行时才能确定具体导入的内容，而ESModule是静态的，在编译时就能确定引入和导出的模块

commondJS导入使用的是require，require可以出现在代码任何地方（所以是动态的），导出使用exports或者module.exports

ESModule导入语句是import，import只能出现在文件顶部。（所以是静态的，import方法除外），导出使用export

commondJS实际上是被包裹在一个函数中，可以使用this，而ESModule没有this

commondJS会缓存模块。重新加载返回的是缓存，ESModule也是缓存，后续的导入将共享相同的实例

下面的输出内容是啥

// a.js
const b = require('./b');
console.log(exports.x);
exports.x = 'x';
require('./c');// b.js
const a = require('./a');
console.log(a);
a.x = 'y';// c.js
const a = require('./a');
console.log(a.x);

输出结果如下

{}
undefined
x

分析步骤：

加载a.js，首先遇到require('./b')，它会开始加载b.js。此时a.js尚未完全加载完成，它处于未完成的状态，因此，Node.js会将一个空的exports对象暴露给b.js

接着加载b.js，在b.js中，有const a = require('./a')，由于a.js还在加载中（未完成），所以 a 会是当前的未完成a.js的导出对象，此时是空的 {}。所以执行console.log(a)，打印结果为{}， 接着执行a.x = 'y'，这会修改a模块的导出内容，将{} 变为 { x: 'y' }。但是由于 a.js还未完成执行，exports.x = 'x'; 还没有执行，所以x暂时变为y。

然后回到a.js继续执行：

首先执行console.log(exports.x)，此时 exports 对象还没有被赋值，exports.x是undefined。 然后执行exports.x = 'x'，将a.js的exports对象更新为{ x: 'x' }，覆盖了之前b.js 中将x赋值为'y'的修改。

接着，加载require('./c')，开始加载 c.js。

在c.js中，有const a = require('./a')。由于a.js已经完成了加载，因此a的值是最终导出的 exports对象{ x: 'x' }。 执行console.log(a.x)，此时a.x 是'x'，所以会输出 'x'。

写一个加法函数sum，支持sum(1)(2)(3,4)(5,6,7....), console.log(sum(1,2,3)(4)) => 输出 10

我当时写完的函数是这样的，虽然差不多意思，但是不太对。有知道的大佬可以在告诉我下。

const sum = (...args) => {const add = (x) =>{if (x === undefined) {return args.reduce((a, b) => a + b, 0)} else {args.push(x)return add(...args)}}return add(...args)
}

三面

简单问了下项目经历，聊了下项目里的亮点，四十分钟不到结束了。这里就不多赘述了。

总结

从结果来看虽然通过了，但是真的觉得自己很菜，很多底层的东西，可能只是知其然，并没有知其所以然。

虽然es6已经横空出世好多年了，但是里面的内容真的搞懂的不是很多。所以后续还需要多翻书，多研究细节。

最后希望这篇文章可以帮到找工作的同学，也可以翻看我前面的几篇面试文章。

文章中出现错误的地方欢迎指正！